jQCalendarPart Mini SharePoint Calendar Web Part


You may also be interested in: fpweb.net


 

Editor’s note: Contributor SC Vinod is a SharePoint Developer at Hexaware Technologies. Follow him @scvinod

Introduction:

I always wanted everything to work on a full-fledged client side application in SharePoint. I’d like to thank the Client Object Model in SharePoint 2010, which inspired me a lot; though it was of no use in this application, unfortunately (but 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.

This application is to integrate the jQuery Calendar control with the events added in a SharePoint Calendar list. This works in both SharePoint 2010 and SharePoint 2013.

Inspiration:

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

Description:

This is a JavaScript application developed using jQuery. The JS code, when added to a Content Editor Web Part in a SharePoint page, would display a jQuery calendar control synchronized with the SharePoint calendar list. Below, the list of features are 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, 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:

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 events 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. Since it was not possible to retrieve recurring events using COM I had to use SharePoint list web services instead. This 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 have events 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 working. I have tested this on 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.

Deployment Steps:

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with CEWP before. I have explained the deployment process through the steps below:

  • Download the jQCalendarPart.zip file from here.
  • Unzip the jQCalendarPart.zip file.
  • Copy the unzipped jQCalendarPart folder into the layouts folder of SharePoint server.
  • Create a Content Editor Web Part in your SharePoint site where you want to display this web part.
  • Open the jQCalendarPart.min.js file from the jQCalendarpart folder and copy the content into the CEWP created above.
  • Save the page to see the web part showing a jQuery calendar control synchronized with the SharePoint calendar events from the Calendar list in your site.

For everything SharePoint and Office 365 from the community for the community!