SharePoint: Strike Out Canceled Events in the Calendar


This article is for SharePoint 2007. For SharePoint 2010 you can use the following steps to customize the columns of the calendar, and then use JavaScript from the Color Calendar article.


Moving or deleting an event in a calendar is not always the best way to make sure people notice the change. Sometimes it’s better to “cancel” a meeting and then create a new meeting than just moving it in the calendar. The SharePoint calendar list does not have a built in way to do this. So… yet another JavaScript trick!


Here’s what we want to do:



By the way, the following is just a variation of an earlier article on how to color code a calendar. The “big change” is an IF statement to make the formatting conditional. By expanding the calculated column’s formula a bit you can have both color coded and canceled events.


The basic steps are:

  • Add a column to the calendar list to indicate that the event has been canceled 
  • Add a calculated column to create the HTML to display the formatted cancelation message. This can be done with HTML or CSS. This example just uses "<s>  text   </s>"
  • Add the new column to the calendar 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

Detailed steps:

  • Create or open a calendar
  • Add a new column named "Canceled" (Settings, List Settings) – most likely type will be "Choice" with choices like "No” and “Yes" with a default of “No”
  • Add a new column named "CalendarText"
    1. Column Type is Calculated
    2. Equation is:
      =IF(Canceled="Yes", "<s>" & Title & "</s>", Title )
    3. Data type returned = single line of text
  • If you want to also change the color, then add a FONT or SPAN tag:
    =IF(Canceled="Yes", "<font color=’gray’><s>" & Title & "</s></font>", Title )

  • Modify the existing view, or create a new view such as "Calendar with cancel"
    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 "<s>" will now be displayed. The JavaScript below will be needed to fix the HTML tags)
  • 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
  • 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,'>') 

  • Click Save, OK, Exit Edit Mode
  • Add a new calendar item and select a status – canceled events should now be crossed out. 




Andy S said...

Hi Mike,

Just Stumbled upon your site and I'm loving the content, there's a lot of additions I'm after!

I've tried this in SP 2010 and I'm not getting anywhere. The Calendar entry is displaying the strike out HTML code.

I've even tried adding the Javascript as a .txt file (as per these instructions http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/) but to no avail.

Any ideas?

Mike Smith said...


The example above is for SP 2007. I'll try to get an updated article for 2010 in the next few days.

SP 2010 does a delayed load of the calendar content which means we will need to do extra work to time the running of our JavaScript. I wrote about that in a recent article.


Scroll down to the "They broke the Calendar!" section for some background of what's changed.


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.