Question

我正在使用jquery fullcalendar，效果很好。我的事件来自ajax调用并以json的形式返回。

我试图弄清楚是否有办法从客户端添加事件而不刷新整个服务器。

我能够在我的代码中添加一个新事件（将其添加到我的数据库中），但我知道如何刷新UI以显示此新事件的唯一方法是调用refetchevents（但这会重新加载所有内容从服务器回来的一个月。

无论如何，我可以坚持所有客户端的其他活动，以避免整个月的事件刷新？

我看到我可以通过removeEvents方法逐个删除事件（带有id过滤器），但是我没有看到有关添加事件的等价物。

更新

我有一个后续问题，下面的答案都有效。（创造另一个问题没有意义）。我想看看在客户端上“刷新”单个事件的推荐方法。我试图简单地用一个具有相同Id的事件调用'renderEvent'但是在日历上创建一个新事件。

我看到有： UpdateEvent 方法，我认为这将是答案，但似乎这只有在你在一个eventClick内时才有效（你不能只创建一个新的事件对象，设置ID并更改字段并调用更新。

 http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

是否有推荐的方法从客户端刷新事件，类似于下面的“添加客户端”事件逻辑？

现在我只是在这样的事件中删除和读取：

       $('#calendar').fullCalendar('removeEvents', data.Event.id);
       $('#calendar').fullCalendar('renderEvent', data.Event, true);

Answer 1

将客户端上的事件添加到您可以调用的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 );

我没有测试过这段代码，但这应该可以完成工作。

Answer 2

以下是我使用的代码：

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;
}

Answer 3

这个怎么样？

$("#calendar").fullcalendar('addEventSource', yourEvent);

Answer 4

我正在尝试编辑像您这样的现有事件，但在我的情况下，我需要它使用相同的ID，因此我无法删除事件并创建另一个事件，因为它不能很好地工作... < / p>

关于文档 http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

我想通了你需要传递给句子的事件： $（'＃calendar'）。fullCalendar（'updateEvent'，eventObject）; 不能是任何对象。它应该是fullcalendar的事件，这就是为什么它适用于eventClick事件而不是在那些事件之外。

要在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 );
    }
}

希望它适用于任何人！

Answer 5

我发现没有回发的最佳方式是

 $('#calendar').fullCalendar('removeEvents', data[0].id);
 $('#calendar').fullCalendar('addEventSource', data);

数据需要是'removeEvents'的ID或过滤器 http://fullcalendar.io/docs/event_data/removeEvents/

数据需要是'addEventSource'的数组/网址/函数http://fullcalendar.io/docs/event_data/addEventSource/

Answer 6

您无需添加和删除事件即可更新它们。您只需要从日历中获取事件并将其传递给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;
    }

Answer 7

for ajax

ConsoleAppender

Answer 8

初始化您的日历，然后添加一个点击事件：

document.addEventListener('DOMContentLoaded', function () {

     var calendarEl = document.getElementById('calendar');

     var calendar = new FullCalendar.Calendar(calendarEl, {/*OPIONS*/});

     calendar.render();

     calendar.on('dateClick', function(info) {

         addNew(info);
     });
});

将事件添加到日历：

function addNew(info){
     var myEvent = {
         title:"my new event",
         start: info.dateStr,
         end: info.dateStr
     };
     calendar.addEvent(myEvent);
}

在jquery fullcalendar中，我可以在不刷新整个月的情况下添加新事件吗？

更新

8 个答案: