I have problem with Calendar external events: I just use this Draggable code
new Draggable('#event-container', {
itemSelector: '.external-event',
eventData: function(eventEl) {
return {
title: 'event-title',
allDay:false,
start: '12:30:00',
duration: '2:00:00',
};
}
});
In this case , i can drop only on Day view, but not on Month view.
If i remove the duration parameter, then i can drop the event on Month view.
In both cases, the "eventReceive" function always returns an event with allDay:true ... instead of range event.
Any help would be appreciated, thanks.
EDIT: Added snippet. We have many errors in console that i don't see on my private server
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('operatori_list');
var calendarEl = document.getElementById('calendar');
var cal = new Calendar(calendarEl, {
locale: 'it',
eventDisplay:'block',
headerToolbar: {
left : 'prev,next today',
center: 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [],
editable : true,
droppable : true,
drop: function(date, jsEvent, ui, resourceId) {
console.log('drop', this);
console.log('drop', arguments);
},
eventReceive: function(info) {
console.log('eventReceive', info);
},
});
cal.render();
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
allDay:false,
title: eventEl.innerText,
start: $(eventEl).attr("data-starttime"),
duration: $(eventEl).attr("data-timeduration"),
};
}
});
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.js"></script>
<div id="operatori_list" class="dragWrapper">
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 1" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 1 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 2" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 2 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 3" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 3 </div>
</div>
<div id="calendar"></div>