完整的日历拖放事件回调

时间:2019-12-10 14:15:21

标签: javascript fullcalendar draggable fullcalendar-4

当我尝试向其添加外部事件时,我需要日历中的日期和时间,我如何才能做到这一点呢?这是我已经处理过的代码。

document.addEventListener('DOMContentLoaded', function () {
        var Calendar = FullCalendar.Calendar;
        var Draggable = FullCalendarInteraction.Draggable

        //// the individual way to do it
        var containerEl = document.getElementById('external-events-list');
        var eventEls = Array.prototype.slice.call(
          containerEl.querySelectorAll('.fc-event')
        );
        eventEls.forEach(function(eventEl) {
          new Draggable(eventEl, {
            eventData: {
                title: eventEl.innerText.trim(),
              }, // this allows things to be dropped onto the calendar
              drop: function (arg) {
                  // is the "remove after drop" checkbox checked?
                  alert(arg);
              }, // this allows things to be dropped onto the calendar
              eventReceive: function (arg) {
                  // is the "remove after drop" checkbox checked?
                  alert(arg);
              },
              eventDrop: function (event, delta, revertFunc) {
                  //inner column movement drop so get start and call the ajax function......
                  console.log(event.start.format());
                  console.log(event.id);
                  var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
                  var end = event.end || event.start.clone().add(defaultDuration);
                  console.log('end is ' + end.format());

                  //alert(event.title + " was dropped on " + event.start.format());

              }
          });
        });

        /* initialize the calendar
        -----------------------------------------------------------------*/

        var calendarEl = document.getElementById('calendar');
        var calendar = new Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function (arg) {
                // is the "remove after drop" checkbox checked?
                if (document.getElementById('drop-remove').checked) {
                    // if so, remove the element from the "Draggable Events" list
                    arg.draggedEl.parentNode.removeChild(arg.draggedEl);
                }
            },
            eventDrop: function (info) {
                alert(info.event.title + " was dropped on " + info.event.start.toISOString());

                if (!confirm("Are you sure about this change?")) {
                    info.revert();
                }
            },
            //eventRender: function (info) {
            //    console.log(info.event.extendedProps);
            //    // {description: "Lecture", department: "BioChemistry"}
            //}
        });
        calendar.render();
    });

我正在尝试在新的可拖动对象中添加事件回调函数,但由于我在日历中拖动时未触发事件,因此没有用它会从新日历触发,因此我要求将事件从外部拖到日历中后,我需要从中获取日期和时间。

0 个答案:

没有答案