Customize SharePoint Calendar View Using JQuery

Standard

Note: This is working only with SharePoint 2010 as the notification changed

Calendar view in SharePoint is not a XSL view so when you come to customize it is not easy steps to change  it. To produce that you think like that:

1 – SharePoint calendar view bind its data from one field in your list which you can change it by modify the view. Great so you can add a calculated field that carry an HTML code and data from other fields to be displayed in the calendar cells and this will solve the problem……try that gonna work but the html code is rendered as a plain text in the calendar view. check the following figure:

2- you will think about JavaScript to run after calendar load to get the HTML rendered as HTML not as a plain text by change any &lt; pattern to < and any &gt; pattern to > here is the code to do that:

      Note:You must add JQuery library reference to your page (this code use 1.4.2 but you can use any version of it)

//encode html text to html
function ChangeTheCalendarView() {
//Use the following code to remove tooltip that appear and contain the html code as a plain text
$(‘.ms-acal-rootdiv’).find(‘div’).attr(‘title’, ”)
//use the following line to remove time from the view to render only your calculated field content
$(‘.ms-acal-time’).html(”);
//Use the following code to get the plain text back to HTML
$(‘.ms-acal-title’).each(function () {
a = $(this).find(‘a’);
href = a.attr(‘href’);
$(this).html(a.html().replace(/

3- Here the calendar view has been change if you run this code in your browser console, check the following figure:

4- if you put this code in the $(document).ready() you will get nothing. the problem is this code run at DOM ready but calendar view itself use JavaScript to load its data which loaded after DOM ready so you need to delay this code after the calendar would be loaded and this is the difficult part of the solution. After some search on the internet I find the solution in a post (you can check for more details about the following code) here is the code which call your customization method whenever the calendar loads

//delay the method call till calendar load

function CalHookIntoSPUI() {
var originalCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function () {
originalCalendarNotify();
ChangeTheCalendarView();
}
}

//execute the methods after calendar load

_spBodyOnLoadFunctionNames.push(“ChangeTheCalendarView”);
_spBodyOnLoadFunctionNames.push(“CalHookIntoSPUI”);

Hope this maybe helpful for you. Please feel free to feedback me 🙂

Advertisements

2 thoughts on “Customize SharePoint Calendar View Using JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

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