I'm trying to code a task manager where I'll have events on a external container. That's working for now, but I need that when droping an event between tho existing events on the calendar dynamicaly re-ubicate the existing ones.
I'm trying to use dragula for that, but I can't figure out how. I've tried with
dragula([document.getElementById('external-container'), document.getElementById('calendar')]);
but that is not working.
Here's my html:
<div id='external-events'>
<p>
<div class='fc-event'>Formato 1</div>
<div class='fc-event'>Formato 2</div>
<div class='fc-event'>Formato 3</div>
<div class='fc-event'>Formato 4</div>
<div class='fc-event'>Formato 5</div>
</p>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>eliminar</label>
</p>
</div>
And the js:
<script>
document.addEventListener('DOMContentLoaded', function () {
var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('calendar');
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var drake = dragula({
containers: [ containerEl ],
copy: true
}
);
dragula([document.getElementById('external-events'), document.getElementById('calendar')]);
new FullCalendarInteraction.ThirdPartyDraggable(containerEl, {
itemSelector: '.fc-event',
mirrorSelector: '.gu-mirror', // the dragging element that dragula renders
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: ['interaction', 'dayGrid', 'timeGrid', 'resourceTimeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,resourceTimeGridSemana,resourceTimeGridDay'
},
timeZone: 'UTC',
defaultView: 'resourceTimeGridDay',
datesAboveResources: true,
weekends: true,
resources: [
{ id: 'a', title: 'Prensa 1' },
{ id: 'b', title: 'Prensa 2'},
{ id: 'c', title: 'Prensa 3' },
{ id: 'd', title: 'Prensa 4' }
],
views: {
resourceTimeGridSemana: {
type: 'resourceTimeGrid',
duration: { days: 7 },
buttonText: 'Semana'
}
},
events: /*'https://fullcalendar.io/demo-events.json?with-resources=4&single-day',*/ [
{
title: 'All Day Event',
start: '2019-12-11',
resourceId: 'a'
},
{
title: 'Long Event',
start: '2019-12-10',
end: '2019-12-13',
resourceId: 'b'
},
{
id: 999,
title: 'Repeating Event',
start: '2019-12-11T16:00:00',
end: '2019-12-11T21:00:00',
resourceId: 'c',
backgroundColor: '#FF5C47'
}
],
eventOverlap: function (stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
console.log(info.event.getResources().map(function(resource) { return resource.id }));
alert(info.event.getResources());
if (info.event.id) {
var event = calendar.getEventById(info.event.id);
event.remove();
}
}
});
calendar.render();
});
Thank you!