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

我正在使用全日历。我可以获取有关事件点击的数据,但是问题是我无法获取有关拖动事件的数据。

说明:(我可以通过事件单击获取数据,但问题是我不能在拖动事件中获取数据。)

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

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',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',description: 'Integer fermentum bibendum elit in egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus.'
            },{
                id: 'event-6',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',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',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',{
                id: 'event-10',title: 'new event',start: '2019-'+ getDynamicMonth('default') +'-24T08:12:14',end: '2019-'+ getDynamicMonth('default') +'-27T22:20:20',{
                id: 'event-12',title: 'Other new',start: '2019-'+ getDynamicMonth('dec') +'-13T08:12:14',end: '2019-' + getDynamicMonth('dec') +'-16T22:20:20',description: 'pellentesque ut convallis velit. Sed purus urna,efficitur id mi. Lorem ipsum dolor sit amet,{
                id: 'event-13',title: 'Upcoming Event',start: '2019-'+ getDynamicMonth('inc') +'-15T08:12:14',end: '2019-'+ getDynamicMonth('inc') +'-18T22:20:20',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,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');
            });
        }
    })
woainiliteng 回答:Fullcalendar 3.x-在事件拖动时无法获取模态数据

您不应该使用._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/

本文链接:https://www.f2er.com/3169093.html

大家都在问