在 jquery fullcalendar 中，我可以在不刷新整个月的情况下添加新事件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10016936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In jquery fullcalendar, can I add a new event without refreshing the whole month?
提问by leora
I am using jquery fullcalendarand it works great. My events come in from an ajax call and get returned as json.
我正在使用jquery fullcalendar并且效果很好。我的事件来自 ajax 调用并作为 json 返回。
I am trying to figure out if there is a way to add events from the client side without refreshing the whole server.
我想弄清楚是否有一种方法可以在不刷新整个服务器的情况下从客户端添加事件。
I have the ability to add a new event in my code (which adds it to my database) but the only way i know how to refresh the UI to show this new event is to call refetchevents (but this reloads everything for the month back from the server.
我有能力在我的代码中添加一个新事件（将它添加到我的数据库中），但我知道如何刷新 UI 以显示这个新事件的唯一方法是调用 refetchevents（但这会重新加载本月的所有内容）服务器。
Is there anyway I can stick in additional events all clientside to avoid a full month event refresh ?
无论如何，我可以在所有客户端添加其他事件以避免整月事件刷新吗？
I see i can remove events one by one by the removeEvents method (with an id filter) but i don't see the equivalent around adding an event.
我看到我可以通过 removeEvents 方法（使用 id 过滤器）一个一个地删除事件，但我没有看到添加事件的等效项。
Update:
更新：
I have a followup question given the answers below which both worked. (didn't make sense to create another question). I wanted to see the recommended way to "refresh" a single event on the clientside. I tried to simply call 'renderEvent' with an event with the same Id but that creates a new event on the calendar.
我有一个后续问题，给出了以下两个都有效的答案。（创建另一个问题没有意义）。我想看看推荐的在客户端“刷新”单个事件的方法。我试图简单地使用具有相同 Id 的事件调用“renderEvent”，但这会在日历上创建一个新事件。
I see there is the: UpdateEventmethod which I would assume would be the answer but it seems like this only works if you are inside an eventClick (you can't just create a new event object, set the Id and change a field and call update.
我看到有：UpdateEvent方法，我认为这将是答案，但似乎这仅在您位于 eventClick 内时才有效（您不能只创建一个新的事件对象，设置 Id 并更改一个字段并调用更新。
http://arshaw.com/fullcalendar/docs/event_data/updateEvent/
Is there a recommended way of refreshing an event from the client side similar to the "Add Clientside" event logic below?
是否有类似于下面的“添加客户端”事件逻辑的从客户端刷新事件的推荐方法？
Right now I am just removing and readding in the event like this:
现在我只是在这样的事件中删除和阅读：
$('#calendar').fullCalendar('removeEvents', data.Event.id);
$('#calendar').fullCalendar('renderEvent', data.Event, true);
回答by Charles Ovando
to add events on the client side into the fullCalendar you can call:
要将客户端的事件添加到 fullCalendar 中，您可以调用：
var myCalendar = $('#my-calendar-id');
myCalendar.fullCalendar();
var myEvent = {
title:"my new event",
allDay: true,
start: new Date(),
end: new Date()
};
myCalendar.fullCalendar( 'renderEvent', myEvent );
I haven't test this code, but this should get the job done.
我还没有测试过这段代码，但这应该可以完成工作。
回答by Sheridan
Here is the code that I use:
这是我使用的代码：
function addCalanderEvent(id, start, end, title, colour)
{
var eventObject = {
title: title,
start: start,
end: end,
id: id,
color: colour
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
return eventObject;
}
回答by patz
How about this?
这个怎么样？
$("#calendar").fullcalendar('addEventSource', yourEvent);
回答by Adam Tremblay Lavoie
The best way i found to refresh without postback is
我发现无需回发即可刷新的最佳方法是
$('#calendar').fullCalendar('removeEvents', data[0].id);
$('#calendar').fullCalendar('addEventSource', data);
Data need to be an ID or a Filter for 'removeEvents' http://fullcalendar.io/docs/event_data/removeEvents/
数据需要是“removeEvents”的 ID 或过滤器 http://fullcalendar.io/docs/event_data/removeEvents/
Data need to be an Array/URL/Function for 'addEventSource' http://fullcalendar.io/docs/event_data/addEventSource/
数据需要是“addEventSource”的数组/URL/函数http://fullcalendar.io/docs/event_data/addEventSource/
回答by Oswaldo
I was trying to edit an existing event like you, but in my case I need it to use the same id so i couldn't remove the event and create another one because that doesn't work very great...
我试图像你一样编辑一个现有的事件，但在我的情况下，我需要它使用相同的 ID，所以我无法删除该事件并创建另一个事件，因为它不起作用......
Following the documentation on http://arshaw.com/fullcalendar/docs/event_data/updateEvent/
遵循http://arshaw.com/fullcalendar/docs/event_data/updateEvent/上的文档
I figured it out that the event you need to pass to the sentences: $('#calendar').fullCalendar( 'updateEvent', eventObject ); can't be any object. It should be an event of fullcalendar, that's why it works great for eventClick event but not outside those events.
我发现你需要传递给句子的事件： $('#calendar').fullCalendar('updateEvent', eventObject ); 不能是任何对象。它应该是 fullcalendar 的事件，这就是为什么它适用于 eventClick 事件但不适用于这些事件之外的原因。
To use it outside fullCalendar event this is the code it works for me:
要在 fullCalendar 事件之外使用它，这是对我有用的代码：
function updateEvent(id, title, date) {
i = id;
/*This is the id of the event on full calendar,
in my case i set this id when I create each event*/
event = $('#calendar').fullCalendar( 'clientEvents', [i] )[0];
/*This method returns an array of object with id == i
That's why is necessary to aggregate [0] at the end
to get the event object.*/
if (event != null){
//make your modifications and update
event.title = title;
event.start = date;
$('#calendar').fullCalendar( 'updateEvent', event );
}
}
Hope it works for anyone!
希望它适用于任何人！
回答by Sheridan
You don't need to add and remove events to update them. You just need to get the event from calendar and pass it to the updateEvent method:
您不需要添加和删除事件来更新它们。您只需要从日历中获取事件并将其传递给 updateEvent 方法：
function updateCalanderEvent(id, start, end, title, colour)
{
var eventObject = $('#calendar').fullCalendar( 'clientEvents', id )
if (eventObject != null)
{
eventObject.title = title;
eventObject.start = start;
eventObject.end = end;
eventObject.color = colour;
$('#calendar').fullCalendar( 'updateEvent', eventObject );
}
return eventObject;
}
回答by MyHealingLife
for ajax
对于阿贾克斯
function DeploySchedule(){
$.ajax({
type: "POST"
, url: "/Services/ScheduleService.svc/DeploySchedule"
, contentType: "application/json; charset=utf-8"
, dataType: "json"
, success: function (result) {
$('#calendar').fullCalendar('removeEvents');
result.forEach(function (_row) {
var event = new Object();
event.title = _row.TrackingNumber + " (" + _row.Worker + ")";
event.start = _row.Date;
event.WorkerGuid = _row.WorkerGuid;
event.ScheduleGuid = _row.ScheduleGuid;
event.TrackingNumber = _row.TrackingNumber;
event.Worker = _row.Worker;
$('#calendar').fullCalendar('renderEvent', event);
});
}
, error: function (xhr, status, error) { // if error occure
alert(xhr.responseText);
}
, complete: function () {
}
});
}
