Actually, this is possible by adding your own logic as @ADyson mentioned above in comments.
HTML
Well, I have added id
and date
as an attribute to external events something like this:
<div class='fc-event' id='1' date='2018-10-13'>My Event 1</div>
<div class='fc-event' id='2' date='2018-10-09'>My Event 2</div>
<div class='fc-event' id='3' date='2018-10-14'>My Event 3</div>
<div class='fc-event' id='4' date='2018-10-04'>My Event 4</div>
<div class='fc-event' id='5' date='2018-10-27'>My Event 5</div>
jQuery
then, id: $(this).attr('id')
for each external events
$(this).data('event', {
id: $(this).attr('id'),
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
and, at last I am creating a new event on the basis of particular date and removing the event before it by using $(this).attr('id')
as you can see below:
drop: function(date) {
var newEvent = {
title:$(this).text(),
start: $(this).attr('date'),
end: $(this).attr('date'),
allDay: false
};
$('#calendar').fullCalendar('removeEvents', $(this).attr('id'));
$('#calendar').fullCalendar('renderEvent', newEvent, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
This is just an idea, so now you can change it as per your need. You can also use same logic on internal calendar events!
Return external events back to the list by using external div/button
Probably, this is not the best approach to revert external events back to the list from the calendar, but what I'm doing here is on clicking the external div #back-to-list
, retrieving all events from FullCalendar memory and creating a div
named eventDiv then appending it into $('#external-events-listing')
and also adding draggable
to events. Then, removing all events from the calendar.
$('#back-to-list').click(function() {
$('#calendar').fullCalendar('clientEvents', function(event) {
var eventDiv = document.createElement('div');
eventDiv.setAttribute("class", "fc-event");
eventDiv.setAttribute("id", event.id);
eventDiv.setAttribute("date", event.start.format('YYYY-MM-DD'));
eventDiv.innerText = event.title;
$('#external-events-listing').append(eventDiv);
$(eventDiv).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
});
$('#calendar').fullCalendar('removeEvents');
});
If external event has editable: false
then dragging is not possible with in the calendar.
Undo last event to the list
Set tempArray
globally, while adding a new event on drag in add event into tempArray
, on #undo-last-item
click retrieve event details from tempArray
and append last item to the draggable events list.
$('#undo-last-item').click(function() {
if (Object.entries(tempArray).length > 0) {
var eventDiv = document.createElement('div');
eventDiv.setAttribute("class", "fc-event");
eventDiv.setAttribute("id", tempArray.id);
eventDiv.setAttribute("date", tempArray.start);
eventDiv.innerText = tempArray.title;
$('#external-events-listing').append(eventDiv);
$(eventDiv).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
$('#calendar').fullCalendar('removeEvents', tempArray.id);
tempArray = [];
}
});
Full code: Drag an external event to calendar's specific date