Question

我正在使用Jquery FullCalendar。

以下是我正在使用的日历链接：http://arshaw.com/fullcalendar/

我有一个案例，我有一个开始和结束。

现在，如果我通过拖动来延长startdate或enddate。

如何获取拖动/延长日期时触发的响应事件？

例如：

当我将事件从一个日期移动到另一个日期时，我使用 eventDrop 。它给我添加或减去原始日期的日期。

我需要相同的解决方案来延长startdate或enddate。

我面临的可能性：

原始日期：2013-12-04至2013-12-07

延期时间：2013-12-04至2013-12-10

OR

扩展时间：2013-12-01至2013-12-07

以下是我面临的案例。如何跟踪我在日历中执行的事件以及它通过的参数？

Answer 1

您可以使用以下 eventResize 示例来自官方网站：

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

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

        alert(
            "The end date of " + event.title + "has been moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (!confirm("is this okay?")) {
            revertFunc();
        }

    }
});

Answer 2

根据您的要求，Jquery Fullcalender提供了很多选项供您参加活动

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-04 to 2013-12-10

这是当您延长活动持续时间时，为了捕捉更改结束日期的事件，您可以使用以下代码

eventResizeStart: function (event, jsEvent, ui, view) {
    console.log('RESIZE START ' + event.title);

},
eventResizeStop: function (event, jsEvent, ui, view) {
    console.log('RESIZE STOP ' + event.title);

},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    console.log('RESIZE!! ' + event.title);
    console.log(dayDelta + ' days'); //this will give the number of days you extended the event
    console.log(minuteDelta + ' minutes');

},

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-01 to 2013-12-07

这是您预先录制活动的时间，然后您可以使用以下代码

eventDragStart: function (event, jsEvent, ui, view) {
    console.log('DRAG START ' + event.title);
    console.log(this);
},
eventDragStop: function (event, jsEvent, ui, view) {
    console.log('DRAG STOP ' + event.title);
    console.log(this);
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    console.log('DROP ' + event.title);
    console.log(dayDelta + ' days'); //this will give the number of days you dragged before or after
    console.log(minuteDelta + ' minutes');
    console.log('allday: ' + allDay);

},

根据您的评论，如果您想限制用户拖动活动或调整活动大小，那么您可以使用eventDurationEditable，默认情况下为true

eventDurationEditable:false,

Jquery FullCalendar延长开始日期或结束日期

2 个答案: