Jquery FullCalendar扩展开始日期或结束日期

Jquery FullCalendar Extend Start Date or End Date

本文关键字：日期 结束 开始 FullCalendar 扩展 Jquery      更新时间：2024-02-29

我使用的是Jquery FullCalendar。

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

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

现在，如果我通过拖动来延长开始日期或结束日期。

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

例如：

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

我需要同样的解决方案来延长开始日期或结束日期。

我面临的可能性：

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

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

或

何时延期：2013-12-01至2013-12-07

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

您可以使用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();
        }
    }
});
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,

相关文章：