SharePoint calendars: color coding, hover effects, etc.

Posted on by

monthview

Update [5/15/2009]: some readers have reported issues in specific cases (e.g. intraday events in calendar lists). To fix this, I have modified the post and now use “SPAN” tags instead of “DIV” tags. I’ll publish a more complete update in a couple weeks.

Update [6/8/2009]: A new version of the script is now available, more details here.

Two months ago, I introduced a method to display html in list views. The purpose of this post is to extend it to calendar views.

To learn more about the method itself, please refer to the post from September 1st. And of course, I recommend that you read the whole series about the “HTML calculated column“. You may find the following posts particularly useful:
– some simple but useful examples to get started
– a troubleshooting section
– how to apply the method to the DispForm.aspx page (as this is the page your calendar items will link to)

The script

You can use this module alone, or combined with the ones for list views. The scripts are very similar, but I had to make some adjustments to deal with the specificities of “a” tags.

 <script type="text/javascript">
//
// Text to HTML - Calendar views
// Questions and comments: Christophe@PathToSharePoint.com
//
var theAs = document.getElementsByTagName("a");
var i=0;
var AContent = "";
while (i < theAs.length)
{
try
{
AContent = theAs&#91;i&#93;.innerText || theAs&#91;i&#93;.textContent;
if ((AContent.indexOf("<SPAN") >= 0) && (AContent.indexOf("</SPAN>") >= 0)) {
theAs[i].innerHTML = AContent;
}
}
catch(err){}
i=i+1;
}
</script>

A simple example

For my example (see above screenshot), I have chosen a variation of this post,  as I wanted a printable calendar. For each task, the color depends on the % complete. Here is the formula for the calculated column:

="<SPAN style='text-align: center; background-color:"&CHOOSE(INT(&#91;%&#93;*10)+1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&";width:100%;'>"&TEXT([%],"0%")&"</SPAN>"

Most of the examples I have already published for list views will also apply to calendar views. I have already shared a couple screenshots here.

My demo site also features a US holiday calendar with hover effects based on this method.

Important notes

– if you combine the scripts for list views and calendar views, you’ll need to put the script for calendar views first.
– During my tests, I have uncovered several issues with SharePoint calendars. I am keeping an ongoing list here.
– As the method is based on calculated columns, it has some limitations (see here for more details). For example you cannot include a lookup field in a formula.
– In SharePoint calendar views, items are displayed as hyperlinks to the display form (DispForm.aspx). The hyperlink will take precedence over hyperlinks you include in your formula.
– for short events (30 min or less), SharePoint provides limited space in the day and week views. Take this into account in your design.

Special thanks to Peter and Greg who sent me a detailed report of their tests to validate the script.

The next step will be to apply the method to preview panes.

86 thoughts on “SharePoint calendars: color coding, hover effects, etc.”

  1. Pingback: Using calculated columns to write HTML « Path to SharePoint

  2. Pingback: Sneak peek: colored calendar « Path to SharePoint

  3. Pingback: Issues with calendars « Path to SharePoint

  4. Pingback: Links for November 18, 2008 « Steve Mullen’s Blog

  6. This is due to the formula I used, and more specifically the absolute positioning. Note that Firefox has a different behavior.
    With my other formulas that don’t use absolute positioning, you should get a centered display.

  7. Hey Christophe i was hoping you could provide some insite. I read each of your articles relating to mini calendar, calculated columns and html, and hower effect with javascript. individually i can achieve the same result but when i try to combine the method to do the same thing you did on your demo page showing the minicalendar and holidays of the year. I see to be failing. the formula im using for the column is (column name is “display”)

    =”:”&Title&”:”&Location&” Job title:”&[End Time]&””

    when i set the calendar to display the appropriate column the calendar correctly show the html text version (which i believe so far so good) but when i paste in the javascript (iether one) it removes the text completely leaving nothing. no link no information. wasnt sure what it could be. would i be able to email you in more detail how i am putting the CEWP together? thanks again

    Eli

  8. [update] I found that if i change the A tag to a DIV it will show the calulated column converted to html correctly, but the onMouseOver event doesnt seem to fire. i tried just isolating the onMouseOver and removed everything else as well as tried to put it iin a datasheet view, couldnt get the onMouseOver event to fire. is there something in sharepoint you have to do to allow the onMouseOver to work?

    Eli

  9. Pingback: Live demo: holiday calendar « Path to SharePoint

  12. My Sales and Marketing group would like to have their Calendars color coded based on the Category that is consistent across all views and I have another who use Content types who want those to vary by color – again consistent across all views.

    I’m thinking this could be done in the CSS, but am looking for suggestions.

  13. I’m trying to use this solution for just html formatting of a calendar. I have multiple fields and would like to put a line break after each field to provide better formatting than the runon that SP does automatically. It doesn’t seem to be recognizing the “” tags that I’m putting in the concatenated value field. Any ideas?

  14. Shawn: I assume you are talking about br tags? Off the top of my head: if you enter a line break in the formula, I think it’ll be interpreted as a line break by Internet Explorer.

  15. Thanks Christophe. What I’m realizing is that I am trying to put an enhanced rich text box as part of the concatenation, but SP doesn’t offer that as one of the columns that you can insert into the calculated field.

    Thanks for your help. Your site is very helpful.

  16. Pingback: SharePoint Calendars: How can I add colors? | End User SharePoint

  17. Christophe, You rock. Your methods opened up a whole new realm of possibilities to me. At first, I had a lot of trouble getting the calendar to work. My events were less than one day and the background coloring wouldn’t work correctly. To all who have shared my pain, here is the easy solution:
    (calculated column script)
    =””&[TITLE]&””

    It was that easy!!…just took me a few hours to get it right.

  21. There was an issue with the full formula so I didn’t post it.

    For the part about background coloring, here is how Travis did it:

    ="<DIV><FONT style='BACKGROUND-COLOR:"&&#91;Color&#93;&";'>"&[Title]&"</FONT></DIV>"

    The color is provided by another column. You could also directly enter a default color in the formula:

    ="<DIV><FONT style='BACKGROUND-COLOR:green;'>"&[Title]&"</FONT></DIV>"

  23. I’ve encountered an issue with the script.

    If you try to color code an event that occurs at a specific time of the day, for example from 7:30 until 9:00, nothing gets displayed. I’ve tried it with both forumlas and the result is the same.

    From what I can tell by looking at the source for the page, it may have something to do with the way a timed event is displayed. It lookes like all the information displayed, the time, and two other fields (in my case the calculated column and description) are in the a tag, with the title field you selected also in a bold tag.

    When your script goes through to convert and display all the html, it takes everything in the a tag when in this case it shouldn’t.

    I don’t have enough knowledge of javascript to know how to fix it though.

  24. Pingback: No assembly required: Color Code your SharePoint Calendars | End User SharePoint

  25. Pingback: Color Coding - Formula Generator « Path to SharePoint

  26. Are you having any issues viewing this solution in IE 8? I cant get your or mine to display correctly, I just see the div tags in my calculated field

  28. I am so pleased to have found this resource! These concepts and examples have already had an impact on my day to day use of SharePoint. I could use a hand with the calendar views. My single day events do not render properly. I see the HTML. My 2+ day events render perfectly. I’ve double checked to see that I am using the “Calendar” script, vs the “List” script. I’ve run through the troubleshooting guides, and looked for others that have the same issue. Any ideas on where to look next?

  29. Hi Christophe,

    Thankyou so much for posting the tiny calendar II with the mouse-over display. I like that function very much. I have a repeating event that happens every 2 weeks on the calendar. is there a way to change the color of the display?

  30. I’m scratching my head on making this Color Calendar work in SP03. Works like a champ as documented in our SP07 environ but I can’t duplicate those efforts in 03…Basic Calendar entries for “Outage” or “Degradation” events. I can see the code within the entry but it isn’t displaying with color. I’ve gone through the troubleshooting, not sure what else to try.

  31. I guess a may have misspoke. The code is only visible within as individual record within the calendar, the view you are presented when you select and open a calendar entry. I defined a calculated column to capture the color, but you’re right, unlike 07, I cannot change which field is then displayed in the calendar view.

    So is there no way to apply some of your color calendar techniques to 03 environs?

    • I recall there was a FrontPage trick to display a field other than the title in calendar view. If you can find it on the Internet, and get to display the calculated column instead of the title, then it should work…
      The usual disclaimers about modifying pages with FrontPage apply.

  32. Pingback: HTML Calculated Column – Updated script « Path to SharePoint

  33. I notice that most of these post deal with the body of the calendar event. Any how I would apply some of these changes to just the Event Title?

  34. I am creating a dashboard with the stop lights for Scope, Schedule, Cost and Team and I want to calculate them to make an overall status column. So if any of the statuses are red then the overall is red, if the any of the status are yellow then the overall will be yellow, if all 4 statuses are green then the overall status is green. THis is for SharePoint

    Any help would be appreicated

  35. Pingback: Color coding: more examples « Path to SharePoint

  36. Christophe:

    Thank you much for developing this code and publishing as well !

    This calendar coloring worked for me.

    It’s great!

    Alex

  37. The calendar color coding works great! I am noticing though that the color can only be applied to one line. That is, the events without color are wrapping withing a date box. The color-coded events elongate the box to be one line. Now we are having to scroll to the right to see the entire week. Any suggestions to get these to wrap?

  38. Hi Christophe,

    I just got round to following one of the Colour Coded Calendar tutorials that uses your script. Works a treat – thanks very much.

    I have experienced one small glitch on the Week view; All day events show up fine – colour coded as you would expect, but events with a time either show the HTML (if you choose to show a second column) or don’t show anything (if you choose not to show a second column).

    I’ve put screen grabs up here illustrating this:


    I’m using ver 2.1 of your script. The code that is in the html appears to be escaped i.e.

    <DIV style='border:1px #000000 solid; padding:5px; margin: 0px; color:#000000; background-color:#999999;'>BS – Training</DIV>

    Just in case that gets mangled the html is here too:

    http://www.mode2.com/html-produced.txt

    Do week views work OK on your calendars? Is there something obvious I am missing?

    As always your help is much appreciated!

    Ben

  39. Christophe

    I am trying to use a calculated field to color code a calendar. It appears that a calculated field has a limit of 8 IF statements that can be entered in one field. Is this correct. I have a team that needs to use 10 colors.

    Any suggestions?

    Thanks,
    Fey

  40. Hmm. Falling at the first hurdle. When I try to create teh calculated columne, I get an error saying “No such column exists, pick one that does”.

    I have created the Calendar view of my task list
    I have inserted the CEWP with the appropriate code
    The “% Complete” column does exist
    And I managed to get all your other code examples to work (which are awesome by the way), so I’m not sure what I’m doing wrong.

    Sharepoint 2007. I read through all the comments, but people’s challenges seem to be more complex than mine.

    Any help would be gratefully received.

    Keith

  41. I’m using the techniques you’ve described for applying color to our calcendar of outages with great success so thanks for that. The next hurdle is displaying both the start and end times in the first line of the calendar event, rather than the standard start time only. I’m running on a shared global instance of sharepoint 2007 and don’t have access to site template changes that I’ve seen discussed in other forums. Is there a way to combine the color coding that is working with the start and end times? Today I’m showing the Event description and a record number that is used to cross reference with another tool. As our calendar has a number of events, having to enter each item to get the actual end times or scrolling around to see the corresponding side banner of times to then compare the actual event to visually to get the end time are both poor solutions.

    Any help you can provide would be great. If it would help to see our calendar, i can take a screen shot and email? Thanks in advance.

    • You could hide the default time displayed by SharePoint (search the Web for this trick), and include the start and end times in the formula of your calculated column. Use the TEXT function to format the date in the formula.

  44. Pingback: HTML Calculated Column: minor update… and some advice « Path to SharePoint

  45. Perfect timing Christophe, thank you. I had just found that my week and day views were not displaying correctly and having dug into the code found they were appearing in . . . . So I tried modifying your script to include a regexpB looking for a “b” tag – which worked but was very slow. Your new “lite” release works great.

  46. I am not able to finish this. Can you help?

    I have the calculated columns working (I think):

    [ColorCode]
    =IF([Meeting Type]=”Fitness Class”,”gold”,IF([Meeting Type]=”Healthy 4 You Event”,”red”,”limegreen”))

    [BGColor]
    =””&[Meeting Type]&””

    But when I add the script in a CEWP on the default page (where I have the web part for the calendar displayed) or the dispform.aspx page, I’m not getting the results I want. The default page seems to be putting the calendar items in white boxes, no color.

    Please let me know what I’m doing wrong. Thanks!

    • This is only a test! 🙂

      ="<SPAN style='Border:1px #333 solid; padding:1px; margin:0px;font-weight:bold;width:100%;background-color:"&IF(Category="(Please Select)","Red",IF(Category="Conferences","LightCyan",IF(Category="Operations","DeepSkyBlue",IF(Category="Finance","Orange",IF(Category="Marketing","LightPink",IF(Category="IT","PaleGreen",IF(Category="P & O","Yellow",IF(Category="Education","Tomato")))))))&";'> "&Title&" </SPAN>")

  47. hi all,

    i am not able to get ths…can anyone help me out ….i think the jvascript is not working foe me my html tag

  48. Christophe,

    This may be a silly question. But what type is the column [%] used in this example. I got all other functionality of this example to work but cannot seem to be able to use it with the [%] column you use. I get a #VALUE error using the Choose formula. Do I have to specify the column to be formatted as number, percentage, or ?

    Please let me know

    Best

  50. hello- i am trying to remove ‘time’ field from the calendar view in sharepoint-any idea how to do so? much appreciated. liz

  51. Great job Christophe! I used this to great effect on a calendar recently, so thanks for the help in getting a simple color coding system up and running.

    I’m having a problem on a new calendar though. On the old one, I used a calculated html field has you recommend and had no problems. In this new one, I need to use the default description field (or something else that has rich text editing capabilities) and have it display on the month view of the calendar. For some reason the javascript doesn’t work on that field. Does this script work for non-calculated fields?

    Thanks!

      • I did not add one myself, but since the description is using rich text it stores it with HTML. I ran a CAML query to see what the actual value of one of my test entries was and this is what it gave me:

        What really goes in this space

        It’s in the default description field of a basic calendar. I know you recommend using the span tag search in the javscript and I’ve tried that as well as div but neither works for me.

        Thanks again

        • Jason, SharePoint will display the description as actual HTML, so my script will have no effect. The text to HTML script only operates on HTML strings that are not rendered as HTML yet.

  52. Hi,

    I have a calculated column that concatenate a link with other columns in the list.
    I follow your posts but i can´t put it to work in the dispform.aspx of a calendar. I put the script of the calendar view in the dispform.aspx but doesn´t work.

    Can anyone help me?

  53. Thanks for the great code, Christophe! It’s been a huge help. I have it working well, but have found that I can only have seven ‘IF’ statements. I thought at first that it was a character issue (running past the 255 limits when displayed), but that’s not it. I can have seven categories with assigned colors and one more default color, but after that I get syntax errors. It’s not the code as far as I can see- as soon as I add the eighth category and the subsequent ‘)’ for it, I get a syntax error. Any ideas what I’m doing wrong? Thanks in advance.

    • Laura, this is a hard limit in SharePoint, you can’t have more than 7 nested IFs.
      There are various options to work around this issue: CHOOSE function, use multiple calculated columns, etc.

  54. Do you know if you can color code a gnatt calendar view? I’m having trouble getting this code to work. I keep getting: “This list cannot be displayed as a Gantt chart because it lacks required fields.” Thanks!

    • Chris, search for “Gantt” on my blog and you’ll find some information. The default Gantt view is built with images, so the approach is different.

    • Sure. If you use the method described in this post, use the font property.

      Also, check out my tiny calendar posts, they’ll show you another approach using stylesheets.

  56. Pingback: A2life » Showing a list from another SharePoint Site

  57. Pingback: A2life » SharePointクロスサイトのリスト表示をJQueryで行う

  58. Do you know if any of the latest updates for SharePoint 2007 impacted modifying cell contents using javascript in a content editor web part? I have a customized page (not using your code, unfortunately) that was supposedly working a month or so ago, but is now rendering text rather than html.

  59. Does this work in SharePoint 2010? I’ve tried un-successfully, I get the columns calculated ok, but it doesn’t render the span tags as it should.

    Also – as soon as I add the CEWP to the page (either with a script or without) my Calendar Tools ribbon disappears. To get it back I have to delete the CEWP. Thanks.

  60. Great tips here, so I am hoping you can help me. Instead of color, I want to change the link that is displayed on the calendar from point to the dispform.aspx to a hyperlink field I enter in the calendar entry. I have tried using the text to html code, but I still get the code in the calendar. Any suggestions?

  61. Not sure if I missed any steps/setting, how do I remove the blue lined border outside the color box? Thanks in advance.

    • The blue border is external to the item. I think some readers have posted techniques to do this, either in this post or in the more recent tutorial published in 2010.

  62. Hey exceptional website! Does running a blog like this require a great deal of work?

    I’ve absolutely no expertise in coding however I had been hoping to start my own blog soon. Anyways, if you have any suggestions or tips for new blog owners please share. I understand this is off topic nevertheless I simply needed to ask. Many thanks!

  63. Hello, I am able to see the information in the SPAN referenced to the category and it states the color it should be but the color does not change in the calendar. The code above is below the calendar on the page but it still will not work. What am i doing wrong?

Comments are closed.