Integrate FullCalendar.io with Power Pages

Integrating FullCalendar.io with Power Pages is a powerful way to create customized calendars with dynamic content. By combining the power of FullCalendar, a popular JavaScript library for creating interactive calendars, with the flexibility of Power Pages’ templating system, users can create custom calendaring experiences that are tailored to their needs.

The integration begins with an understanding of JSON (JavaScript Object Notation), which is the data format used by FullCalendar.io. JSON is a lightweight data-interchange format that is easy to read and write and can be used to represent complex data structures.

Once the user has a basic understanding of JSON, they can begin to incorporate FullCalendar.io into their Power Pages. This involves using the FullCalendar.io API to create a series of events, which are then passed through the Power Pages templating system to render a fully-customized calendar. Users can also use the FullCalendar.io API to customize the calendar’s appearance, including the background colour, font size, and event icons.

Stage 1 – Create a JSON web template to feed the calendar Key skills covered Liquid – fetchxml, if, for and filters Creating a JSON endpoint Accessing columns from related records Preparing dates in ISO8601 format using liquid filters Escaping HTML using liquid filters Encoding URLs using liquid filters Dealing with comma separators Snippets Here’s a static example of the JSON before we make dynamic and loop over our advanced find results: The completed

liquid template, with events populated dynamically: Useful links fullcalendar.io

https://francomusso.com/integrate-fullcalendar-io-with-power-pages-from-json-basics-to-advanced-output-with-bootstrap-modal

In this Video

• 00:00:00 Introduction
• 00:00:19 Static Example of JSON
• 00:00:33 Use Advaned Find to build a Fetch XML query
• 00:03:13 Create a Web Template in the Portal Management App
• 00:03:53 Prepare the Fetch XML
• 00:05:00 If statement to check whether any result returned
• 00:05:34 For loop to output each result (event)
• 00:06:54 Use forloop.last to deal with comma separators
• 00:08:02 Get our web template onto the portal as a JSON endpoint
• 00:13:21 Validate the JSON
• 00:13:43 Populate the event feed with dynamic values from Dataverse
• 00:14:40 Converting dates to ISO8601 format
• 00:18:25 Outputting lookup fields, and fields from related records