Introduction:

I always wanted everything to work on a full-fledged client side application in SharePoint. Thanks to the Client Object Model in SharePoint 2010 which inspired me a lots, though it was of no use in this application unfortunately (more on that later). Also, I wanted to use JavaScript/jQuery over Silverlight to get rid of that ugly “time out” message and the unnecessary task for the end users to download the Silverlight plugin. Well this application is to integrate the jQuery Calendar control with the events added in a SharePoint Calendar list. This would work in both SharePoint 2010 and SharePoint 2013.

Inspiration:

A similar application has already been developed and described here. It is developed by using SharePoint Server Object Model as a SharePoint web part by extending the ASP.NET calendar control but I wanted to make completely a client side application also slightly with a different functionality. I took help from this blog on how to query a SharePoint Calendar list using CAML query but still it really drove me crazy.

Description:

This is a JavaScript application developed using jQuery. The JS code when added to Content editor web part in a SharePoint page would display a jQuery calendar control synchronized with the SharePoint calendar list. Below are the lists of features explained:

  • The calendar control highlights the dates of all the upcoming events of the current month present in the Calendar list of the site.
  • The dates when hovered over with mouse would display a small pop-up showing the respective date’s events.
  • Below the calendar control would be the list of all the upcoming events of the current week.
  • The links when clicked would open the respective event's page.

Look at the below image for a better understanding:

jQCalendarPart

As you can see in the above image, cells 8, 9, 12, 13, and 14 are highlighted with a blue color border to show that these are the dates in the current month having events registered in the Calendar list. Below the calendar you can see the list of upcoming event of the current week. Also when you hover over date “8” in the calendar you can see that a pop-up is being shown displaying the events of that particular date.

Hurdles:

Initially I wanted to use SharePoint 2010 Client Object Model but since it was not possible to retrieve recurring events using COM so I had to use SharePoint list web services which also had limitations as I was able to retrieve only 30 events from the Calendar list in total which was not enough. So I went ahead and used SPServices which resolved my problems to a great extent.

Limitations:

The web part will not work if you try to navigate to the next month or to the previous month. Please wait as I’m working on a fix to highlight all the dates which are having event registered when a user is navigating to the next month.

Also the name of the Calendar list should be “Calendar”. The code will not work if the list name is different since it has been hard coded.

Code:

 I have used the jQuery DatePicker  control and SPServices to get this application done. I have tested this in an Office 365 SharePoint 2013 preview site and it works fine too. But I wanted to develop it as an app and publish it in the app store for SharePoint 2013. So please wait until I get a SharePoint 2013 development environment.

I have explained the deployment process in the documentation section.

Kindly mail me to s.c.vinod@gmail.com if you have any doubts or issues or you can also post a comment in my blog.

Last edited Mar 13, 2013 at 10:26 AM by scvinod, version 31