SharePoint Group Calendar, Adding default users

The Problem

One feature of SharePoint is to create a calendar and make it a group calendar. This allows the user to see the schedule of list of people at the same time on the same view as per the image below.

image

To configure the Calendar as a group Calendar you need to edit the List settings and then click on “List name, description and navigation” and finally select the radio button as per the image below.

image

So all this is SharePoint out of the box functionality. So where is the problem?

The problem is that to get the view of all calendar of your work group every time you open the calendar view you need to add each one of them individually! And I could not find any way to persist this information so that it would open the calendar view automatically with the people added as per the list you see in the first image. So lets get to work.

The Solution

The way I fixed this is using Java script.

To be able to do this I used the following script.

var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, ‘WPQ12’);
sel.selectEntities(ret, true);

You need two things to be able to perform the above script, the ID of the calendar web part (WPQ12 above) and the XML script to be able to add the required individuals. The way to do this is to follow the following steps:

Step 1: Getting the XML to add the required users

  1. Install and start Fiddler
  2. Click on the ribbon on the small arrow below “people” then “Add Person or Group”
    image
  3. This will give you the dialog to select the users, add all required users to be added by default to the Calendar view and then click “Ok” as image below
    image
  4. See Fiddler log to find an entry to add the users as per the below.
    image
  5. Then click on the response as text view you will find the Entities string as per the image below.
    image
  6. Copy this text to be used later in your script.

Step 2: Getting the web part ID

  1. Open the page with the calendar web part
  2. Open the IE developer tools (F12)
  3. Click on the selector arrow and then on the calendar web part (most top level)
  4. In the developer tools view you should see Id of the web part as below
    image

Step 3: Create the required script file

  1. Use the information gathered to construct a JS file as below

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() {

// This is the entities XML from step1
    var ret =’u003cEntities c…………………………………………………………………………………………………………..u002fEntitiesu003e’;

// Put here the web part ID from step 2

        var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, ‘WPQ12’);
        sel.selectEntities(ret, true);
}

ExecuteOrDelayUntilScriptLoaded(_firstTime, "sp.ribbon.js");

  1. Save the file as cal.js (any name)

Step 4: Configure the web page

  1. Upload the JS file to any accessible location on SharePoint such as the styles library
  2. Check it in and publish it if required
  3. Edit the page with the calendar web part and add a content editor web part to the bottom of the page
  4. Edit the source of the content editor web part and add the following line
    /sites/your%20site%20name/Style%20Library/ctrl/cal.js
  5. Save the page and then reload it.
  6. See the magic happen 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.