HOW TO: Elegantly suppress Timestamps from SharePoint 2010 Calendar Views using jQuery

2012-07-02 MV: SharePoint 2010 Calendars sometimes get clogged with excess information, particularly timestamps (e.g. StartTime or StartTime-EndTime) . Trying to supress this seemingly harmless little snippets sounds trivial, yet a quick google search will show you each person ended up down a rabbit hole for far far longer than they anticipated.

Here are the reasons this ends up being non-trivial:
1. You’re NOT customing a SharePoint LIST VIEW, you’re customizing a ListView WEB PART’s default view – basically, you CAN’T;
2. You end up post-processing the HTML emitted by SharePoint just BEFORE The Brower actually begins rendering (painting) it; �
3. The actual EVENTS in the calendar load ASYNCHRONOUSLY AFTER the rest of the HTML page loads, so throwing selectors into jQuery’s $(document).ready() event handler does NOT work; the selector will seek vainly for <div class=”ms-acal-sdev”> elements which are NOT there… at least not YET;
4. While SP2010 DOES apparently provide “hook” functions which DO occur ONLY after all the event information really DOES finish asynchronously loading, it all IS decidedly frustrating & perplexing to suddenly be confronted with all of this when all you THOUGHT you were going to do was add 3 lines of terribly-elegant-pat-yourself-0n-the-back jQuery to a Content Editor web part;
5. These already-arcane-and-esoteric hook functions are hard enough to work with when there’s just ONE of them, but depending upon WHICH version (SP1 or not) of SharePoint you’re running, you’ll need to try BOTH functions to see WHICH one you’ll need;
6. The handful of intrepid souls who contributed their efforts before me all appear to have completely-working, bug-free code; well, they APPEAR to. 😐 We all know how very hard it is to go BACK to that blog posting you started and really really REALLY correct it so it’s complete. My own blog below is just myown attempt at trying to really summarize/correct/re-order/explain what needs to be done, hoping I too don’t leave any bugs in it…

GOAL: Suppress the (annoying) time stamp values in the SP2010 Calendar View (really a ListView web part).

BEFORE:

Image of SP2010 Calendar BEFORE Timestamp Suppression

Image of SP2010 Calendar BEFORE Timestamp Suppression

AFTER:

SP2010 Calendar AFTER jQuery-based Timestamp Suppression

SP2010 Calendar AFTER jQuery-based Timestamp Suppression

 I chose to narrow the scope of this modification to a single calendar page, so it made the most sense to leverage a Content Editor web part.

Here are my steps:

BROWSE to the page with Calendar View
EDIT page
ADD Content Editor Web Part (CEwp)
CONFIGURE web part to be hidden
EDIT content of CEwp
EDIT HTML
PASTE the following code (good for SharePoint 2010 and SharePoint 2010 SP1):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
 // SHAREPOINT CALENDAR MONTH VIEW TIMESTAMP SUPPRESSOR CODE
 // ADD to either Content Editor Web Part for controlling a specific page, or to the default.master to control ALL calendars EVERYWHERE...
 // 2012-07-02 developed by Mark Vogt (www.markvogt.us) for at&t...
�
 // hook into the existing SharePoint calendar load function...
 function modifyCalendarAfterLoaded(){
   if (SP.UI.ApplicationPages.CalendarNotify.$4a)                             // 20111006 pre-SP1 - Office 365
   {
  //console.log("CalendarNotify.$4a true...");
  var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
  SP.UI.ApplicationPages.CalendarNotify.$4a = function (){
   OldCalendarNotify();
   doModifyCalendar();
    }
   }
   if (SP.UI.ApplicationPages.CalendarNotify.$4b)                           // SP2010 SP1
   {
  //console.log("CalendarNotify.$4b true...");
  var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
  SP.UI.ApplicationPages.CalendarNotify.$4b = function (){
   OldCalendarNotify();
   doModifyCalendar();
    }
   }
 }
 function doModifyCalendar() {
  //DEBUG - $(".ms-acal-rootdiv").css("border", "2px green solid");
  //BEBUG - $(".ms-acal-sdiv").css("border", "2px red solid");�
  // find all of the tags of type sdiv. this will INCLUDE both StartTime and StartTime-EndTime tags...
  $(".ms-acal-sdiv").each(function(){
   // get the raw HTML, which includes the unwanted text ahead of the <a> tag...
   var innerContents = $(this).html();
   //console.log("innerContents = " + innerContents);
   // match the pattern against the returned HTML to return (remember it's an ARRAY of hits) ONLY the HTML containing (and including) the ANCHOR tag...
   var subString = innerContents.match(/<A.+<\/A>/);
   //console.log("subString[0] = " + subString[0]);
   // set this to be the NEW value of the  HTML for this element, thereby REMOVING the annoying timestamp :-) ...
   $(this).html(subString[0]);
  });
 };�
�
 // load our function to the delayed load list...
 _spBodyOnLoadFunctionNames.push('modifyCalendarAfterLoaded');
</script>

 

This will give you precision control over the display for a SINGLE page.

ADD this same code to the  v4.master page if you want site collection (even farm) scoped customization.

REMEMBER to provide links to ALL references/contributors !!!

REFERENCES & SOURCES (we all of us blogging on this have numerous  others whose code helped):
http://techtrainingnotes.blogspot.com/2010/06/sharepoint-2010-color-coded-calendars.html
http://mohamedramadanahmed.wordpress.com/2012/01/10/customize-sharepoint-calendar-view/
http://www.gskinner.com/RegExr/

Peace out,

-MV

Leave a Reply

Your email address will not be published. Required fields are marked *