在Ajax数据库更新后重新呈现fullCalendar中的事件
我试图让fullCalendar反映通过AJAX对数据库所做的更改。 问题是，在成功进行AJAX调用后，它不会在屏幕上更新日历。
$.ajax({ type: "POST", url: "eventEditXHR.php", data: { //the data }, success: function(text) { $("#calendar").fullCalendar("refetchEvents"); }.... 我使用的是错误的方法吗？ 无需重新加载整个页面，最好的方法是什么？ 谢谢你的任何输入！
有几种方法。 有些不太优雅。
1.如果您使用FullCalendar来抓取json事件：
$('#calendar').fullCalendar({ events: "json-events.php", });
做就是了：
$('#calendar').fullCalendar( 'refetchEvents' );
如果你想要外部方法来获取你可以做的事件。 不优雅但会起作用
$('#calendar').fullCalendar( 'removeEventSource', source ) $('#calendar').fullCalendar( 'addEventSource', source )
您可以通过3个步骤渲染事件..
1）删除所有事件
.fullCalendar( 'removeEvents');
2）添加事件源
.fullCalendar( 'addEventSource', events);
3）渲染事件
.fullCalendar( 'rerenderEvents' );
喜欢…
$.ajax({ type: "POST", url: "eventEditXHR.php", data: { //the data }, success: function(events) { $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', events); $('#calendar').fullCalendar('rerenderEvents' ); }. });
这适用于ASP.NET CORE，MVC 6：
success: function(events) { $('#calendar').fullCalendar('rerenderEvents'); $('#calendar').fullCalendar('refetchEvents'); }
虽然这在ASP.NET MVC 5中有效：
success: function(events) { $('#calendar').fullCalendar('refetchEvents'); }
什么对我有用：
success: function(text) { setTimeout(function(){ $("#calendar").fullCalendar("rerenderEvents"); },50); }
如果我直接执行它没有超时它不起作用，可能是由于$ element.fullCalendar变量尚未完全设置？
对于FullCalendar v3.8.0，以下内容将起作用：
var events = [ {title: 'Business Lunch', start: '2017-12-03T13:00:00'}, {title: 'Meeting', start: '2017-12-13T11:00:00'}, {title: 'Conference', start: '2017-12-18', end: '2017-12-20'}, ]; $('#calendar').fullCalendar({ defaultDate: '2017-12-12', events: function (start, end, tz, callback) { callback(events); } }); events.push({title: 'Party', start: '2017-12-29T20:00:00'}); $('#calendar').fullCalendar('refetchEvents');
jsbin
一行完成工作：
$('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php')
迟到的回复，但这应该是自2.8.0以来最有效的方式