22 January, 2013

Color Calendar Events by column value

First Happy New Year for everyone, hope you've all had a wonderful holiday season.

To start 2013 I bring, how to create a very nice feature for Sharepoint Calendars. How to present events with diferent colors based on a column value. There are already some nices scripts over the web on how to achieve these.Yet I tried to simplify the all procedure for easy deploy.

I'll be using a standard calendar list and will repaint the events based on the Category field. The default available values are:
  • Meeting
  • Work hours
  • Business
  • Holiday
  • Get-together
  • Gifts
  • Birthday
  • Anniversary
But you can use any other column you like.

The goal is to associate some CSS styles to each category, present the field in the calendar event title, grab it and apply the associated CSS.

Before you start, download and the following files

Now that you have the files lets do it.