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

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

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!

  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

  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

  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!

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

    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.

  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!

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

  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!

  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!

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.

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

  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!

  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!

  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).

  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!

  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)

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

  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!

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

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

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

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

  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]

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

  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:

  4. Ok, so now it looks something like this:. You can see the Category in 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:

    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:

    1. To make it a bit more clear for you, here is my final Javascript>

    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!

    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!

 

Leave a comment and don’t forget to like the Absolute SharePoint Blog Page   on Facebook and to follow me on Twitter here  for the latest news and technical articles on SharePoint.  I am also a Pluralsight author, and you can view all the courses I created on my author page.
5/5 (1)

Please rate this

 
Comments

Thanks for the step by step guide. I have been getting to step 4 and wondering where to go next because I thought it wasn’t working!! I can’t believe it doesn’t automatically let you add users either. Why did they make this so much work? Without this guide I would never have got this up and running.

step 4 on which part of the guide! Show me your last screenshot!

It was on the creating the calendar section, I couldn’t work out how to add an event to me. I have managed to do it now and have it colour coded and everything. This article was much appreciated and saved me hours of frustration.

Hi, sorry for my english.
I am on Sharepoint Online with Office 365 plans for EDU.
I haven’t the possibility to add a calendar app from the menu, so I have tried to find it on User’s APP but I haven’t Calendar APP. How can do it?
Thanks

Hello,

When you try to add a calendar, you cannot find it? Go in the same menu as adding a document library and you should find it!

Thanks,

I can’t see it. How can I send you a print screen of the page? So you can check it.
I have also try to find by box search…

Charles Babcock

I noticed that the ID from step 12 is unnecessary. WPQ3 is the only thing that works. Also, if you add a Location field entry, the colors do not work. Is there something we can do codewise to fix that?

You would have to go in actual code to do that, nothing you can really do in JS at this point!

Hi,

I have followed your “recipe” and it loads accounts/persons i added to default list but when calendar is used on another computer and user i get a strange behaviour. It seems the Active user gets loaded two times. Calendar always loads logged on user by default?

Regards,
/Z

Seems to be the default behavior of the calendar! Did you do it by adding directly person, or by adding a SP group that includes persons?

Hi, i’m newbie in SharePoint, but i want know if the color functionality is available for recurrent events (and maybe if it’s possible, explain how get such functionality).
Thanks.

Hello,

It’s really tough to do without doing actual custom code! You would need a real dev solution for this!

Hello,

This looks like a excellent solution for our users, but as i know nothing or very little about jquery, one thing that always hits me is to link to a javascript library online. What if it one day will be removed and then i’l stand there with a useless calendar? Can i download the library instead and put it in the sitecollection?

Thanks

Hello Code is working fine except at the point of specifying the colors. I have copied the script from my snippet as below….Where am i getting it wrong in the color area

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 ———————————————————————————————-‘;

// 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’);
$(“div[title$=’\\[Workhours\\]’]”).css(‘background-color’,’blue’);
$(“div[title$=’\\[Business\\]’]”).css(‘background-color’,’yellow’);

}
ExecuteOrDelayUntilScriptLoaded(_firstTime, “sp.ribbon.js”);

What error do you get exactly? Did you refresh the page and cleared cache? ctrl+f5 & ctrl+r ?

This solution worked out very well!

One thing i notice however is when a new event is added ( modal dialog ), the page reloads and the color’s disappear. Any solution for this?

I am using office 365 sharepoint online and I followed the instruction but the JS using script editor shows (when inserted) but it does not allow me to save. After I insert the script on the page I close the webpart and it closes but nothing changes and no save option is giving. I am the administrator. Please help

Hey, did you do edit source on the webpart?

Great Post Vlad,

I used calendar overlays as an alternative to the color portion of your post. That works as well if you would like to do the colors based on a property in the entry, something like category.

I tried to use your code to show all Resources on a Month Calendar, but not having any luck. do you have any ideas on that one?
I tried adding the following to the _doWireUp

var monthElem = document.getElementById(‘Ribbon.Calendar.Calendar.Scope.Month-Large’);
if(monthElem)
monthElem.onclick = function() {setTimeout(‘_setDefaultResources();’,1000);return false;};

Hey, I never tested it in a monthly view, but it’s not made to show resources on it … unfortunately seems like MS calendars are half done :(.

Hi,

the solution to add users permanently to the calendar works but when i login with another user to check the same calendar the users are gone again and only the logged user is present.. it works like this or am i missing something?
Thank you

This is a fantastic step-by-step guide, im no developer but it was very straight forward to follow and i have successfully completed this now. My only issue is when I edit my page, add the script webpart and enter the script, the users appear straight away, however when i “Publish this draft” the users disappear. If i select Edit on the page again the users appear, until again i publish the draft. Any idea?

Ok as a test i created a blank Wiki page which doesnt require publishing and all works fine. Still no joy with the Web Part Page that requires publishing. So to get round this i will stick with the wiki page.

Again fantastic guide!! thank you

Hello Vlad ,

I do not see in Fiddler ( when I open the “200” entries ) the var ret entries. This is the step from your guide where I got stuck :

” 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! ”

I do not have those entries in my fiddler capture traffic file . Am I doing something wrong here ?

also do I have to look for a ” GET ” or ” Post” entry ?

ok I managed to add the full script to the page but for some reason the users I have added to the group that grants access to the calendar are not appearing in the calendar ? Here is my script :

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 —————————————————————–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, ‘WPQ2’);
sel.selectEntities(ret, true);
// Adjust timeout value to get colors to show up
setTimeout(‘Colorize();’, 1000);
}

function Colorize() {
$(“div[title$=’\\[Sick Leave\\]’]”).css(‘background-color’,’red’);
$(“div[title$=’\\[Holiday\\]’]”).css(‘background-color’,’green’);
$(“div[title$=’\\[Maternity Leave\\]’]”).css(‘background-color’,’blue’);
$(“div[title$=’\\[Paternity Leave\\]’]”).css(‘background-color’,’yellow’);
$(“div[title$=’\\[Training\\]’]”).css(‘background-color’,’brown’);
$(“div[title$=’\\[Bank Holiday\\]’]”).css(‘background-color’,’purple’);
$(“div[title$=’\\[Public Holiday\\]’]”).css(‘background-color’,’black’);
$(“div[title$=’\\[Other\\]’]”).css(‘background-color’,’gray’);
}
ExecuteOrDelayUntilScriptLoaded(_firstTime, “sp.ribbon.js”);

I have a pretty stylised group calendar (SP2010) where a workflow generates and populates the ‘title’ column – as the title is created by ‘customer name’ + ‘booking category’. In both cases the Customer Name and Booking Category columns are lookups to a custom list (as my team need to add more customers as they go along).

I’ve created the calendar views and overlays, added the java for showing the group and colours. But the colours are still not displaying.

For example my ‘Title’ becomes ‘Google – Setup’, so i’ve change the java to look for ‘setup’ in the title by using the :contains command:

$(“div:contains[title$=’\\Setup\\’]”).css(‘background-color’,’red’);

Alas this does not work though! Any hints would be welcome.

Thanks,

Nic

Hi,
My group calendar works but when user try to add an event (double click on the day in weekly view or just click on “Add” button) then by default Attendees are that user and “Calendar Team Members” group – my question is how to remove this group from default Attendees of the event?

when user click on Calendar Name and go into Month view he can see only his events so can add event only to his events but it’s not best solution for users…

Thank you for the great tutorial. However, I’m experiencing the issue others are having where the users disappear after I publish the page. Any ideas how to correct this?

Hi,
Is this supposed to show exchange calendar data or just a blank calendar space to make use of on SharePoint? Ideally we would like it to show individual team calendars and to create a view for different teams within our department.

Blank calendar, not integrated with Exchange!

Hi Vlad, working perfectly, do you have any idea how to keep the color after dragging an item from Monday to Tuesday?

hi,
i want to customize my calander app with saturday and sunday as holidays with colored background.

Works just fine 😉
Thanks!

Most of this worked fine fo me, but I had to exchange the “$” with “*”
Before: $(“div[title$=’\\[Meeting\\]’]”).css(‘background-color’,’red’);
After: $(“div[title*=’\\[Meeting\\]’]”).css(‘background-color’,’red’);

And in case of browsing the calendar to the next week or month the script is not reloaded which results in the default colours.
Any idea?

Leave a Reply