如何在fullcalendar上获取外部拖放事件的开始和结束日期

Question

我对fullcalendars拖放功能有一个快速提问。

这是我的JS代码

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        right: 'title'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');
        console.log(originalEventObject.title);

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
        // console.log(originalEventObject.start);
        // console.log(originalEventObject.end);
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
            // if so, remove the element from the "Draggable Events" list
            $(this).remove();
        }

    }
});

我想创建一个名为 var dragged_event 的新变量，对于每个拖放事件，它看起来如下所示。

var dragged_event = "Name: " + originalEventObject.title + ", Start: " + ??? + ", End: " + ???

所以输出看起来像是类似的

console.log(dragged_event);
//Name: Birthday Start: Mar 06 2014 End: Mar 08 2014

目前我无法确定如何获取拖动事件的开始日期和结束日期。有人可以帮我解决这个问题吗？

感谢您的阅读。

Answer 1

您可以尝试类似

的内容

drop: function (date, allDay) {

          console.clear();
          console.log("dropped");
          console.log(date.format());


          var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
          var end = date.clone().add(defaultDuration); // on drop we only have date given to us
          console.log('end is ' + end.format());

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);



        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        copiedEventObject.backgroundColor = $(this).css("background-color");
        copiedEventObject.borderColor = $(this).css("border-color");

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove();
        }

      }

给出这个结果

或者按照这个例子。

• http://jsfiddle.net/dg9gp3e3/3/

Answer 2

过载

  

drop：function（date，allDay）

是

  

drop：function（start，end，allDay）

开始日期和结束日期存储在“开始”和“结束”变量中。