Search code examples
javascriptcalendarfullcalendargoogle-calendar-apigcal

How to color code fullcalendar events based on description


We use one calendar for the entire company that show's who has the day off. HR would like to use Blue for anyone who is in the Software department, Red for the Electronics Department and Green for the Hardware Department for the events background color.

The previous developer used FullCalendar1.5.3 and Google Calendar for this. HR would specify what person is in what department by putting S, E, or H in google calendar description. The previous developer wrote a custome code to read that description and create the event with the correct background Color. Due to the Nov 27th 2014 google v2 being shutdown, I had to re-create it using the latest fullcalendar.js and gcal.js libraries which shoes it was pretty much re-written to be able to use the google API stuff.

I got the calendar to work and show the events, but I have no idea how to make it read the description for the letters and change the bgcolor according to it's description. Does anyone have any idea how to do this, maybe using a simple switch case, or if statements?


Solution

  • you can use eventRender(callback) for this. Check for the description text and change the bgcolor for the event that you want to.

    eventRender: function( event, element, view ) { 
         if (event.description == "x") {
             //apply your logic here, make changes to element.
             element.css('background', 'red');
         }
    }
    

    For further assistance check fullcalendar docs here