В jquery fullcalendar можно добавить новое событие без обновления всего месяца?

Я использую jquery fullcalendar, и он отлично работает. Мои события происходят от вызова ajax и возвращаются как json.

Я пытаюсь выяснить, есть ли способ добавить события с клиентской стороны, не обновляя весь сервер.

У меня есть возможность добавить новое событие в мой код (который добавляет его в мою базу данных), но единственный способ, которым я знаю, как обновить пользовательский интерфейс, чтобы показать это новое событие, - вызвать refetchevents (но это перезагружает все для месяц назад с сервера.

Есть ли все-таки я могу использовать дополнительные события для всех клиентов, чтобы избежать обновления месяца в месяц?

Я вижу, что я могу удалить события один за другим методом removeEvents (с фильтром id), но я не вижу эквивалента вокруг добавления события.

Обновление:

У меня есть следующий вопрос, на котором даны ответы ниже, которые оба работали. (не было смысла создавать другой вопрос). Я хотел увидеть рекомендуемый способ "обновить" одно событие на стороне клиента. Я попытался просто вызвать "renderEvent" с событием с тем же идентификатором, но создающим новое событие в календаре.

Я вижу, что существует метод UpdateEvent, который, как я полагал, будет ответом, но похоже, что это работает только в том случае, если вы находитесь внутри eventClick (вы не можете просто создать новый объект события, установите идентификатор и измените поле и вызовите обновление.

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

Есть ли рекомендуемый способ обновления события с клиентской стороны, аналогичный логике событий Add Clientside ниже?

Сейчас я просто удаляю и читаю в следующем случае:

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

Ответы

Ответ 1

чтобы добавить события на стороне клиента в полный календарь, который вы можете вызвать:

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

Я не тестировал этот код, но это должно выполнить работу.

Ответ 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;
}

Ответ 3

Как насчет этого?

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

Ответ 4

Лучший способ найти обновление без обратной передачи -

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

Данные должны быть идентификатором или фильтром для 'removeEvents' http://fullcalendar.io/docs/event_data/removeEvents/

Данные должны быть массивом/URL/функцией для 'addEventSource' http://fullcalendar.io/docs/event_data/addEventSource/

Ответ 5

Вам не нужно добавлять и удалять события для их обновления. Вам просто нужно получить событие из календаря и передать его методу 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;
    }

Ответ 6

Я пытался изменить существующее событие, подобное вам, но в моем случае мне нужно, чтобы он использовал один и тот же идентификатор, поэтому я не смог удалить событие и создать другое, потому что это не очень хорошо...

Следуя документации по 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 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 );
    }
}

Надеюсь, что это сработает для всех!