SharePoint Framework (SPFx) Calendar Overlay

As companies continue their adoption of Microsoft 365, the need for solutions to bring together content within their organization increases.

SharePoint Framework (SPFx) Calendar to the rescue! While working with many of our clients, we saw a trend in the desire to overlay multiple calendars in a single view. Microsoft previously offered a method to accomplish this in prior versions of SharePoint. However, with the shift to SharePoint Online, this has disappeared from Microsoft’s core set of web parts. Working with our clients, Cloudwell set out to create a solution using SharePoint Framework (SPFx) to solve this common problem.

Core Features

  • Overlay multiple calendars
    • SharePoint Online
    • SharePoint On-Premise
    • Exchange Online
  • Support for native Calendar list and/or custom lists with Date/Time columns in SharePoint
  • Create new events from calendar legend
  • Microsoft Teams native integration
  • Customizable color coding of each calendar
  • Size/Scaling of the web part rendering
  • Available calendar views: Month, Week, Day, List

Implementation

We decided to utilize a JavaScript plugin called FullCalendar, as this plugin handled a lot of the heavy lifting for rendering events, maintaining views, and pulling up event details on click. This node module allowed us to quickly stand up a calendar view within the web part. All we had to do was pipe in the events, and FullCalendar did the rest. For a crash course on SPFx and FullCalendar, check out the following documentation from Microsoft: jQuery and FullCalendar.

In addition to SharePoint calendar support, our clients pointed to a feature that used to exist in previous versions of SharePoint:

On-Premise SharePoint versions have a method for overlaying Exchange calendars on top of SharePoint calendars. This gave companies an easy way to compare various calendars when searching for times to schedule events. Unfortunately, in the move to SharePoint Online, Microsoft removed this capability as it is no longer feasible to do with Exchange Online. In the development of our web part, we wanted to make sure we could accommodate this use case to fill in the gap.

Challenges

From the onset, we knew that recurring events would be the most challenging aspect of this project. SharePoint stores recurrence data differently than typical calendars. We needed a way to aggregate both SharePoint and Exchange events before passing them to FullCalendar.

SharePoint Events

SharePoint stores recurring event information in a property on each list item called “RecurrenceData.” This is an XML value that store all relevant information needed for rendering a recurring event properly. By taking in a base event and applying the information from the RecurrenceData field, we built an array of “repeating” events and passed them into FullCalendar.

Exchange Events

In contrast to the SharePoint event gathering, Exchange was much easier. We were able to leverage a Microsoft Graph endpoint to simply pull all events in the window currently being viewed in the web part. The endpoint returned all relevant data for rendering.

Conclusion

In the end, the solution came together quite nicely. We were able to build a fully functional Calendar solution that allowed for the overlay of multiple SharePoint and/or Exchange calendars. The web part can be natively added and configured on any SharePoint page or within a tab of a Team in Microsoft Teams. Enjoy viewing AND managing all of your calendars in one place!


If you’d like to learn more about how we’re helping organizations across the globe effectively use Microsoft Teams, visit our Microsoft Teams Consulting page or contact us today.

Leave a Reply

Your email address will not be published. Required fields are marked *