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

Guy*_*Guy 20 javascript ajax jquery fullcalendar

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

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

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

Igo*_* S. 47

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

1.如果您使用FullCalendar来抓取json事件:

$('#calendar').fullCalendar({ events: "json-events.php",    });
Run Code Online (Sandbox Code Playgroud)

做就是了:

$('#calendar').fullCalendar( 'refetchEvents' );
Run Code Online (Sandbox Code Playgroud)

如果你想要外部方法来获取你可以做的事件.不优雅但会起作用

$('#calendar').fullCalendar( 'removeEventSource', source )
$('#calendar').fullCalendar( 'addEventSource', source )
Run Code Online (Sandbox Code Playgroud)


小智 45

您可以通过3个步骤渲染事件..

1)删除所有事件

.fullCalendar( 'removeEvents');
Run Code Online (Sandbox Code Playgroud)

2)添加事件源

.fullCalendar( 'addEventSource', events);         
Run Code Online (Sandbox Code Playgroud)

3)渲染事件

.fullCalendar( 'rerenderEvents' );
Run Code Online (Sandbox Code Playgroud)

喜欢...

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {       //the data    },
    success: function(events)
      {
              $('#calendar').fullCalendar('removeEvents');
              $('#calendar').fullCalendar('addEventSource', events);         
              $('#calendar').fullCalendar('rerenderEvents' );
       }.
     });
Run Code Online (Sandbox Code Playgroud)