Calendar is a very common used  module in SharePoint, it comes with 3 OOTB views namely Daily, Weekly and Monthly. Toggling between these views can be easily done using Ribbon button provided. However, there would be cases where you need to run your own JavaScript, perhaps to have a custom button to toggle the views of your calendar.

SharePoint has a in-built javascript function MoveDate which takes in a single parameter that is the view mode to be toggled.

For example

[sourcecode language=”javascript”]

MoveDate(‘day’)

[/sourcecode]

This method simply toggle the current calendar control to ‘Daily’ view. Likewise, passing ‘week’ and ‘month’ will toggle the calendar to weekly and monthly view respectively.

This method however, doesn’t provide the flexibility to specify which calendar you want to toggle view. Imagine if you have more than 1 calendar control added into one single page. This method will just toggle the first loaded instance of calendar control. That’s not good.

Having digging deeper to the SharePoint javascript, there is a hidden function called ‘_MoveToDate(a,b,c)‘ which does the trick. Well I personally do not know what is parameter a for, however, parameter b is the view mode and c is the calendar instance id.

Making use of parameter b and c is good enough to get you toggling view of a specific calendar

That is, making a js call _MoveToDate(null,’day’,’the calendar id‘) will toggle the respective calendar control with ‘the calendar id’ to Daily view.

Now the second question is how to actually retrieve the so-called calendar id? To get that, it requires a little bit of jQuery Selector knowledge (You can read up here). In my case, I added the toggle buttons (within a DIV tag) on top of each calendar control. With this, i would call my custom js ToggleCalendar function with this  as the parameter. Firstly, lookup to the parent DOM object of this and get the sibling <table> tag (SharePoint Calendars are encapsulated within HTML tables, check View Source if you like). After getting the Table DOM, lookup for TD tag with ID starts wth “WebPartTitle”, reason being is that the ID of the calendar is in this format “WebPartTitleXXXX” where XXXX is the calendar instance ID and it is  usually WPQ1 or WPQ2 and so on depending on the number of calendar control you added to your page.

The code below simply showing how to retrieve a SharePoint calendar instance ID, and also to toggle its view to Daily view.

[sourcecode language=”javascript”]

function GetInstanceID(obj)
{
$tdTag = $(obj).parent().siblings(‘table’).find(‘td[id^="WebPartTitle"]’);
var rawID = $($tdTag).attr(‘id’);
return rawID.substring(‘WebPartTitle’.length);
}

function ToggleCalendar(obj)
{
_MoveToDate(null,’day’,GetInstanceID(obj));
}

[/sourcecode]

P.S. The code is with assumption that sp.js has been loaded successfully and you have also included jQuery file.