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

问题描述

我有一个关于fullcalendars拖放功能的简短问题。

这是我的JS代码

  $（'＃calendar' ）.fullCalendar（{
 header：{
 left：'prev，next today'，
 right：'title'
}，
 editable：true，
 droppable：true，//这可以让东西掉到日历上!!! 
 drop：function（date，allDay）{//当某些东西被丢弃时调用这个函数
 
 //检索被删除元素的存储事件对象
 var originalEventObject = $（this）.data（'eventObject'）; 
 console.log（originalEventObject.title）; 
 
 //我们需要复制它，以便多个事件没有对同一对象的引用
 var copiedEventObject = $ .extend（{}，originalEventObject）; 
 
 //赋值它报告的日期
 // console.log（originalEventObject.start）; 
 // console.log（originalEventObject.end）; 
 copiedEventObject.start = date ; 
 copiedEventObject.allDay = allDay; 
 
 //在日历上呈现事件
 //最后的`true`参数确定事件是否粘住（http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /）
 $（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）; 
 
 //是否勾选删除后删除复选框？ 
 if（$（'＃drop-remove'）。is（'：checked'））{
 //如果是，从Draggable Events列表中删除元素
 $（此）卸下摆臂（）; 
} 
 
} 
}）; 
  

我想要创建一个名为 var dragged_event 的新变量，就像下面的每个拖放事件一样。

  var dragged_event =名称：+ originalEventObject.title +，开始： + ??? +，结束：+ ??? 
  

所以输出看起来像类似的东西

 的console.log（dragged_event）; 
 //姓名：生日开始日期：2014年3月6日结束日期：2014年3月08日
  

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

/ div>

您可以尝试像

  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）; //在放弃时，我们只给了我们的日期
 console.log（'end is'+ end.format（））; 
 
 //检索已删除元素的存储事件对象
 var originalEventObject = $（this）.data（'eventObject'）; 
 
 //我们需要复制它，以便多个事件不会引用同一个对象
 var copiedEventObject = $ .extend（{}，originalEventObject）; 
 
 
 
 //指定报告的日期
 copiedEventObject.start = date; 
 copiedEventObject.allDay = allDay; 
 
 copiedEventObject.backgroundColor = $（this）.css（background-color）; 
 copiedEventObject.borderColor = $（this）.css（border-color）; 
 
 //在日历上呈现事件
 //最后的`true`参数确定事件是否粘住（http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /）
 $（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）; 
 
 //是否勾选删除后删除复选框？ 
 if（$（'＃drop-remove'）。is（'：checked'））{
 //如果是这样，从Draggable Events列表中移除元素
 $（此）卸下摆臂（）; 
} 
 
} 
  

给出这个结果

或者按照这个例子。

I have a quick question about fullcalendars drag and drop functionality.

Here is my JS Code

$('#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();
        }

    }
});

I would like to create a new variable called var dragged_event that looks something like below with each dragged and dropped event.

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

So the output look like something similar

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

Currently I'm unable to determined how to get the Start and End date of the dragged event. Could anyone lend me a hand in solving this please?

Thank you for reading.

解决方案

You can try something like

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();
        }

      }

Gives this result

OR follow this example.

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

这篇关于如何在fullcalendar上获取外部拖放事件的开始和结束日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！