The click of the ADD EVENT field, inside the fullcalendar cell, is superimposing the click of the event.
I have an ADD field inside the cells of the fullcalendar, which creates a quick link to insert an event.
The problem is when the same cell (day) has an event.
I miss the event click that serves to detail.
I need the two clicks to work.
My Codepen
https://codepen.io/lucasmormilho/pen/qBXvaPj
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-11-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventClick: function(){
alert("Details Event");//click details event
},
dayCellDidMount: function (arg) {
if (!arg.el.classList.contains("fc-day-sun") && !arg.el.classList.contains("fc-day-sat") && !arg.el.classList.contains("fc-day-past")) {
var theElement = arg.el.querySelectorAll(".fc-daygrid-day-frame > .fc-daygrid-day-events")[0]
setTimeout(function () {
theElement.innerHTML = theElement.innerHTML + '<div class="text-center"><span style="color:Gray" onclick="AddEvento()" >ADD</span></div>';
}, 10)
}
},
events: [
{
title: 'All Day Event',
start: '2021-11-01'
},
{
title: 'Long Event',
start: '2021-11-07',
end: '2021-11-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-16T16:00:00'
},
{
title: 'Conference',
start: '2021-11-11',
end: '2021-11-13'
},
{
title: 'Meeting',
start: '2021-11-12T10:30:00',
end: '2021-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-11-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-11-19'
}
]
});
calendar.render();
});
function AddEvento() {
alert("ADD EVENT"); //click ADD event
};