15

我正在使用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);
4

8 回答 8

40

要将客户端的事件添加到 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 );

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

于 2012-04-04T18:52:39.270 回答
9

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;
}
于 2012-04-06T15:02:13.083 回答
4

这个怎么样？

$("#calendar").fullcalendar('addEventSource', yourEvent);
于 2013-09-16T20:17:06.810 回答
1

我发现无需回发即可刷新的最佳方法是

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

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

数据需要是“addEventSource”的数组/URL/函数http://fullcalendar.io/docs/event_data/addEventSource/

于 2015-03-01T10:01:08.147 回答
1

我试图编辑像您这样的现有事件，但在我的情况下，我需要它使用相同的 id，所以我无法删除该事件并创建另一个事件，因为这不是很好......

按照 http://arshaw.com/fullcalendar/docs/event_data/updateEvent/上的文档

我发现你需要传递给句子的事件： $('#calendar').fullCalendar('updateEvent', eventObject ); 不能是任何对象。它应该是一个完整日历的事件，这就是为什么它对 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 );
    }
}

希望它适用于任何人！

于 2013-09-12T20:08:19.457 回答
0

您无需添加和删除事件来更新它们。您只需要从日历中获取事件并将其传递给 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;
    }
于 2012-04-09T19:42:34.063 回答
0

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

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);
}
于 2020-06-02T12:41:59.797 回答
0

用于阿贾克斯

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 () {
        }
    });
}
于 2018-04-03T01:14:08.463 回答