Question

我有一个fullcalendar设置，您可以拖放设置如此的外部事件

我想要完成的是点击按钮创建一个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反映丢弃后的正确数据，并在日历中移动事件。

有人可以帮助我吗？谢谢你的阅读。

Answer 1

根据OP的要求更新了答案以及示例和进一步说明

工作示例

您可以查看我放在一起的JSBin，以获得所请求功能的演示。该代码有补充说明，记录了究竟发生了什么 - 更重要的是，在大多数情况下，为什么。

使用唯一事件ID

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

与所有计数器一样，我们定义其起始位置......

var uid = 0;

出于fullCalendar窗口小部件的目的，我们在将外观事件渲染到日历中时将其分配给外部事件。每个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中看到此方法。

初步回复

处理此问题的一个好方法是动态构建数组 - 我们每次调用eventsData时都会调用它fullCalender.drop()。在一个简单的实现中，您可以执行以下操作...

// 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事件处理程序。为了使其成为逻辑实现，您需要监视任何drop或resize事件，以确保您的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...
});

...到您的脚本，并且能够随时访问当前事件数组。

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

1 个答案:

工作示例

使用唯一事件ID

按钮单击