11/03/2008

SharePoint: Color Coded Calendars!

Updated!
Note: If you got the Month view working and the Week and Day views did not then make sure that when you customized the view that you changed all three:

           Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"

 

For the SharePoint 2010 version of this article click here!

To add “strike-out” for canceled events click here!

For color coding other SharePoint lists click here!

Can a calendar display in color?

I have been asked a few times if the SharePoint calendar can display items in color. It turns out this is not too hard to do. The basic steps are:

  • Add a column to the calendar list to pick the color
  • Add a calculated column to create the HTML to display the color. This can be done with HTML or CSS. This example uses "<FONT COLOR=".
  • Add the new column to the view
  • SharePoint will convert the "<" character into "&lt;" so we need to add a little JavaScript to convert it back. The easiest way to add the JavaScript is with a Content Editor Web Part

Sample:

Color coded SharePoint calendar

  1. Create or open a calendar
  2. Add a new column named "Color" (Settings, List Settings) – most likely type will be "Choice" with choices like "Red, Green, Blue, Black", but this could be a lookup or a single line of text.
    (See here for an HTML color chart: http://www.w3schools.com/html/html_colornames.asp)
  3. Add a new column named "CalendarText"
    1. Column Type is Calculated
    2. Equation is:
      ="<font color='" & Color & "'>" & Title & "</font>"
                   image
    3. Data type returned = single line of text
  4. Modify the existing view, or create a new view such as "Color Calendar"
    1. Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"
                                image
    2. Save and exit (The HTML for "<FONT" will now be displayed. Some JavaScript will be needed to fix the HTML tags)
  5. Add a Content Editor web part
    1. Site Actions, Site Settings, Edit Page
    2. Add a Content Editor web part and move it below the calendar web part
    3. Click in the web part click Edit, Modify Shared Web Part
    4. Click Source Editor
  6. Paste this JavaScript:

    <script type="text/javascript" language="javascript">
    var x = document.getElementsByTagName("TD")
    var i=0;
    for (i=0;i<x.length;i++)
    {
      if (x[i].className.substring(0,6)=="ms-cal")
      {
        x[i].innerHTML= x[i].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>')
      }
    }
    </script> 

    image

  7. Click Save, OK, Exit Edit Mode
  8. Add a new calendar item and select a color… Color calendars!

 

Some thoughts on changing the background color and not just the text color…

Just change the FONT tag to a SPAN tag and use a style. Example:

="<span style='background-color:"&Color&"'>"&Title&"</span>"

This works, but the background is for just the width of the text, not the entire table cell. The closest I’ve come is to hard code the width:

="<span style='width:120px;background-color:"&Color&"'>"&Title&"</span>"

This looks good in the Month view, but not so good in Week or Day views.

                              image

You will probably want to use colors like lightblue, lightgreen, tomoto (light red would just be Pink!), etc.


.

70 comments:

Christophe said...

Mike, I have a method that is similar to yours, but more generic. Check it out here:
http://pathtosharepoint.wordpress.com/category/the-html-calculated-column/
For calendars specifically: see tips in the comments.
I'll publish a generic script for calendar views next week, here is a preview:
http://pathtosharepoint.wordpress.com/2008/11/04/sneak-peek-colored-calendar/

Anonymous said...

Hello,
Very good work! thank you!

I have a problem...when the activity of the calendar is for all day, the color doesn´t change and the activity title appears wit the HTML code.
do you know how can i solve this problem?
Than you very much

Anonymous said...

Mike, I followed your instructions but all I get in the calendar entry is the HMTL code. I don't get the actual colors. Any ideas? Thanks.

Mike Smith said...

Anonymous,

If you see the expected HTML, then most likey a typo in the JavaScript. Without seeing it that is the most that I can guess...

Mike

Mike Smith said...

saionara,

The HTML for the all day is a bit different so the JavaScript will need to be adjusted. Let me take a look...

Mike

Anonymous said...

Mike, if you do figure out a solution for the all day view, that would be great. I'm looking for an answer to that one as well.

Mike Smith said...

The fix is quite simple. My first example looked at only one of several style names.

Change this line:
if (x[i].className=="ms-cal-monthitem")

To this line and all items will be color coded:
if (x[i].className.substring(0,6)=="ms-cal")

I have updated this article and will be posting a more general article to color any SharePoint list.

Anonymous said...

hey Mike,
I managed to figure it out.
You need to add this code to cover the All Day View as well as the current day (or it wont work either!).

if ((x[i].className=="ms-cal-monthitem")||
(x[i].className=="ms-cal-workitem")||(x[i].className=="ms-cal-todayitem"))

cheers
Al

Jeremy Stakely said...

This is a great trick. Can some post the entire code to cover all views (i.e. Day, Week, Month)?

Jeremy Stakely said...

This is a great trick. Can someone post the entire code to cover all views (i.e. Day, Week, Month)?

Mike Smith said...

Jager28,

It works for me for all three: day, week and month. What happens in your calendar?

Mike

Jim said...

Hey guys,

This works great except for when I entered a 6 day event then the html codes showed up. Any ideas?

Thanks
jim

Mike Smith said...

Jim,

I have tested all kinds single and multiple day entries, including 6 day, and it works for all. Verify the javascript you are using matches what is above.

Also, are you using a customized master page or have any other custom webparts or javascript on the calendar page?

Mike

Ulrich Bernskov said...

worked like a charm - thanks

JJ said...

This was very easy and worked great. However, is there anyway to enter the colors as words and then have it translate some how to the HEX color? Ex: if I put the text in the Color Choice as 'Texas Longhorns' it would some how translate to 'FF9933' instead of 'Texas Longhorns'?

happycats said...

Great info - any suggestions on a way to tie in the color when you are employing a "connect to outlook" feature? for example - My sharepoint calendar is connected to my outlook, I can create calendar entries either from the sharepoint site or out of my outlook. When I create out of outlook, the item shows up on sharepoint with a default color. Is there a way to add anything on the outlook side that would allow me to set the color that would translate over to the SP calendar?

Mike Smith said...

kujda,

> is there anyway to enter the colors as words

Sure, just change the forumula.

Note: the comment feature in blogger will not let me enter a Less Than symbol, so the sample below uses "[". Change this to a Less Than.

The formula in the example above:
="[font color='" & Color & "'>" & Title & "[/font>"

Basically this is a forumla similar to what you would create in Excel.

The formula picking colors based on a list of words stored in another column named product:

="[font color='" &
IF(color="toys","Red",IF(color="bikes","#0000FF",IF(color="skates","Green","Black")))
& "'>" & Title & "[/font>"

Colors and be entered as HTML names or as HEX.

Mike

Mike Smith said...

Doug,

> any suggestions on a way to tie in the color when you are employing a "connect to outlook" feature?

None that I can think of. Outlook does not know anything about the custom columns in the SharePoint calendar. About the only possibility would be to put a keyword in the subject or body of the message and have the JavaScript check for that.

Mike

Saurabh Jain said...

i thinks this post is very good but this is not working for me in wss site.

can you please tell me why , i have done as you told

Mike Smith said...

Saurabh,

> this is not working for me in wss

It should work fine in both WSS and MOSS. What is not working? Do you see the HTML instead of the color? To see if the JavaScript is working add an alert, such as alert("success"), just before the end script tag (/script).

Unknown said...

Thank you for this information,
I appreciate you taking the time to write the how to guide.

It was very helpful

Anonymous said...

I'm just getting the html in the month view and no color change in the other views. I rechecked all of the steps and copied right from the page, but no luck. Any thoughts what I'm doing wrong?

Mike Smith said...

Anonymous,

Did you put the Content Editor Web Part below the Calendar web part? The JavaScript must run after the Calendar HTML has been loaded.

Otherwise, double check your JavaScript. To confirm that it has run add "alert('done')" just before the "/script" tag. If you don't see this popup then there is an error in the JavaScript.

Mike

Unknown said...

This is great... Thanks! I'm wondering how I can incorporate a background color choice along w/ this solution. Any ideas?

Bob

Mike Smith said...

Bob,

Just change the FONT tag to a SPAN tag and use a style. (Blogger does not allow tag brackets so replace the square brackets here with HTML tag brackets)

="[span style='color:" & Color & ";background:yellow']" & Title & "[/span]"

If the back color needs to change for each item than also add a column named BackColor and use:

="[span style='color:" & Color & ";background:" & BackColor & "']" & Title & "[/span]"

Mike

Unknown said...

This is FANTASTIC!! Thank you so much!! I don't know how to program in anything, and barely know how to maneuver through Sharepoint. Your instructions took me through it step-by-step. It worked on the first try! I can't thank you enough.

Jalpa said...

Mike Smith,

I am trying your code to add background color on my sharepoint calendar. unfortunately, it is not working. will you please help me.

Mike Smith said...

Jalpa,

You will need to tell me more than that! Are you gettng an error message?

Mike

CarolGL said...

This is such a great technique. If you haven't already, you need to write a book. If you have, what is it? Almost all the info I can find is either to simplistic or written for programmers. Regular technically adept people need more step by step instructions like these. Anyone know of a book out there for us?

Having said that, I can only get this to work in month view. I have tried to look at Christophe posts, but keep going around in circles and cannot seem to find step 1, step 2, etc. Even when I change =="ms-cal-monthitem" to =="ms-cal-weekitem" it seems to work in month view and not in week view. As I said, I am not a programmer, so I don't know if I am just misunderstanding the flow. Thanks so much.

Mike Smith said...

Carol,

Thanks for your kind comments. No book in the works... I just barely have time to keep up with the blog.

If you got the Month view working and the Week and Day views did not then make sure when you customized the view that you changed all three titles:
Change the field used for the month view title AND day view title AND week view title to "CalendarText".

Mike

Anonymous said...

Is there away to change the color on the non-graphical text say in a list format? Can I change the calendar listing on the home page of a site to reflect the color changes made on the calendar view? Or the color changes to be reflected on the standard view of the Calendar data?

Mike Smith said...

> Can I change the calendar listing on the home page of a site to reflect the color changes made on the calendar view?

Yes, but you would use the techniques for color coding a list here: http://techtrainingnotes.blogspot.com/2008/11/sharepoint-color-coding-sharepoint.html

Create a new view for the web part with the Color column displayed, and any other columns you need. Also modify the JavaScript to hide the Color column.

Anonymous said...

Hi Mike

The color change worked beautifully!!

The only thing i've noticed is that the font has changed in size.

It is alot larger now, how can i get it to display back to the normal size?

royhendo said...

To control the font size, just add a size attribute before the colour attribute in the "Color" column, thus: font size=2 color= and so forth.

Great technique this guys. I'm trying to adapt it to base the colour on an independent category selection, and to do that I'm trying to crib the technique shown above (nested IF statements in the Color column based on a third 'Category' column). It ain't working, but I'll keep trying. Wish I was a programmer sometimes so I could get my head round these things.

Anonymous said...

Nice tip, after 5 or 6 attempts it worked great!! I was not applying the script to the calendar view.
Thanks for enlightening our path!

Saludos!

Anonymous said...

Hi Mike:
I am a COMPLETE novice at Sharepoint. Trying your code you provided. Does this work in Sharepoint 2003?
If not any other sources you could provide for 2003 Sharepoint calendars?

Thank you
Eric

Mike Smith said...

Anonymous,

I have not tested it with 2003 and really don't expect it to work with 2003.

Mike

Unknown said...

Hey Mike great tutorial!
I am looking for this same solution except to be able to change colors based on "Approval Status." The OOB functionality that requires approval for list items created.

Any ideas? Thanks!

Mike Smith said...

"mam5293",

This will get you a good start:
http://techtrainingnotes.blogspot.com/2008/11/sharepoint-color-coding-sharepoint.html

Mike

Techie's Crap said...

Mike any option to change the font size of an event entered in a calendar.

The user wants an option to change the font size of an event entered in the calendar.

Mike Smith said...

Techie,

Change the font size based on the calculated column, or the font size for everything in the calendar? Yes to both, but tell me more about what you need.

If for a calculated column you could just set the formula to:

="[span style='font-size:" & x & "']" & Title & "[/span]"

where x is a column in the list with the size, or some value you calculate the size from.

(replace the square brackets with HTML brackets)

Mike

Unknown said...

Can you post how to change the text size back to normal for the whole calendar?

Mike Smith said...

Jennifer,

I've not seen the font size change in any of my examples. Are you using a custom master page or CSS? Something must be adding a CSS style to the FONT tag.

As an experiment try using a SPAN instead of the FONT tag in the formula:

="[span style='color:" & Color & ";']" & Title & "[/span]"

Note that you need to use HTML angle brackets in the above in place of the square brackets. (blogger won't let me use angle brackets in a comment)

Mike

Unknown said...

thanks for the quick reply. strange, when i use span the font is "normal" size and the font color changes but i am not seeing a block of color. this is exactly what i was looking for so all's well. i post back with issues. thanks again, this works great!

Mike Smith said...

Jennifer,

I you get a chance, try something for me. Put it back to the FONT tag, then when you see the larger font, go to your browser's View menu select Text Size and see if it is set to Normal or maybe Largest.

If you want a background color, see the comment to Bob on October 7th 2009.
Thanks,
Mike

Anonymous said...

Mike,

Can you tell me if this is supposed to work on V3.0? I followed the steps outlined, but it still doesn't work. I see the HTML script rather than the color. I'm not sure if it is due to the version or due to my input error.

Thanks for your help!

Mike Smith said...

Anonymous,

Yes, it works in "V3" (SharePoint 2006), actually only in "V3".

Odds are you have a typo in the forumla, the JavaScript, or the web part was not placed below the calendar web part.

Mike

Anonymous said...

It worked! I just had to move the web part below the calendar part.

Thanks again!

Anonymous said...

Brilliant! Thank you so much for your work!

Anonymous said...

Hi,
The formula for creating the calcutated column "CalendarText" does not work for me: error message when I click ok.I'm using Sharepoint 2007.
What's wrong?

Mike Smith said...

> What's Wrong?

Hard to say... what's the error message? what did you name your column? what does you formula look like?

Mike

Anonymous said...

Excellent article, simple enough for me to work 1st time. Christophe's solution was too complicated and conveluted for me to comprehend.
Thanks.

S said...

I've tried moving the Web Content section, nothing is happening, cannot move it.
I only have a calendar on the page and when creating the Content Editor Web Part, according to the directions to move it below the calendar, I cannot move it, tried everything?

Mike Smith said...

S,

Are you working in SharePoint 2007 or 2010? To move a web part in 2007 just drag the web part by its title bar. To move a web part in 2010, edit the web part, in the properties panel expand the Layout section and pick a zone and order.

Mike

Chris Rubino said...

Hi Mike, Thank for this amazing article. Its so wonderfull. But I just made litle modification to make it better.

I rather use span style='width:100% than px :)

SharePoint Ranger said...

I placed a calendar on the site 'Main' page but the colors are not showing. If I open the calendar, the colors show up. Any reason and how can I fix this/
Thanks,

Mike Smith said...

SharePoint Ranger,

Did you add the JavaScript to each page?

Mike

SharePoint Ranger said...

Yes, I added the JavaScript.

Anonymous said...

Hi Mike,

Thank you so much! I have spent 2 hours online trying to get this to work and it wouldn't! Then I tried your method and it worked the first time. Thank you! Thank you! Thank you!

Anonymous said...

Mike, this is fantastic! I managed to get this to work after a little messing around. We have a custom master page that was screwing things up for me, so I just deleted the calendar page and started again without the master page. It worked perfectly. Now I have a different question:

I am using this as a team leave calendar (no workflow approvals, jus entries). I am using color coding for the leave categories. I have a list called Category with the types : ST, VA, F, FL, ST, TR, A, and ML. What I would like to do is to bind a color to each category, rather than select a color and category separately.

I'm new to this so a step by step with code would be awesome, if possible. It's probably something really easy, but I just don't know where to start.

Thanks in advance.

Anonymous said...

Hi Mike,

Just an add to my last comment, I tried changing the formula on the CalendarText column calculation as you suggested to kujda for selecting colors from another list. Here is what I entered:

="[font color="&IF(Color="ST","Green",IF(Color="VA","Blue",IF(Color="F","Orange",IF(Color="FL","Goldenrod",IF(Color="SD","LightGreen",IF(Color="TR","Brown",IF(Color="A","MediumBlue",IF(Color="ML","LightSkyBlue"))))))))&">"&Title&"[/font>"

All I get is black text, regardless of the category I choose. Please help!

Thanks,
Aaron

Anonymous said...

MikeR

I was getting "<FONT" as well, until I drag/dropped the Content Editor Web Part below the Calendar web part.
(as noted earlier/above:
Did you put the Content Editor Web Part below the Calendar web part? The JavaScript must run after the Calendar HTML has been loaded.)

So it seems to be working.
Mike, using SP 2007.

Anonymous said...

@Aaron...

You need to check your nested if...
If should start with an IF..

=IF('','',IF('','',IF('','','')))

Anonymous said...

Is there any possible way to use the background color formula and strike out at the sametime?

Thanks for your help

Mike Smith said...

Yes, the JavaScript could be merged. I don't have an example of it though.

Anonymous said...

Hello Mike, used your method for an existing calendar we had set-up in sharepont 2007 and have two issues. The color works great for new entries but when trying to change an existing recurring entry it creates an error....you get stuck on the page where you edit the recurring entry and are unable change the color.......second issue is when you add a personal view to the calendar you see the html code instead of the colors....thought it might be missing the content editor web part but recd an error when trying to add that to the personal view......any help would be appreciated

kiltannen said...

Is there a way to make all the text larger in the calendar view?

I'm displaying on a wall screen - and it'd be nice to be able to try a larger size.

Olga said...


Hello, I follow the instruction step by step, but on the last stage, when I create the Column CalendarText, an error appears, and it is said:

"Sorry, something went wrong
The formula refers to a column that does not exist. Check the formula for spelling mistakes or change the non-existing column to an existing column."

Could you maybe help me to do smth with it?

Mike Smith said...

Olga,

Make sure you are using the correct column names. For example, if your column name is "Calendar Text" then you will need to add square brackets like this: "[Calendar Text]". Brackets are optional when there are no spaces or special characters.

Mike

Nicole said...

Hi Mike,

Thank you so much for this, first! It took me a couple of tries but now it seems to be working.

Just one thing:

The colors work when I click "calendar" on the left-hand side bar, but doesn't work when I click the tab on the top. It was working at one point, but I think when I changed font to span as you advised above for font size changing, I think that's when it stopped showing there.

Do you have any advice for this?
Thanks.

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.