jQCalendarBlog – Mini SharePoint calendar web part for SharePoint blog posts

Introduction:

This is my 2nd SharePoint client side web part application that I have developed using JavaScript\jQuery.  You can find the first application that I had created over here. This application is to integrate the published dates of the approved posts in a SharePoint Blog site with the jQuery calendar control.

Description:

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

  1. The calender control highlights the dates during which approved blog posts were published in the SharePoint blog site.
  2. The dates when hovered would display a small pop-up listing down link to the corresponding date’s blog posts that were published.
  3. The links when clicked would take you to the respective blog post’s page.
  4. You can also navigate to the previous and next month in the calendar to see the corresponding month’s data in a similar way as explained above.

Look at the below image for a better understanding:

As you can see in the above image, cells 1, 6, and 31 are highlighted with a blue color border to show that these are the dates in the current month having blog posts published. Also when you hover over date ‘6’ in the calendar you can see that a pop-up is being shown displaying the links to the posts published on that particular date.

Code:

I have used the jQuery DatePicker  control and SharePoint list web service 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.

Deployment Process:

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 below steps:

  1. Download the  jQCalendarBlog.zip file from here.
  2. Unzip the jQCalendarBlog.zip file
  3. Copy the unzipped jQCalendarBlog folder in to the layouts folder of SharePoint server.
  4. Create a Content Editor Web Part anywhere in your SharePoint Blog site where you want to display this web part.
  5. Open the jQCalendarBlog.min.js file from the jQCalendarBlog folder and copy the content in to the CEWP created above.
  6. Save the page to see the web part showing a jQuery calendar control synchronized with the blog posts in your blog site.
Advertisements

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.