Fullcalendar 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 属性来获取时刻的值。这个值只是。没有合理的理由使用它来检索数据——它没有被 momentJS 处理过，它不会考虑对 moment 对象的任何后续更改，并且它可能有多种不同的格式，具体取决于 moment 的处理方式已初始化，因此很难可靠地从中获取信息（正如您所发现的）。

拖动事件后，新时刻的 ._i 属性是数组而不是字符串 - 这一定是 fullCalendar 将新日期和时间信息传递到新时刻的方式生成的力矩对象。这就是为什么提取它并尝试像字符串一样拆分它会出错的原因。但正如我所解释的，这是 moment 对象的一个不相关的内部细节，你不需要担心它

要从 momentJS 对象获取日期和时间，您应该使用 public，记录在案 API，而不是通过适合场景的 getter (https://momentjs.com/docs/#/get-set/) or the display options (https://momentjs.com/docs/#/displaying/)。这也避免了您需要进行当前正在执行的手动字符串拆分，以便在没有 "T".

的情况下获取日期的开始和结束部分

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

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

和结束日期类似。这将适用于所有情况，无论在此期间事件发生了什么。

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

Fullcalendar 3.x - 无法在事件拖动模式中获取数据

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

html

javascript

fullcalendar

momentjs

fullcalendar-3