fullcalendar drop in add 事件答案

【问题标题】：fullcalendar drop in add eventfullcalendar drop in add 事件
【发布时间】：2018-03-11 06:10:16
【问题描述】：

我正在改变我的职责。我在我的项目中使用 FullCalendar。我还想使用我在 drop 事件中使用的回调。简而言之，我想将我从列表中拖动的事件添加到日历中，我该怎么做呢？提前致谢

Javascript;

 $('#m_calendar').fullCalendar({
                drop: function (date, jsEvent, ui, resourceId) {
                    jsEvent.originalEvent.preventDefault();
                    var title = jsEvent.target.dataset.title;
                    var start = jsEvent.target.dataset.start;
                    var end = jsEvent.target.dataset.end;
                    var id = jsEvent.target.dataset.id;

                    var newEvent = new Object();
                    newEvent = {
                        title: title,
                        id: id,
                        start: start,
                        end: end,
                        objectID: 0
                    };
                    eventsAdded.push(newEvent);   

                },
                events: function (start, end, timezone, callback) {
                    $.ajax({
                        url: '/Schedule/GetCalendarEvents',
                        dataType: 'xml',
                        data: {
                            start: start.unix(),
                            end: end.unix()
                        },
                        success: function (doc) {
                            var events = [];
                            $(doc).find('event').each(function () {
                                events.push({
                                    id: $(this).attr('id'),
                                    title: $(this).attr('title'),
                                    start: $(this).attr('start'),
                                    end: $(this).attr('end')
                                });
                            });
                            callback(events);
                        },
                        error: function () {
                            alert('there was an error while fetching events!');
                        },
                    });
                },
            });

【问题讨论】：

标签： jquery fullcalendar jquery-ui-draggable

【解决方案1】：

你有两个选择，要么

1) 如果您将事件数据包含在您拖动到日历上的draggable 的属性中，那么当您放下它时，该事件将自动添加到日历中。有关如何指定数据的详细信息，请参阅https://fullcalendar.io/docs/eventReceive。另请参阅https://fullcalendar.io/docs/external-dragging-demo 的外部拖动演示以获取工作示例 - 您可以查看链接的 CodePen 中的源代码以了解它是如何完成的。

2) 要修改您当前的代码，只需调用

$("#m_calendar").fullCalendar("renderEvent", newEvent, true);

在“drop”回调结束时。

这会将新事件添加到日历显示中。当然，如果您还需要将其添加到数据库中，您需要同时对服务器进行适当的调用。

有关文档，请参阅 https://fullcalendar.io/docs/renderEvent。

附：在您对其进行编辑之前，这曾经是一个完全不同的问题（请参阅问题的编辑历史记录）。将来请不要将问题编辑为新问题...有人可能仍想回答以前的版本。而是提出一个全新的问题（如果您不再需要，请删除旧问题）。否则较早的 cmets 或答案（例如我在此处发布但现在已删除的评论）将毫无意义。谢谢。

【讨论】：