FullCalendar: Keep day properties after next/previous click

0
votes

I'm using FullCalendar as an interface for users to schedule appointments. When I load the calendar, I paint individual days based on the number of appointments already scheduled on that day. Here's the code:

 function paintCalendar (dailyPercentage) {
    $.each(dailyPercentage, function(){
            if (this.percentage >= 65) {
                $cell = $('td.fc-future[data-date="' + this.date.substring(0, 10) + '"]');
                $cell.addClass('fc-high-traffic');
                $calendar.fullCalendar('refetchEvents');
            } else if (this['percentage'] >= 35) {
                $cell = $('td.fc-future[data-date="' + this.date.substring(0, 10) + '"]');
                $cell.addClass('fc-medium-traffic');
                $calendar.fullCalendar('refetchEvents');
            }

    });
}

Each of the classes I add simply has a background-color associated with it.

However, when a user clicks the prev, next, or today buttons, the calendar is completely reloaded and my added classes are removed.

I saw a similar question here but his solution involved passing additional data in the event objects themselves. I'm dealing with the days themselves which aren't passed through.

Is there any way I can trigger an event after the calendar is refreshed similar to this response?

My function works just fine I just need an event to trigger its execution.

3
jqueryfullcalendarrepaint

3 Answers

1
votes

You probably need to use eventRender or eventAfterRender.

I don't fully understand your question but you can certainly use these callbacks to add classes to your events

Also refetchEvents probably shouldn't be used within a loop as this will likely result in multiple calls to the server

0
votes

The solution from this question fits the problem. I just added the trigger in different places to handle specific changes to suit my issue.

fullcalendar.js

function prev() {
    renderView(-1);
    trigger('complete', null, true);
}


function next() {
    renderView(1);
    trigger('complete', null, true);
}


function today() {
    date = new Date();
    renderView();
    trigger('complete', null, true);
}

my javascript

complete: function () {
        paintCalendar(dailyPercentage);
    }
0
votes

If your issue is event div object is re-rendering and missing the previously set item like background color and classes, take a look in to http://arshaw.com/fullcalendar/docs/event_data/Event_Object/