Pages

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 https://docs.google.com/file/d/0BzBaIn5fuGosNnJOV2ZSRVZDYmc/edit

Now that you have the files lets do it.


1. Create a Calendar List
Ok first step is easy just create a nice Calendar list in your Sharepoint application.

2. Create a new column to be used in the calendar title
So I want to use the Category field as my color selector. In order to do it, I need a calculated column that merges the Title and Category field. Create a new calculated columna with the following formula

=Title&" ["&Category&"]"




3. Change the Calendar view
Ok now you need to change your Calendar view, in order to show this new field instead of the Title column.

4. Add JS and CSS files
Open your site in Sharepoint Designer and create two directories JS and CSS.
after that upload calendario.js into JS folder and calendario.css into CSS folder.

5. Edit Sharepoint site master page
Almost there, the final touch is to reference JS and CSS in the Master Page.
Edit you v4.master page in Sharepoint Designer and add:

<link rel="stylesheet" type="text/css" href="../../css/calendarios.css"/> just before </head>

and 

<script type="text/javascript" src="../../js/calendarios.js"></script> just before </body>



Save the master file.

6. Enjoy your new calendar
Ok, now go back to your Sharepoint site and add some random events with diferent categories and enjoy the new colors. 

Daily view

Monthly view

Weekly view


In a future post I'll show you how to configure colors, add new values for selection color and even work with multiple calendars.

If you want to keep in touch, feel free to Subscribe to How I did it - Sharepoint Foundation 2010