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.
view plaincopy to clipboardprint?
<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[i].innerText || theAs[i].textContent;
if ((AContent.indexOf("<DIV") >= 0) && (AContent.indexOf("</DIV>") >= 0)) {
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = AContent;
theAs[i].innerHTML = "";
theAs[i].appendChild(tempDIV);
}
}
catch(err){}
i=i+1;
}
</script>
<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[i].innerText || theAs[i].textContent;
if ((AContent.indexOf("<DIV") >= 0) && (AContent.indexOf("</DIV>") >= 0)) {
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = AContent;
theAs[i].innerHTML = "";
theAs[i].appendChild(tempDIV);
}
}
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:
view plaincopy to clipboardprint?
="<DIV style='position:relative;'><DIV style='font-size:0px; border-top: 14px solid "&CHOOSE(INT([%]*10)+1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&";width:100%;'> </DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>"
="<DIV style='position:relative;'><DIV style='font-size:0px; border-top: 14px solid "&CHOOSE(INT([%]*10)+1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&";width:100%;'> </DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>"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.
