SharePoint: Color Coded Calendars in MOSS

Here is a good sample code
Can a calendar display in colors?
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

  • 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

  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:
  3. Add a new column named "CalendarText"
    1. Column Type is Calculated
    2. Equation is:
      ="<font color='" & Color & "'>" & Title & "</font>"
    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"
    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;
    Click here to view the full article


No comments:

Post a Comment