SharePoint Calendar Overlay - Color code documents and display direct links to document library

I wanted to have a color coded view of documents in a SharePoint calendar, that would be populated from a document library. Also, the link on each item in the calendar would point directly to the document itself. We will also want to make sure that all documents for that date are expanded by default.


End Result: (on hover, you'll see that the hyperlink has changed to the direct link to the document)

 

1. In a document library, create a column that you want to categorize your documents. I chose to create a choice field called "Document Type" and gave it 3 choices:
1. RFP
2. Proposal
3. Contract
2. In the same library, create a date column that you will use to show the documents in a calendar. I chose to create a date field called "Due Date"
3. Upload your documents, and provide the Document Type and the Due Date for each.

1. In the libray, create a Calendar view for each particular Document Type
1. For the name of the view, input the document type
2. For the Begin and End date, select the Due Date field
3. For the month view, week view and day view titles, select the Document Type field from the drop down.
4. Filter this view on the desired Document Type

1. Now that all the views have been created, go to the Calendar (a team site should already have one, if it doesn't, create one).
2. On the Calendar, select the Calendar tab from the ribbon and click on the Calendars Overlay
3. From there, click New Calendar
1. Give the calendar the name of the Document Type
2. Select a color
3. From the list drop down, select the document library that you configured earlier
4. Select the Calendar view corresponding to the Document Type
5. Repeat for each document type

Now all the documents will appear on the calendar, color coded based on Document Type and displayed based on Due Date

Next up: We will need to create a script, that we will use to override the CalendarNotify so that we can manipulate the hyperlinks on our Calendar to point directly to the document, instead of the list form

1. Create a javascript file and store it in your assets library
1. Add a reference to jQuery and SPServices

Add the following script

<style>

/* hide the collapse/expand on load (we will make it expand in script) */
.ms-cal-nav{display:none;}

/*hide the time */
.ms-acal-time {
 DISPLAY: none
}

.ms-acal-sdiv {
 MARGIN-LEFT: -58px
}

.ms-acal-sdiv A {
 POSITION: absolute; WIDTH: 100%; LEFT: 0px
}

.ms-acal-title {
 HEIGHT: 35px; PADDING-TOP: 0px
}

TABLE.ms-acal-vcont TBODY TR TD A {

 DISPLAY: none !important

}


</style>

<script type='text/javascript' src='/assets/js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='/assets/js/jquery.SPServices-0.7.1a.min.js'></script>
<script type="text/javascript">



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


// hook into the existing SharePoint calendar load function
function changeCalendarEventLinkIntercept()

{
  var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;

  SP.UI.ApplicationPages.CalendarNotify.$4b = function () 
    {
      OldCalendarNotify4a();
      changeCalendarEventLinks();
    }
}

var thisSite = L_Menu_BaseUrl; //defined in SharePoint pages

function changeCalendarEventLinks()
{

 //expand all in the day
 $("a[evtid='expand_collapse']").each(function(){
  $(this)[0].click();
 });

 $(".ms-acal-sdiv").each(function(){
  var aLink = $(this).find("a");
  var href = aLink.attr("href");
  var linkSubs = href.split("ID=");
  var itemId = linkSubs[1];
  var listName = linkSubs[0].replace(thisSite +"/","");
  listName = listName.replace("/Forms/DispForm.aspx?","");
  GetListData(listName, itemId, aLink);

 });

 //necessary if date has more than 1 document
 $(".ms-acal-mdiv").each(function(){
  var aLink = $(this).find("a");
  var href = aLink.attr("href");
  var linkSubs = href.split("ID=");
  var itemId = linkSubs[1];
  var listName = linkSubs[0].replace(thisSite +"/","");
  listName = listName.replace("/Forms/DispForm.aspx?","");
  GetListData(listName, itemId, aLink);

 });

 $('td[evtid=day]').removeAttr('evtid');
 $('th[evtid=week]').removeAttr('evtid');
}



//go out and get the file name of the document, so that the link to the calendar will be a direct link to the document

function GetListData(listName, itemId, aLink){

 var linkRef = "";
 var camlFields = "<ViewFields><FieldRef Name='ID'/><FieldRef Name='FileLeafRef'/></ViewFields>";
 var camlQuery = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Text'>" + itemId + "</Value></Eq></Where><OrderBy><FieldRef Name='ID'/></OrderBy></Query>";
 var items_Returned = null;

 $().SPServices({

  operation: "GetListItems",
  async: true, //make asynchronous so it doesn't lock up page
  listName: listName,
  listName: listName,
  CAMLQuery: camlQuery,
  CAMLViewFields: camlFields, 
  CAMLRowLimit: 1, 
  completefunc: function (xData, Status){

   items_Returned = xData;
   //alert(xData.responseText);

   var rows_Item = items_Returned.responseXML.getElementsByTagName('z:row');

   if(rows_Item.length == 0 )
   {
 //for chrome
    rows_Item = items_Returned.responseXML.getElementsByTagName('row');
   }

   for (var i = 0; i < rows_Item.length; i++)   
   {
    linkRef = rows_Item[i].getAttribute('ows_FileLeafRef');
    linkRef = linkRef.split(";#")[1];
    var newlinkRef = thisSite + "/" + listName + "/" + linkRef;

    aLink.attr("href", newlinkRef).attr("title", aLink.text());
   }
  }
 });
}

</script>

Next, we will create page that we will used to modify the rendering of the calendar and open a direct link to the document

1. Create a page, and drop the Calendar list view web part (make sure to select the view for the Calendar you just created)
2. Add a content editor web part to the page, and specify the link to a javascript file, which we just created

Enjoy!