SharePoint 2010 - Create a Calendar View without Hyperlinks

 

This article is one of the many tips in my book, SharePoint 2007 and 2010 Customization for the Site Owner, and presented here as a response to an MSDN forum question. So if this is useful to you… buy the book!

A 2007 version is here and in a lot more detail in my book.

 

We often need a calendar view that is just a "calendar view". I.e. no hyperlinks, just text.

In SharePoint 2010 the data for the calendar is asynchronously loaded using a SharePoint built-in JavaScript function called after the page is loaded. That means that the data we want to change is not yet in the browser when the JavaScript is loaded from within the Content Editor Web Part. To get our code to run at the right time we need to hook into the SharePoint function that loads the calendar items. This is a function named "SP.UI.ApplicationPages.CalendarNotify.$4a".We also need to delay the load of our code, and we can do that with a SharePoint feature named "_spBodyOnLoadFunctionNames.push".

Two Solutions!

Content Editor Web Part

Add a Content Editor Web Part as we have done in many of the other customizations. The problem with this approach is that SharePoint 2010 will no longer treat this page as a view. When this page is displayed you will see two changes:

• The View dropdown list in the site title area is missing
• The ribbon will not be displayed when the page is first loaded, but will be displayed when any event item is clicked.

SharePoint Designer

Add the custom JavaScript using SharePoint Designer. The page will then display as an ordinary view with no odd behavior.

I recommend the second approach.

 

Steps - Using SharePoint Designer

1. Go to the calendar in the browser and create a new view (maybe "Calendar - No Links")
2. Open your site in SharePoint Designer 2010
3. Click Lists and Libraries in the Site Objects pane
4. Click your calendar list and click the new view
5. In the ribbon click the Advanced Mode link (so you can edit the entire page)
6. Search for "</WebPartPages:WebPartZone>" and insert a new line just after this tag
   </WebPartPages:WebPartZone>
   your customization goes here (don't type this J )
   </asp:Content>
7. Add the JavaScript from below
8. Save your changes in SharePoint Designer
9. Go to the calendar in a browser, select the new view and confirm that the hyperlinks have been removed

 

Steps - Using a Content Editor Web part

1. Open Notepad and add the JavaScript from below and save the file (maybe "HideCalendarLinks.txt")
2. Upload the file to a library (I use a library named CustomziationFiles)
3. Right-click the new library file, click Properties and copy the URL to the file
4. Go to the calendar in the browser and create a new view (maybe "Calendar - No Links")
5. After the new calendar view has been displayed click Site Actions, Edit Page
6. Add a Content Editor Web Part
7. Move the new web part below the calendar web part
8. Edit the web part and paste the URL to the text file uploaded earlier into the Content Link box
9. Click OK to save the change, then in the Page tab of the ribbon click Stop Editing
10. Go to the calendar, select the new view and confirm that the hyperlinks have been removed

 

Code to hide the links

Code note!  Prior to service pack 1 you will need to use SP.UI.ApplicationPages.CalendarNotify.$4a while after service page 1 you will need to use SP.UI.ApplicationPages.CalendarNotify.$4b.

<script type="text/javascript">

// TechTrainingNotes.blogspot.com
// Sample code from "SharePoint 2007 and 2010 Customization for the Site Owner"
// ISBN: 978-0982899205
// http://www.amazon.com/dp/0982899203/ref=as_li_ss_til?tag=tectranot-20&camp=213381&creative=390973&linkcode=as4&creativeasin=0982899203&adid=0cc7a0y6fv2nknxyqvff&


// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push('hideCalendarEventLinkIntercept');

// hook into the existing SharePoint calendar load function
function hideCalendarEventLinkIntercept()
{
  var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;
  SP.UI.ApplicationPages.CalendarNotify.$4b = function () 
    {
      OldCalendarNotify4a();
      hideCalendarEventLinks();
    }
}

// hide the hyperlinks
function hideCalendarEventLinks()
{

  // find all DIVs
  var divs = document.getElementsByTagName("DIV");
  for (var i=0; i<divs.length; i++)
  {
    // find calendar item DIVs
    if (divs[i].className.toLowerCase() == "ms-acal-item")
    {
      // find the hyperlink
      var links = divs[i].getElementsByTagName("A");
      if (links.length == 1)
      {
        // replace the hyperlink with text
        links[0].parentNode.innerHTML = links[0].innerHTML
      }
    }

    // find "x more items" links and re-remove links on Expand/Contract
    if (divs[i].className.toLowerCase() == "ms-acal-ctrlitem")
    {
      var links = divs[i].getElementsByTagName("A");
      if (links.length == 1)
      {
        links[0].href = "javascript:hideCalendarEventLinks();void(0);"
      }
    }

  }
}

</script>

 

 

.