Becky Bertram's Blog
Perspectives from a SharePoint developer




This blog has moved. You can find the new blog on Savvy Technical Solution's Web site, at www.savtechsol.com. You will be redirected to the following page in 10 seconds:

Becky Bertram's Blog > Posts > Custom Client-side Calendar Query for Office 365 SharePoint Site Using SPServices JQuery Library
August 26
Custom Client-side Calendar Query for Office 365 SharePoint Site Using SPServices JQuery Library

I'm building an Office 365/SharePoint Online intranet site for a client and they wanted to show a list of the current day's events from various calendars on the site, in a format like this:

8:30​ a.m. ​Staff Meeting ​Room 103
​10:00 a.m. Training ​Cafeteria
​3:30 p.m. Retirement Party ​Conference Room

As you might now, you can't use a normal CAML-query to retrieve calendar entries if you want to retrieve reoccuring events that happen within a given timeframe. (If the first instance of a reoccuring event happened outside the timeframe you queried, the event would not be retrieved, even if it had reoccuring events that happened during the queried timeframe.) The Content Query Web Part will not do the trick.

On projects past, I've simply created a web part with a custom CAML query that utilizes the DateRangesOverlap node, and installed that web part using a solution package. This being Office 365, that's not an option. I could have created a sandbox solution containing the web part but that's also not a preferred approach since Microsoft seems to be deprecating sandbox solutions. At the urging of Marc Anderson, I tried using his SPServices library.

The SPServices library is a JQuery library that accesses SharePoint web services. By attaching your library to a particular Office 365 SharePoint URL, you can retrieve list items using the SharePoint web service, then use them with JQuery. There's a discussion thread about how to use SPServices to retrieve calendar entries. I decided to modify the file provided in that thread and use it. The main modification I needed was the ability to combine calendar entries from more than one calendar and show them in a common calendar. This meant utilizing a sorting function after entries from multiple calendars were retrieved so all entries would be listed in the proper order.

You can download my calendar.js file here. Once I had added the script to my site, I added the following lines of code to my page layout in the header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>
 <script language="javascript" src="/Style Library/Scripts/calendar.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function (){ 
  CallSPServicesCalendar(https://[sitename].com/site1, "Calendar 1");
  CallSPServicesCalendar(https://[sitename].com/site2, "Calendar 2");
  $('div.calendarItem').sortElements(sortByDate);
  if ($('div.calendarItem').length == 0) {
   $("#calendarData").append("There are no events scheduled for today.");
  }
 });
</script>
 
First, you can see that I'm calling my JQuery libraries hosted by Google, and then I'm calling the SPServices library hosted at cloudflare. Next, I'm referencing calendar.js that's hosted in my own SharePoint site.
 
The script block at the bottom passes in the URL of the web being queried as a first parameter, and then the name of the calendar list as a second paramter. CallSPServicesCalendar is the name of my function in calendar.js that retrieves calendar entries. At the bottom of my calendar.js I have a function that sorts the calendar entries, which you can see is being called with .sortElements in the script above. If no list items are retrieved, a message is displayed to saying there are no events. If you want to query more calendars, simply add new calls to the CallSPServicesCalendar function.

In the calendar.js file you'll notice a section with Field nodes that get passed into the CAML query. You can modify this section to add your own fields if you have custom fields you want to retrieve and display.

In the body of the page, I added a div tag like this, and this is where the event information was added in the page:

<div id="calendarData"></div>

In the calendar.js file, you can modify the HTML that gets rendered for each calendar entry.

Comments

Nice Post!

I'm sure Jim Bob would be happy to know that his code works outside of the instance he originally created it.

One thing I would caution against, would be the usage of toISOString.  This doesn't have that great of browser support just yet (it's getting there!), so I would use something else.

http://caniuse.com/#search=toISOString

Cheers,
Matthew
 on 8/29/2013 9:15 AM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Comment Title *


Body *


Your Name


Your E-mail Address


Your Website

Type the Web address: (Click here to test)  

Type the description: 

Are you spamming my blog? *


This field is here in an attempt to stop spammers from entering comments. Enter a number, any number

Attachments