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
    your customization goes here (don't type this J )
  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

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

// 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);"







Beth said...

Thank you! The SharePoint Designer method worked great.

Rooney Maddox said...

Each type of event has different information that needs to be tracked, so two content types were implemented, with Internal Event being the default and External Event being an extra content type.

Kelly said...

I tried to implement this using the second method, and I've tried both versions of the code - pre- and post-SP1 (I *think* my server has SP1 installed, but it was worth a try). Neither version removed the hyperlinks from my calendar view. Is it possible that Javascript has been disabled on my server, or is there something else I can try? Thanks!

Anonymous said...

this only works once. after you do click in expand link where is more than 2 events, the changes get lost.

Anonymous said...

What if I wanted to link to the full calendar view? right now I have used css to create a mini calendar view but when I click on a date, it opens up a single day and keeps me on the same page with no way to change back to a monthly calendar.

Mike Smith said...


Change this line to add HTML for your link:

links[0].parentNode.innerHTML = links[0].innerHTML


links[0].parentNode.innerHTML = "<a href='urlToYourCalendar'>Full Calendar</a>"


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.