如何获取事件并将其添加到特定源?

Question

我成功地指定了多个源：我的SQL服务器源，以及一个空数组，用于保存任何用户生成的事件userAddedEvents = []。 我的想法是，我可以稍后使用此数组将新事件"保存"到我的服务器。

var userAddedEvents = []; //container for event objects that will hold user-generated content
var calendar = new FullCalendar.Calendar(calendarEl, {
eventSources: [
{
events: function (fetchInfo, successCallback, failureCallback) {
$.ajax({
url: url,
type: 'post',
contentType: "application/json; charset=utf-8", //include fetchInfo in request body instead of form-data
dataType: "json",
data: JSON.stringify(fetchInfo), //the fetchInfo object must be stringified
success: function (data) {
events = $.merge([], data.events);
successCallback(events);
}
});
}
}, //end server source
{
id: 'userAddedEvents',
events: userAddedEvents
} //end local array source
]
});

所以，这是我试图向我的userAddedEvents源添加一个事件......

select: function (info) {
// https://fullcalendar.io/docs/select-callback
console.log(info)
console.log('selected ' + info.startStr + ' to ' + info.endStr)
calendar.addEvent({
start: info.startStr,
end: info.endStr,
rendering: 'background', //v4 and v5 use different terminology
color: '#ff9f89',
selected: true, //custom, extended property
}, userAddedEvents);

calendar.unselect(); //clear the current selection

},

无论如何，长话短说...当我尝试转储userAddedEvents的结果时，它是空的，尽管我确实在日历上看到了新内容。

==更新==包含示例...我添加了一个自定义按钮，尝试从userAddEvents数组中获取内容。

或者(也显示在示例中(，我已经成功地使用calendar.getEvents()获取所有事件，然后使用$.grep过滤某些特定属性或扩展属性。 最终，我想为了方便起见，我正在尝试使用"临时事件源"——我可以对userAddedEvents数组进行操作，字符串化它，清空它，等等。 我不知道如何getEvents特定的源对象。

customButtons: {
getUserCreatedEvents: {
text: 'Get User Events',
click: function () {

console.log(calendar.getEventSources());  //both event sources are listed
console.log(calendar.getEventSourceById(userAddedEvents)); //missing the id in output {calendar, id, internalEventSource, url}
console.log(calendar.getEventSourceById('userAddedEvents')); //has the the id in output {calendar, id, internalEventSource, url}
console.log(userAddedEvents) //the array is empty

/*
events = calendar.getEvents();
// console.log(events)

var filteredResultsGREP = $.grep(events, function (event) {
return event.rendering === 'background';
});
*/
/*
https://fullcalendar.io/docs/Event-toPlainObject (version 5 only)
*/
// this WILL show any events added based on the property specified
// console.log(filteredResultsGREP);

}
}
}

如何获取新事件？ 我想在将所有用户创建的事件发送到 SQL 进行处理之前保留它们。

Answer 1

首先，很抱歉完全忘记了这个问题，已经开始帮助它。

经过一些挖掘，看起来您无法获取单个事件源的原始事件，这有点烦人。

所以我认为实际上你最简单的方法就是将事件添加到你的单独数组中，而不必担心 fullCalendar 中的结构。然后，当您要保存它们时，您可以将该列表发送到服务器。

select: function (info) {
var evt = {
start: info.startStr,
end: info.endStr,
rendering: "background", //v4 and v5 use different terminology
color: "#ff9f89",
selected: true //custom, extended property
};
calendar.addEvent(evt);
userAddedEvents.push(evt);
calendar.unselect(); //clear the current selection
},

演示：https://codepen.io/ADyson82/pen/abdVVNM

您可能遇到的唯一额外复杂性是，如果您允许在添加事件后拖动或调整事件大小(或以其他方式编辑(，则必须将其与单独的数组同步，这是一些额外的工作。