通过拖放fullcalendar-Javascript更新事件 [英] updating an event by dragging/dropping fullcalendar- Javascript

问题描述

我正在为正在开发的项目使用 Fullcalendar ...我只剩下一个功能即将现有事件从原始位置拖到另一个时间或日期。我想知道如何获取当前的对象信息（标题，新的开始时间，旧的开始时间，id，url等），因此我可以用更新的信息更新数据库... Fullcalendar对象的属性我用？
我实现了 drop 属性;

  drop：function （date，allDay）{
 //检索已删除元素的存储事件对象
 var originalEventObject = $（this）.data（'eventObject'）; 
 //我们需要复制它，以便多个事件不会
 //有一个引用对象
 var copiedEventObject = $ .extend（{}，originalEventObject）; 
 //为其分配报告的日期
 copiedEventObject.start = date; 
 copiedEventObject.allDay = allDay; 
 
 //在日历上渲染事件
 //最后一个`true`参数决定事件'sticks` 
 $（'＃calendar'）。fullCalendar（' renderEvent'，copiedEventObject，true）; 
 
 //如果勾选删除后删除复选框？ 
 if（$（'＃drop-remove'）。is（'：checked'））{
 //如果是这样的话从Draggable Events中移除元素
 $（this） 。去掉（）; 
} 
}，
  

但它没有做我想做的事......

解决方案

查看事件拖动和调整大小http://arshaw.com/fullcalendar/docs/event_ui/

我认为你在寻找 eventDrop 回调。

当拖动停止并且事件移动到不同的
日/时时触发。 p>

http：// arshaw。 com / fullcalendar / docs / event_ui / eventDrop /

来自arshaw网站的示例：

<$ p $ fullCalendar（{
events：[
// events here
]，
editable：true，
eventDrop：function（event，dayDelta，minuteDelta，allDay，revertFunc）{

alert（
event.title +was moved+
dayDelta +days and+
minuteDelta +minutes。
）;

if（allDay）{
alert（Event is now all-day）;
} else {
alert（Event has a time-of-day）;
}

if（！confirm（你确定这个改变吗？））{
revertFunc（）;
}

}
}）;

I'm using Fullcalendar for a project I'm developing ... I have only one feature left to be implemented, which is when an existing event is dragged from it's original position to another time or date. I would like to know how I get the current object information (title, new start time, old start time, id, url, etc), so I can update the database with the newer information ... which property from the Fullcalendar object do I use? I implemented the drop property;

    drop  : function(date, allDay) {
            // 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 object
            var copiedEventObject   = $.extend({}, originalEventObject);
            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event `sticks`
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

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

but it's not doing what I wanted ...

解决方案

Take a look at the Event Dragging and Resizing http://arshaw.com/fullcalendar/docs/event_ui/

I think what you are looking for the eventDrop callback.

Triggered when dragging stops and the event has moved to a different day/time.

http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/

Example from arshaw's site:

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

        alert(
            event.title + " was moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (allDay) {
            alert("Event is now all-day");
        }else{
            alert("Event has a time-of-day");
        }

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }

    }
});

这篇关于通过拖放fullcalendar-Javascript更新事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！