完整日历3.x -无法在事件拖放时以模态方式获取数据

Question

我用的是完整的日历。我能够获得数据在事件点击，但问题是，我不能获得它的拖动事件。

解释：(我能够在事件点击中获得数据，但问题是我无法在拖动事件上获得数据。)

当我单击事件时，它会按模式获取事件的数据，但当我将事件拖到另一个日期并再次单击该事件时，它将再次获得事件(标题、描述)，但没有得到更新的事件开始日期和结束日期。

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

您不应该使用._i属性来获取某个时刻的值。这个值只是represents the original data used to create the moment。使用它检索数据没有合理的理由--它还没有被momentJS处理过，它不会考虑随后对该对象的任何更改，而且它可能会以多种不同的格式出现，这取决于该时刻是如何初始化的，因此很难可靠地从它获得信息(正如您已经发现的)。

拖动事件后，新时刻的._i属性是数组而不是字符串--这必须是fullCalendar将新的日期和时间信息传递给新生成的矩对象的方式。这就是为什么提取它并试图像字符串一样分裂它的原因。但是，正如我已经解释过的，这是时间对象的一个无关的内部细节，您不需要担心它

要从momentJS对象获取日期和时间，您应该使用公共的、文档化的API --或者通过getter (https://momentjs.com/docs/#/get-set/)或者显示选项(https://momentjs.com/docs/#/displaying/)来实现。这也避免了您需要进行当前正在进行的手动字符串拆分，以便在没有"T“的情况下获得日期的开始部分和结束部分。

例如，对于开始日期，您可以简单地编写

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

最后的日子也是一样。在此期间，无论发生了什么事情，这种做法在任何情况下都会奏效。

演示：http://jsfiddle.net/b8qf1kdw/