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,'>') 

  } 

} 

</script>  

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

 

.