как программно обновить рендеринг события в fullcalendar

Я работаю над приложением, которое уже отображает календарь с использованием fullcalendar, всякий раз, когда страница обновляется, временные интервалы всегда отображаются с правильными цветами с использованием рендеринг события обратный вызов. Он также правильно меняет цвет временного интервала при нажатии на событие, используя событие click обратный вызов.

Это все хорошо, однако я пытаюсь программно манипулировать визуализацией временных интервалов на основе некоторых других вещей, которые пользователь делает после полной загрузки календаря. В коде это то, что я пытаюсь сделать

var eventClick = function(calEvent, jsEvent, view) {
    // first we change the color of the event to indicate that it was clicked
    calEvent.backgroundColor = orangeColor;
    calEvent.textColor= darkGreyColor;
    calEvent.active=true;
    $(this).css('background', orangeColor).css('color', darkGreyColor);

    // i cache both the calEvent and the element to manipulate them later on
    cachedActiveEvents.push(calEvent);
    // here i'm storing this div: <div class="fc-event fc-event-vert ..>
    //                                <div class="fc-event-inner">
    //                                    <div class="fc-event-time">12:30 - 1:20</div>
    //                                    <div class="fc-event-title">event title</div>
    //                                    ..
    cachedActiveEventViews.push($($(jsEvent.target).parent().parent()));

    ..

после нажатия программа отображает модальную форму, которую заполняет пользователь. После завершения и закрытия диалогового окна событие click должно изменить свой цвет, чтобы отразить изменение статуса, вот где я вызываю этот метод:

function hideLessonPlan() {
    ..
    $.map(cachedActiveEvents, function(calEvent, eventIndex) {
        var element = cachedActiveEventViews[eventIndex];
        calEvent.backgroundColor = blackColor;
        calEvent.textColor = "white"
        element.css('background', blackColor).css('color','white');
    });
}

Это просто не работает. Используя точки останова инструмента разработчика Chrome, я убедился, что функция hideLessonPlan действительно взаимодействует с нужными переменными.

После дальнейшего изучения я понял, что в обоих обратных вызовах event render и event click. >updateEvent(event) вызывается после установки свойств фона.. однако в моем случае.. это событие не вызывается после установки свойств. Итак, мой вопрос больше: как я могу вызвать этот метод upateEvent извне? Это похоже на частную переменную.

обновление: я заставил его работать, но просто сохранив свойства css выбранного div, а затем используя jquery, чтобы найти тот же div и выделить его вручную после слов. не слишком доволен этим хакерским способом .. надеюсь, что кто-нибудь придет и покажет мне, как это сделать с помощью полного календаря.


person abbood    schedule 04.04.2014    source источник


Ответы (1)


оказывается, мне просто нужно было обновить свойство calendarEvent, т.е.

calEvent.isActive = true; 
calEvent.status = 0; // ie in progress

затем вызовите событие обновления:

$('#calendar').fullCalendar('updateEvent',calEvent);

который позаботился обо всем рендеринге для меня

person abbood    schedule 04.04.2014