FullCalendar - Google Calendar Event Colors

3
votes

I am using FullCalendar to embed a Google Calendar into this webpage

Since the colours of the Google Calendar events aren't being brought into Full Calendar, I'd like to style each of the events locally with different background colours.

Easiest solution would be to add a class name to each event. I would like the event title to be generated into the class name.

I have tried to use ClassName, but can't get it working.

Hope to hear from someone with some advice.

2
fullcalendar

2 Answers

1
votes

The className has to come back in the JSON, so you will need a proxy PHP/ASHX that you will call, pass parameters to it, that it will call the Google Cal, transfomr it and return something like this..

[{"title":"News that will blow you away!","url":"news.aspx?i=1657","start":"2011-11-22T00:01:00","end":"2011-11-22T23:59:00","color":"rgb(232,157,0)","className":"data-newsevent clickable","newsEvent":"True","EventName":null,"description":null,"EventCompTypeMSP":null}]

enter image description here

  • Proxy-Req: your request to the proxy
  • Proxy-Res: response from your proxy to you

Notice color, you can use that to define the colour of the event directly.

Notice my classNames data-newsevent and click able, i used those with jQuery to do certain special click events- they don't actually contain any colour styles, but you can do it, you might have to use !important because fullCaldner applies a default colour.

I first load the page with empty feed, then request the feed using client side, it seems more dynamic, using cache it can be quick enough if they navigate allot.

1
votes

I would like the event title to be generated into the class name.

So you may use the eventRender callback like this :

eventRender: function(event, element) {
    /**
     * @params
     * event : fullcalendar event
     * element : jQuery container
     */

     // be aware of whitespaces !
     element.addClass("fc-" + event.title.replace(/\s+/g, "_"));

}