javascript - How to make event of full calendar on drop go to that slot of that date

Question

Hi there Can you help me please, is it possible on drop of event if event has title :event1 and start_at:10/10/2018 when I drop this event to the calendar the event to be dropped automaticly to that slot of date even though I just drop it somewhere ele is it possible somehow to be pulled to that slot with date 10/10/2018..? Here is an example of fullcalendar drag drop

https://codepen.io/subodhghulaxe/pen/qEXLLr?editors=0010

Answer 1

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