Supporters of End User
Web

jQCalendarPart Mini SharePoint Calendar Web Part

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Javascript and jQuery; Calendar; Content Editor Web Part; Site Manager/Power User; MOSS; WSS; 2010; SPF 2013

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:

2013-04-01-JQCalendarMini-01.png

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.

Comments

June

Great post

Thanks for the great post. I was looking for some ways to handle recurrence events.

Posted 07-Apr-2013 by June
geewhy

Troubleshooting?

First off, love this solution, but am having trouble getting it to work correctly. The calendar does appear on my site but is not synchronized with the only Calendar list. No dates are underlined to indicate events nor is there a list of events under the calendar. Not sure how to troubleshoot this.

Posted 15-Apr-2013 by geewhy
Boshra

Problem

The Same As  Troubleshooting?
please help

Posted 28-Apr-2013 by Boshra
SC Vinod

Troubleshooting tips

Hi Boshra, Please open the page in Firefox browser and check for the error in the "Error Console". If any error present, please mail me to: s.c.vinod@gmail.com

Posted 08-May-2013 by SC Vinod
Stan Stevens

Mini calendar does not show on site

I put the unzipped file in the layouts folder of my SP 2010 server. i added the code to a CEWP, but the calendar did not show on my site. What is the pathe to the layouts folder. Perhaps i put the folder in the wrong place.

Posted 03-Jun-2013 by Stan Stevens
anjum

i want to show event details on click

HI Vinod, I want to show event details instead of showing it onMouseOver i want to show it on click. tried changing your code, but with no luck, when i click on some event other event are disappearing . please help me thanks in advance ---------------------------------------------------- function CreatePopUp(eventDate, eventDuration, itemURL, title){ if($("#" + date.getDate() + "_eventPopUp").html()!=null){ console.log('before empty') $("#" + date.getDate() + "_eventPopUp").empty(); console.log('after empty') } $('.addMe').append(" "); $('.ui-datepicker-calendar a') .filter(function(index){ return $(this).text() == date.getDate() && $(this).parent('td').attr("data-year") == date.getFullYear() && $(this).parent('td').attr("data-month") == date.getMonth(); }).parent('td').click(function(){ //return; document.getElementById($(this).find('a').first().text() + "_eventPopUp").style.display = "inline"; //$('.eventPopUpDiv').css('display','inline'); }); calliHtml = '
  • ' + title + ' ' + eventDuration + '
  • '; $("#" + date.getDate() + "_eventPopUp").append("

    " + date.toLocaleDateString() + "

    "); $("#" + date.getDate() + "_eventPopUp").append("
      "); $("#" + date.getDate() + "_eventPopUp" + " .divCalendarUL").append(calliHtml); } -------------------------

    Posted 09-Jun-2013 by anjum

    Notify me of comments to this article

    E-mail:
       

    Add Comment

    Title:

     
    Comment:
    Email:

       


    Name:

     
    Url: