在Ajax数据库更新后重新呈现fullCalendar中的事件

Posted 2021-04-07

我试图让fullCalendar反映通过AJAX对数据库所做的更改。问题是，在成功进行AJAX调用后，它不会在屏幕上更新日历。

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {
       //the data
    },
    success: function(text) {
      $("#calendar").fullCalendar("refetchEvents");
    }....

我用的是错误的方法吗？无需重新加载整个页面，最好的方法是什么？感谢您的任何意见！

答案

有几种方法。有些不太优雅。

1. If you are using FullCalendar to grab json events:

$('#calendar').fullCalendar({ events: "json-events.php",    });

做就是了：

$('#calendar').fullCalendar( 'refetchEvents' );

If you want outside method to fetch events you could do. Not elegant but will work

$('#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以来最有效的方式