How to create a color coded group calendar for SharePoint 2013 Step by Step

By Microsoft MVP and MCT · Pluralsight Author

Published June 17, 2014 · SharePoint

In this blog post I will show you how I was able to create a color coded calendar for a team that wanted to see all the team members and what they have for the next week. We all know that the Out of the box SharePoint Group Calendar in SharePoint 2013 is pretty incomplete, but by using some help from the internet and from SharePoint-Community.net rockstar Paul Choquette, I was able to create something cool for the business. Before I go on, here is what it’s going to look like at the end:

color coded group calendar

While hoping to do this the most out of the box possible, I encountered several problems that confirm what people have been saying for a while… The group calendar for SharePoint 2013 has the potential to be a great feature, but it isn’t complete! Here are some of the little problems I have been facing while trying to make this work:

  • The Group Calendar loses the people selection we have on every refresh!
  • No way to add multiple views to this view in order to add colors.

Luckily, it’s easy to add JavaScript to SharePoint to make it work for us! So, the first step I want to do is to create the Group Calendar, Create a SharePoint Page and then add the Group Calendar in it as a Webpart.

Creating the Calendar

  1. So first of all, click the wheel button at the top right of the screen and create a new Calendar App. When creating it, make sure you click on the Advanced Options button!

Adding Calendar dialog in SharePoint 2013 with the cursor on the Advanced Options link

  1. On the Advanced Options Page, make sure you select the “Yes” Radio Button when asked if you want to “Use this calendar to share member’s schedule“

    Advanced Options page for the My Team Calendar list with Yes selected for Use this calendar to share member's schedule

  2. Now go in Site Contents > Site Pages and on the top Files tab , create a new document of type Web Part Page. Choose what layout you wish, I chose the Full Page, Vertical

    Files tab New Document menu in SharePoint 2013 with the Web Part Page option highlighted

  3. When you get on the new WebPart Page, click the “Add a WebPart” button, and in the Apps category, you will find the Name of your Team Calendar you created in Step 1!

    SharePoint 2013 Add a Web Part picker with the Apps category selected and My Team Calendar highlighted in the Parts list

  4. So now, you should have a page looking like this one:

    My Team Calendar group calendar web part showing the week of June 8 to 14 2014 with one person listed and an Add Person box

    Now, try to add an event to yourself! Well… try is the good word because by default it will not appear in this view even if we told SharePoint we wanted a Group Sharing Calendar! In order to be able to see people on this Calendar, we will need to add the “Attendees” Column. This is also the good occasion to customize your columns. I will show you how to put up the attendees column, but the rest of the customizing is up to you!

  5. First, go in your Team Calendar and click on the List Settings button at the top right.

    SharePoint 2013 calendar ribbon with the List Settings button highlighted in the Settings group

  6. In the List Settings page, you will have a Content Type Section with the Event Content Type in it. Click on the Event Content Type!

    Content Types section of the SharePoint calendar list settings with the Event content type highlighted

  7. At the bottom of the page, after all the columns, click on the “_Add from existing site or list columns”
    _link.

    Calendar list columns with the Add from existing site or list columns link highlighted below Category and Recurrence

  8. Highlight the Attendees Column from the left list box and click on the Add Button! It will then transfer to the right and then click OK!

    Add columns from site columns page with steps numbered: select Attendees, click Add, then click OK

  9. Now go back to your Calendar, add a new event and put yourself as an attendee! You should now see your event appear in the calendar!

    My Team Calendar week view for June 8 to 14 2014 showing the VC1 user row, a Yay it Works event and the Add Person box

Automatically Adding Users

Good but now, I only see myself! I will add other persons using the “Add Person” on the button and then SharePoint will remember my choices and will display them to everyone right? Unfortunately notL. Every time you go to your page/Calendar, it will only show yourself and no one else. Fortunately, Mohamed M Malek from Microsoft posted a blog post on the solution. I will write the step by step here, which is mostly copied with 1 correction from his blog post, however all the credit for this approach and script go to him and not to me! If you want to see how he did it and how he engineered the script, make sure you read his blog post. If you just want to get it working, continue readingJ.

My advice: Before starting to do this section, I advise you to read the step by step entirely and see how it works. It will allow you to make wise decisions from the begging on how you want to add persons in the calendar. Personally, I created a SharePoint Group called “Team Calendar Members” that will contain all the members I want to add to the calendar. I created a new group with no permissions, since all my permissions are handled with AD Groups, and this calendar isn’t able to see inside AD GroupsL.

  1. Download Fiddler over here > http://www.telerik.com/fiddler . Fiddler is a web debugging proxy that also allows you to record traffic! I know for some of the beginners in SharePoint this might sound like a scary and complicated tool, however, I will guide you through how to use it step by step.

  2. Open a new Internet explorer Window and go to your Calendar Page. Only have that site open in the internet explorer window. Also, Open Fiddler.

  3. In Fiddler, Click on the “Any Process” button, and drag the “target” on the Internet Explorer Window we just opened.

    Fiddler Web Debugger toolbar with the Any Process button highlighted and its drag to a window tooltip

  4. In Internet Explorer, on the SharePoint Page, click on the “User Directory” Button in the “Add Person” section.

    Add Person box on the My Team Calendar group calendar with the address book icon highlighted

  5. In the “Add ->” Section at the button, add all the users you want to add that want to appear on the calendar. Add them all in there, but do not press ok yet! In my case, I added the Calendar Team Members SharePoint Group. Do not add Active Directory groups in it, it will not work!

    SharePoint people picker dialog with the Add button and the Calendar Team Members group highlighted above OK and Cancel

  6. Before Pressing Ok, go in Fiddler and Remove All Past entries. This will make it easier for us to find the one we need!

    Fiddler session list with the Remove all option open in the clear sessions dropdown menu

  7. Now, click on the OK button! In the browser, you will see that all the users you selected will be added to the calendar. In Fiddler you will get a bunch of new entries!

  8. In Fiddler, go in the first result that has a “200” Result (second column) (1) . Then make sure on the top tab you are in the Inspectors tab (2) and then in the bottom tab, make sure you are in the TextView Tab (3). Afterwards, click on the “Response is encoded and may need to be decoded before inspection| yellow bar (4).

Fiddler Inspectors with numbered steps: select the POST session to Picker.aspx, open Headers, choose TextView, then click the decode response bar

  1. You will now see actual text in that box. Copy all the text from that box starting from “var ret =” and ending at “u003e’;” Like in the following picture. Save the text in a notepad!

    Fiddler TextView showing the decoded picker response script with the var ret JavaScript text selected for copying

  2. While still on the calendar page, open Internet Explorer Developer tools by pressing F12. On the left side, select the Dom Explorer (red circle and the select the “Select element” option (yellow highlight)

    Internet Explorer F12 DOM Explorer with the Select element button highlighted and the tool icon circled in red

  3. Position your mouse at the top left of the calendar, until the whole calendar is in a blue highlighted color!

    My Team Calendar web part selected in the DOM Explorer, highlighting the AsynchronousViewDefault_CalendarView div

  4. Then go in the Source explorer in the bottom and expand the node you are in! You will see an ID that looks something like WPQ3. This ID will appear in a lot of places, so it shouldn’t be hard to find! Save that ID into a notepad file!

    DOM Explorer HTML of the calendar web part with the WPQ3 web part ID highlighted in several element IDs

  5. Now, copy paste this script in a notepad file.

<script type="text/javascript">
function _firstTime() {
//need to select the calendar tab so we can override the onlick method on some of the buttons. 
SelectRibbonTab('Ribbon.Calendar.Calendar', true);
//give the ribbon time to load 
setTimeout('_doWireUp();',2000);
}
function _doWireUp() 
{ 
//change the onclick event for the group buttons to make sure it reloads our default group 
var weekElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.WeekGroup-Large'); 
if(weekElem) 
weekElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};
var dayElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.DayGroup-Large');
if(dayElem) 
dayElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};

_setDefaultResources(); 
}

function _setDefaultResources() {

// Paste the Var Ret from Step 9 over here:  
    var ret ='\u003cEntities c…………………………………………………………………………………………………………..\u002fEntities\u003e';

// Replace the WPQ3 from the next line with the ID you got in Step 12! 

        var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, 'WPQ3'); 
        sel.selectEntities(ret, true); 
}

ExecuteOrDelayUntilScriptLoaded(_firstTime, "sp.ribbon.js");
</script>

6. So, to give you an idea, this is how mine looks like:

<script type="text/javascript">
function _firstTime() {
//need to select the calendar tab so we can override the onlick method on some of the buttons. 
SelectRibbonTab('Ribbon.Calendar.Calendar', true);
//give the ribbon time to load 
setTimeout('_doWireUp();',2000);
}
function _doWireUp() 
{ 
//change the onclick event for the group buttons to make sure it reloads our default group 
var weekElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.WeekGroup-Large'); 
if(weekElem) 
weekElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};
var dayElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.DayGroup-Large');
if(dayElem) 
dayElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};

_setDefaultResources(); 
}

function _setDefaultResources() {

// Paste the Var Ret from Step 9 over here:  
    var ret ='\u003cEntities Append=\u0022True\u0022 Error=\u0022\u0022 DoEncodeErrorMessage=\u0022True\u0022 Separator=\u0022;\u0022 MaxHeight=\u00223\u0022\u003e\u003cEntity Key=\u0022Calendar Team Members\u0022 DisplayText=\u0022Calendar Team Members\u0022 IsResolved=\u0022True\u0022 Description=\u0022Calendar Team Members\u0022\u003e\u003cExtraData\u003e\u003cArrayOfDictionaryEntry xmlns:xsd=\u0022http:\u002f\u002fwww.w3.org\u002f2001\u002fXMLSchema\u0022 xmlns:xsi=\u0022http:\u002f\u002fwww.w3.org\u002f2001\u002fXMLSchema-instance\u0022\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003eSPGroupID\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003e21\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003eAccountName\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003eCalendar Team Members\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003ePrincipalType\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003eSharePointGroup\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003c\u002fArrayOfDictionaryEntry\u003e\u003c\u002fExtraData\u003e\u003cMultipleMatches \u002f\u003e\u003c\u002fEntity\u003e\u003c\u002fEntities\u003e';

// Replace the WPQ3 from the next line with the ID you got in Step 12! 

        var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, 'WPQ3'); 
        sel.selectEntities(ret, true); 
}
ExecuteOrDelayUntilScriptLoaded(_firstTime, "sp.ribbon.js");
</script>

  1. Now go to your Webpart page, edit the page and add a script Editor Webpart!

    SharePoint page editing ribbon with the Media and Content category and the Script Editor web part highlighted

  2. Click on the Edit Snippet link, and add the script you created in Step 14!

    SharePoint Script Editor web part on the calendar page with the Edit Snippet link highlighted

  3. Then close it, save the page, and make sure you navigate to it again! (Site Content > Pages > your page). All the users you selected should now automatically load!

Color Coding the Calendar

Ok, now that we have all the users we want added to the calendar, we got to color code events, to make it easier for people to see items on a calendar! This whole section was made possible with the help of Paul Choquette. Paul is a JavaScript guru and most of all an important member of SharePoint-Community.net! He is often online and helping people with JavaScript questions! So, here is how we did it!

  1. First of all, I needed to get the category of my event in the title of the event! This was both for easy to see purposes, and the technical purpose in the background was to be able to get the category in the HTML tags on the calendar! So, what I did was create a Calculated Column in the Calendar called “CalendarTitle“. The Forumula I used for it was =Title&” [“&Category&”]” . So for example if someone creates a event of type Meeting with the title “SharePoint Discussion” , the column will equal > “SharePoint Discussion [Meeting]“

    Create Column page for a calculated CalendarTitle column whose formula joins Title and Category, with the category in square brackets

  2. Now we will go back to the Calendar and will click on the Modify View button!

    SharePoint Calendar ribbon tab with the Modify View button highlighted in the Manage Views group

  3. In the Calendar Columns Section, we will modify the Month,Week and Day view title to show our new column “CalendarTitle” instead of just the Title. The entries in the Calendar will now look something like this:

    Calendar Columns section of the view settings with Month, Week and Day View Title set to CalendarTitle

  4. Ok, so now it looks something like this:. You can see the Category in the title!

    SharePoint calendar week view showing the Yay it Works event with its Meeting category now appended to the title

  5. But we still don’t got colors! That’s where Javascript comes in! We will insert this part of code between the place where we inserted our WebPart ID and the “ExecuteDelayUntil Script Loaded. To give you an idea of where it’s placed, it’s right here:

    Colorize JavaScript function setting a red or green background on SharePoint calendar events titled On lync or On Call, called via setTimeout

    // Adjust timeout value to get colors to show up
        setTimeout('Colorize();', 1000);
    } // Be careful   this bracket already exists! Do not add an extra one! 

    function Colorize() {
        $("div[title$='\\[Meeting\\]']").css('background-color','red');
        $("div[title$='\\[Holiday\\]']").css('background-color','green');
    }

    You will notice that in the part I did, I setup Meetings to be in Red, and Holiday to be in Green. For more categories, you just copy paste those lines and edit the category and color! , Also, at the end of the script, add the following line:

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    1. To make it a bit more clear for you, here is my final Javascript>
    <script type="text/javascript">
function _firstTime() {
//need to select the calendar tab so we can override the onlick method on some of the buttons. 
SelectRibbonTab('Ribbon.Calendar.Calendar', true);
//give the ribbon time to load 
setTimeout('_doWireUp();',2000);
}
function _doWireUp() 
{ 
//change the onclick event for the group buttons to make sure it reloads our default group 
var weekElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.WeekGroup-Large'); 
if(weekElem) 
weekElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};
var dayElem = document.getElementById('Ribbon.Calendar.Calendar.Scope.DayGroup-Large');
if(dayElem) 
dayElem.onclick = function() {setTimeout('_setDefaultResources();',1000);return false;};

_setDefaultResources(); 
}

function _setDefaultResources() {

// Paste the Var Ret from Step 9 over here:  
    var ret ='\u003cEntities Append=\u0022True\u0022 Error=\u0022\u0022 DoEncodeErrorMessage=\u0022True\u0022 Separator=\u0022;\u0022 MaxHeight=\u00223\u0022\u003e\u003cEntity Key=\u0022Calendar Team Members\u0022 DisplayText=\u0022Calendar Team Members\u0022 IsResolved=\u0022True\u0022 Description=\u0022Calendar Team Members\u0022\u003e\u003cExtraData\u003e\u003cArrayOfDictionaryEntry xmlns:xsd=\u0022http:\u002f\u002fwww.w3.org\u002f2001\u002fXMLSchema\u0022 xmlns:xsi=\u0022http:\u002f\u002fwww.w3.org\u002f2001\u002fXMLSchema-instance\u0022\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003eSPGroupID\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003e21\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003eAccountName\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003eCalendar Team Members\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003cDictionaryEntry\u003e\u003cKey xsi:type=\u0022xsd:string\u0022\u003ePrincipalType\u003c\u002fKey\u003e\u003cValue xsi:type=\u0022xsd:string\u0022\u003eSharePointGroup\u003c\u002fValue\u003e\u003c\u002fDictionaryEntry\u003e\u003c\u002fArrayOfDictionaryEntry\u003e\u003c\u002fExtraData\u003e\u003cMultipleMatches \u002f\u003e\u003c\u002fEntity\u003e\u003c\u002fEntities\u003e';

// Replace the WPQ3 from the next line with the ID you got in Step 12! 

        var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, 'WPQ3'); 
        sel.selectEntities(ret, true); 

      // Adjust timeout value to get colors to show up
        setTimeout('Colorize();', 1000);
    }

    function Colorize() {
        $("div[title$='\\[Meeting\\]']").css('background-color','red');
        $("div[title$='\\[Holiday\\]']").css('background-color','green');

}
ExecuteOrDelayUntilScriptLoaded(_firstTime, "sp.ribbon.js");
</script> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    1. Now go add this code in your Team Calendar Page! You might notice that the CalendarTitle column doesn’t show in the page, but you still see the old version! Edit the WebPart and select the Calendar view!

      My Team Calendar web part in edit mode with the List Views pane set to the Calendar view and a blue Yay it Works event on June 12

    2. So now when you go back to the page, it will look something like this:

    WSP-2014-06-12 037

Our Colors work!

While this isn’t the best way of doing this type of calendar and it has a lot of Javascript and client side coding, it gets the job done and it can easily be done by a power user!