jQCalendarPart – Mini SharePoint calendar web part

Introduction: 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. 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:

  • The calendar control highlights the dates of all the events of the current month present in the Calendar list of the site.
  • The dates when hovered over with the mouse, would display a small pop-up showing the respective date’s events.
  • The links when clicked would open the respective event’s view form page.
  • You can also navigate to previous and next and months to view the respective months’ events.

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. Also when you hover over date “13” in the calendar you can see that a pop-up is being shown displaying the events of that particular date. Deployment:

  1. Go to your SharePoint site and create a document library called “jQCalendarPart”.
  2. Download the jQCalendarPart.zip file from here and unzip it.
  3. Copy the files and folders from the unzipped jQCalendarPart folder in to the above created library.
  4. Create a Content Editor Web Part in your SharePoint site where you want to display this web part.
  5. Edit the CEWP and link it to the JS file called jQCalendarPart.js that was uploaded in the jQCalendarPart document
  6. 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.

if you do not see the calendar control or the calendar control is not showing any events from the  calendar list, please read the caveat points mentioned in the below section. Caveats:

  1. The code has been written to retrieve events only from a calendar type list whose title is “Calendar”. If you want to retrieve from a different calendar list, please change the value of the variable “listName” from the code.
  2. All the external JS files that are used are referred using their relative URL, so if your site URL comes after “/sites”, please change the reference URLs for all the JS files that are present in the top of the code.

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. Kindly mail me at s.c.vinod@gmail.com if you have any doubts or issues or you can also post a comment in my blog.

Advertisements

28 thoughts on “jQCalendarPart – Mini SharePoint calendar web part

  1. Hi,

    I have one small issue. Somehow the highlighted events on the calendar grid is always 1 day ahead. Are you setting the timezone somewhere or what do you think could cause this problem?

    And whats the progress or update on the limitations regarding “navigating to the next month” and having the list/hightligting tag along? If there is any, 🙂

    In SP2010 there was this “SP.UI.ApplicationPages.CalendarNotify.$4a” and “SP.UI.ApplicationPages.CalendarNotify.$4b” method that could be used, but I havn’t been able to get it to work in 2013. The absolute only way I got it to work was by doing a time delay and then calling the same function twise :/ witch sucked..

    Have you found a better way to hook into the SP2013 ajax “next/prev month” click events?

    KR.
    /Rasmus

  2. Hi Rasmus,
    Thanks for the feedback. I’m not sure why you are getting the events highlighted a day ahead. I need to look in to it. It never happened to me. I’m just retrieving the same the data that is there in the Calendar list.

    Regarding the next/previous month. Please wait as I”m working on it.

  3. Hi Vinod,

    I found some issue while adding the events in Calendar list.

    When I do one entry in the calendar list, it was reflecting well in the UI part.

    But when I do edit page and make some other operations on other webparts and saved the page. Then the already same existing event is getting repeated at the events list in calendar bottom.

    Can you please let me know the cause/fix for the issue.

    • Hi Anil,
      Thanks a lots for bringing this to my attention. Will get back to you ASAP. But I’m sure that if you refresh the page again, the redundant events present in the list below the calendar would disappear.

      • Vinod,
        No. though we do refresh the page, these redundant events list is apearing same on the page.
        One more thing,we noticed was, the calendar is not showing the updated month like when date changed from feb28th to match01, its still showing february month only.

      • Anil,
        I have rectified the redundant events issue. I have uploaded the new files in CodePlex. I need more details on your second issue where you are talking about updating the date value.

  4. Vindod, this is working perfect. But again, after we use the updated code, the time is showing 4 hours advance in the event list at the bottom. for e.g, when I set 8 am – 9 am in calendar, it was reflecting like 12-01 PM in evet list and pop up. similarly if I set 12-01 PM, it is showing 04-05 PM. can you please help on this issue.

  5. Vinod, I just found one bug in focusing today’s date. Even when the date changes to tomorrow, this today’s focus was not updated and it remains static,

  6. Hi, thanks for making this! I was having some trouble getting the mini calendar to pick up my events in the main calendar.

    We are locked down as far as adding new files onto the server. So instead of copying the files to the “_layout” folder, I created a “JQCalendarPart” folder by using the SiteSettings / MasterPageAndPageLayouts.

    When I did that, I also changed all of the paths in your “JQCalendarPart.min.js” (example: /_layouts/jQCalendarPart/jquery-1.8.2.min.js now points to /_catalogs/masterpage/MyNewTheme/jQCalendarPart/jquery-1.8.2.min.js).

    The calendar displays. I can click on a date and it will change color but nothing happens. I don’t see any of my calendar events pull into the mini calendar from my main calendar. I also don’t see any bullet point events at the bottom of the mini calendar like in your screenshot. Do you know what I’m missing?

    Thanks

      • Gee Why,
        Can you open the web part page in a Firefox browser and check from the error console about what error are you getting? If not please verify that you have added the JS files in the correct path as I have mentioned above. Thanks.

  7. Hi, thanks for the feedback. I can’t use FF yet until I configure some security smartcard component. But in Chrome’s console, I notice I’m getting 404 errors for PNG files in the Image directory. I don’t see an images folder in the download or am I missing something? Thanks for the help.

  8. Great little add-on.. it seems there is no images directory in the source folder..
    Also how can I get it work from a different site ? I have a child site where my calendar lives, but I want to show your webpart on the parent site. I’ve added the SPService parameter WEBUrl but it doesn’t seemed to have worked..

    Any advice would be most appreciated. cheers.

  9. HI Vinod,

    I am facing an issue after implementing the calendar..suppose if I have an event on 15/02/2015 and another event on 15/10/2015 …when I’m hovering on both the event ..event popup shows 15/10/2015 for both the events.. Its always showing the recent date in event popup…wil you please look into it?

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s