如何在单击按钮时从FullCalendar中检索所有拖放的EventObjects数据

how to retrieve all dragged and dropped EventObjects data from FullCalendar on button click

本文关键字：检索 拖放 数据 EventObjects FullCalendar 单击 按钮      更新时间：2023-09-26

我有一个完整的日历设置，你可以拖放外部事件，设置如下

http://jsfiddle.net/YwL2j/1/

我想要完成的是在按钮上单击创建一个json对象与所有的拖放事件的格式看起来像这样。

[
   {"startDate":"1399313811","endDate":"1399313123","name":"My Event 1"},
   {"startDate":"1399313811","endDate":"1399313123","name":"My Event 2"},
   {"startDate":"1399313811","endDate":"1399313123","name":"My Event 3"}
]

startDate和endDate在删除和事件在日历中移动后反映正确的数据。

有人能帮我一下吗?谢谢你的阅读。

根据OP的要求，用例子和进一步的解释更新了答案

工作示例

您可以查看我放在一起的JSBin，以演示所请求的功能。代码有补充注释，记录了到底发生了什么——更重要的是，在大多数情况下，为什么。

使用唯一事件id

事件UID的最简单实现可以使用计数器来完成——对于每个新事件，计数器增加，从而为下一个事件提供一个新的UID。

与所有计数器一样，我们定义了它的起始位置…

var uid = 0;

对于fullCalendar小部件，我们在将外部事件拖放到日历中时为其分配UID。每个fullCalendar eventObject都有一个id属性，我们用它来存储这些信息。

在 fullCalendar.drop() 事件范围内完成以下操作:

$('#calendar').fullCalendar('renderEvent', {
    title: item,
    start: date,
    allDay: allDay,
    id: uid++
}, true);

为了监视和更新事件项的变化，我们使用一个自定义函数，由eventResize和eventDrop(内部掉落/在日历中移动外部事件)事件处理程序调用。

function validateUID(event) {
    eventsData.forEach(function (elm, idx) {
        if (elm.id == event.id) {
            eventsData[idx] = {
                name: event.title,
                startDate: new Date(event.start).getTime(),
                endDate: new Date(event.end).getTime(),
                id: event.id
            }
        }
    });
}

同样，您可以在提供的JSBin中看到该方法的实现。

最初反应

处理这个问题的一个好方法是在每次调用fullCalender.drop()时动态地构建一个数组——我们将其称为eventsData。在一个简单的实现中，您可以这样做:

// define an array to store all events data
var eventsData = []; 
// build the fullCalender widget
$('#calender').fullCalender({
    header: { /* generic header information */},
    editable: true,
    droppable: true,
    // the drop() event handler is called ONLY for external
    // drop events.
    drop: function (date /*, allDay, jsEvent, ui [, this]*/) {
        // format `date` into the OPs suggested format.
        // note that the external drop does not set an
        // end date -- so we re-use the start date for now.
        var fixed = new Date(date).getTime();
        // add dates to eventsData[]
        eventsData.push({
            name: $(this).html(),
            startDate: fixed,
            endDate: fixed
        });
    }
});

但是，正如您将注意到的，drop事件处理程序仅在删除外部事件时调用。为了使其成为一个逻辑实现，您需要监视任何删除或调整大小事件，以确保您的eventsData对象(数组)被一致地更新。

$('#calender').fullCalender({
    eventDrop: function (/* event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view */) {
        // handle all internal drops (or 'moves').
    },
    eventResize: function (/* event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view */) {
        // handle all resizing events (i.e. changing an events duration)
    }
})

此外，您可能需要考虑为您记录的每个事件添加唯一的ID;这样，您就可以执行逻辑检查，以确保您正在更新对旧事件的更改，而不是添加无效的重复项。

按钮单击

当对象被添加或更改时，这个解决方案动态地构建数组，你可以简单地添加…

$('#save').click(function () {
    // do something with eventsData...
});

…到您的脚本，并能够在任何地方访问当前事件数组

相关文章：