Friday, June 22, 2012

SharePoint Calendar by Fiscal Year with FullCalendar and SPServices

A little background:

Last week at work, I had a requirement to display a calendar view in SharePoint that would display a full fiscal quarter of a year on one page. It would have to be a color coded calendar, filter by Fiscal Year, Fiscal Quarter and by the Department and show a full quarter view (3 months) on one page.

The first thing I thought of was to add 3 calendar web parts on one page (one for each month of the quarter) and then add some javascript that would redirect the calendars to the current quarter's months. Well, that didn't work out too well because the calendars are controls, and I can't pass in multiple parameters in the url for each one.

So next, I started down the path of creating a gannt chart that would be filtered by each quarter. Each quarter and fiscal year would be dynamically set based on calculated column fields. The first bump in the road was that the gannt chart doesn't go past 2 years. The second bump in the road was that reoccuring events would show one line from the first date to the very end date (there were no tick boxes). I had to scratch that plan.


After doing some research, I came across this blog by Josh McCarty. It utilizes the FullCalendar jQuery library with SPServices to query a SharePoint calendar and display it in a friendly way.

I used his code as a base, and expanded it to create multiple calendar views on one page (one calendar view per month (up to 12!)), allow filtering by the fiscal year and fiscal quarter, filter by department, add a legend of colors for the department and enable tooltips for each event. 

The entire color-coded calendar view, with a legend and drop down fields to filter on fiscal year, fiscal quarter and department (by default, it will set the Time Frame to be the current fiscal year and quarter):

Ability to show the calendar by the week:


Ability to filter by Department:




Steps:
1. Create a simple calendar on your SharePoint site. Add a column called "Department" and make it a choice field. Add the choice options. Ex.:
Dept1
Dept1: SubDept
Dept2
Dept2: SubDept

2. Add a calculated column called "Color" and set it to:


=IF(ISNUMBER(FIND("Dept1",Department)),"LightBlue",IF(ISNUMBER(FIND("Dept2",Department)),"Yellow")
Modify this field with the correct department names and colors you would like to use. 
3. Add the javascript/spservices/jquery libraries to a document library on your site.
4. Insert this code into a Content Editor web part on a page and modify the listCalendarName variable to be the name of your calendar and update the script tags. (View Code)

5. Voila! You should be able to see a color coded calendar similar to the one above!


3 comments:

  1. I followed your blog and Josh's blog but the problem is that nothing is getting rendered on the calendar and the data is getting retrieved with the GetListItems.

    Please help me on this.

    ReplyDelete