Fullcalendar 3.x - Unable to get data in modal on event drag

Question

I am using fullcalendar. I am able to get data on event click but the problem is I am not able to get it on drag event.

Explaination: ( I am able to get data on event click but the problem is I am not able to get it on drag event. )

When I click the events it get the data of the event in modal but when I drag the event to another date and clicked the event again it gets the event ( title, description ) again but didn't get updated event start and end dates.

var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: [
            {
                id: 'event-1',
                title: 'All Day Event',
                start: '2019-'+ getDynamicMonth('default') +'-01T14:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-02T14:30:00',
                className: "bg-danger",
                description: 'Aenean fermentum quam vel sapien rutrum cursus. Vestibulum imperdiet finibus odio, nec tincidunt felis facilisis eu. '
            },
            {
                id: 'event-2',
                title: 'Long Event',
                start: '2019-'+ getDynamicMonth('default') +'-07T19:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-09T14:30:00',
                className: "bg-primary",
                description: 'Etiam a odio eget enim aliquet laoreet. Vivamus auctor nunc ultrices varius lobortis.'
            },
            {
                id: 'event-3',
                title: 'Conference',
                start: '2019-'+ getDynamicMonth('default') +'-17T14:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-18T14:30:00',
                className: "bg-warning",
                description: 'Proin et consectetur nibh. Mauris et mollis purus. Ut nec tincidunt lacus. Nam at rutrum justo, vitae egestas dolor. '
            },
            {
                id: 'event-4',
                title: 'Meeting',
                start: '2019-'+ getDynamicMonth('default') +'-12T10:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-13T10:30:00',
                className: "bg-danger",
                description: 'Mauris ut mauris aliquam, fringilla sapien et, dignissim nisl. Pellentesque ornare velit non mollis fringilla.'
            },
            {
                id: 'event-5',
                title: 'Lunch',
                start: '2019-'+ getDynamicMonth('default') +'-12T15:00:00',
                end: '2019-'+ getDynamicMonth('default') +'-13T15:00:00',
                className: "bg-warning",
                description: 'Integer fermentum bibendum elit in egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus.'
            },
            {
                id: 'event-6',
                title: 'Meeting',
                start: '2019-'+ getDynamicMonth('default') +'-12T21:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-13T21:30:00',
                className: "bg-success",
                description: 'Curabitur facilisis vel elit sed dapibus. Nunc sagittis ex nec ante facilisis, sed sodales purus rhoncus. Donec est sapien, porttitor et feugiat sed, eleifend quis sapien. Sed sit amet maximus dolor.'
            },
            {
                id: 'event-7',
                title: 'Happy Hour',
                start: '2019-'+ getDynamicMonth('default') +'-12T05:30:00',
                end: '2019-'+ getDynamicMonth('default') +'-13T05:30:00',
                className: "bg-warning",
                description: 'Morbi odio lectus, porttitor molestie scelerisque blandit, hendrerit sed ex. Aenean malesuada iaculis erat, vitae blandit nisl accumsan ut.'
            },
            {
                id: 'event-8',
                title: 'Dinner',
                start: '2019-'+ getDynamicMonth('default') +'-12T20:00:00',
                end: '2019-'+ getDynamicMonth('default') +'-13T20:00:00',
                className: "bg-danger",
                description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            },
            {
                id: 'event-9',
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2019-'+ getDynamicMonth('default') +'-27T20:00:00',
                end: '2019-'+ getDynamicMonth('default') +'-28T20:00:00',
                className: "bg-success",
                description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            },
            {
                id: 'event-10',
                title: 'new event',
                start: '2019-'+ getDynamicMonth('default') +'-24T08:12:14',
                end: '2019-'+ getDynamicMonth('default') +'-27T22:20:20',
                className: "bg-danger",
                description: 'Sed purus urna, aliquam et pharetra ut, efficitur id mi. Pellentesque ut convallis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            },
            {
                id: 'event-12',
                title: 'Other new',
                start: '2019-'+ getDynamicMonth('dec') +'-13T08:12:14',
                end: '2019-' + getDynamicMonth('dec') +'-16T22:20:20',
                className: "bg-primary",
                description: 'Pellentesque ut convallis velit. Sed purus urna, aliquam et pharetra ut, efficitur id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            },
            {
                id: 'event-13',
                title: 'Upcoming Event',
                start: '2019-'+ getDynamicMonth('inc') +'-15T08:12:14',
                end: '2019-'+ getDynamicMonth('inc') +'-18T22:20:20',
                className: "bg-primary",
                description: 'Pellentesque ut convallis velit. Sed purus urna, aliquam et pharetra ut, efficitur id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            }

        ],
        editable: true,
        eventLimit: true,
        eventMouseover: function(event, jsEvent, view) {
            $(this).attr('id', event.id);

            $('#'+event.id).popover({
                template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
                title: event.title,
                content: event.description,
                placement: 'top',
            });

            $('#'+event.id).popover('show');
        },
        eventRender: function() {

        },
        eventMouseout: function(event, jsEvent, view) {
            $('#'+event.id).popover('hide');
        },
        eventClick: function(info) {

            console.log(info);

            addEvent.style.display = 'none';
            editEvent.style.display = 'block';

            addEventTitle.style.display = 'none';
            editEventTitle.style.display = 'block';
            modal.style.display = "block";
            document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            createBackdropElement();

            // Calendar Event Featch
            var eventTitle = info.title;
            var eventDescription = info.description;

            var eventStartDate = info.start._i;

            var eventStartDateSplit = eventStartDate.split('T')
            var eventStartDateSliced = eventStartDateSplit[0];
            var eventStartTimeSliced = eventStartDateSplit[1];

            var eventEndDate = info.end._i;

            var eventEndDateSplit = eventEndDate.split('T')
            var eventEndDateSliced = eventEndDateSplit[0];
            var eventEndTimeSliced = eventEndDateSplit[1];

            // Task Modal Input
            var taskTitle = $('#write-e');
            var taskTitleValue = taskTitle.val(eventTitle);

            var taskDescription = $('#taskdescription');
            var taskDescriptionValue = taskDescription.val(eventDescription);

            var taskInputStarttDate = $("#start-date");
            var taskInputStarttDateValue = taskInputStarttDate.val(eventStartDateSliced + ' ' + eventStartTimeSliced);

            var taskInputEndDate = $("#end-date");
            var taskInputEndtDateValue = taskInputEndDate.val(eventEndDateSliced + ' ' + eventEndTimeSliced);


            $('#edit-event').off('click').on('click', function(event) {
                event.preventDefault();
                /* Act on the event */
                var radioValue = $("input[name='marker']:checked").val();

                var taskStartTimeValue = document.getElementById("start-date").value;
                var taskEndTimeValue = document.getElementById("end-date").value;

                info.title = taskTitle.val();
                info.description = taskDescription.val();
                info.start._i = taskStartTimeValue;
                info.end._i = taskEndTimeValue;
                info.className = radioValue;

                $('#calendar').fullCalendar('updateEvent', info);
                modal.style.display = "none";
                var getModalBackdrop = document.getElementsByClassName('modal-backdrop')[0];
                document.body.removeChild(getModalBackdrop)
                document.getElementsByTagName('body')[0].removeAttribute('style');
            });
        }
    })

Answer 1

You should not be using ._i property to get the value of a moment. This value simply represents the original data used to create the moment . There is no logical reason to use it to retrieve data - it has not been processed by momentJS, it will not take account of any subsequent changes to the moment object and it may potentially be in a number of different formats depending on how the moment was initialised, making it difficult to reliably get information from it (as you've discovered).

After you drag the event, the ._i property of the new moment is an array rather than a string - that must be the way fullCalendar passes the new date and time info into the newly generated moment object. And that's why extracting it and trying to split it like a string goes wrong. But as I've explained, this is an irrelevant internal detail of the moment object, and you should not need to worry about it

To get the date and time from a momentJS object you should use the public, documented API instead - either via the getters ( https://momentjs.com/docs/#/get-set/ ) or the display options ( https://momentjs.com/docs/#/displaying/ ) as appropriate to the scenario. This also avoids the need for you to do the manual string splitting you're currently doing in order to get the start and end parts of the date without the "T".

For instance, for the start date you could simply write

taskInputStarttDate.val(info.start.format("YYYY-MM-DD HH:mm:ss"));

and similar for the end date. This will work in all circumstances no matter what else has happened to the event in the meantime.

Demo: http://jsfiddle.net/b8qf1kdw/