CODEWITHSUNDEEP
javascriptjqueryeventsfullcalendarfullcalendar-3
abbood
abbood

Reputation: 23558

how to programmatically update the rendering of an event in fullcalendar

I'm working on an app that already renders a calender using fullcalendar, whenever the page refreshes the time slots are always rendered with the correct colors using the event render callback. It also correctly changes the color of the time slot when the event is clicked upon, using the event click callback.

This is all nice, however I'm trying to programmatically manipulate the renderings of the time slots based on some other stuff the user does after the calendar has fully loaded. In code this is what i'm trying to do

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

    ..

once clicked, the program displays a modal form that the user fills. Upon completion and dismissal of the dialog, the clicked event needs to change its color to reflect a change of status, that's where i call this method:

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

This simply don't work. Using Chrome dev tool breakpoints i ensured that the function hideLessonPlan actually talks to the right variables.

Upon further investigation i realized that in both event render and event click callbacks.. the function updateEvent(event) is called after the background properties have been set.. however in my case.. this event is not called after setting the properties. So my question is more of: how can I actually call this upateEvent method from the outside? It seems like a private variable.

update: i made it work but simply by storing the css properties of the selected div and then using jquery to find the same div and highlighting it manually afterwords. not too happy about this hacky way.. hoping someone would come along and show me how to do it through fullcalendar.

Upvotes: 0

Views: 2051

Answers (1)

abbood
abbood

Reputation: 23558

it turns out that i simply had to update the property of the calendarEvent ie

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

then call update event:

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

that took care of all the rendering for me

Upvotes: 2

Related Questions