Using FullCalendar For Dynamics 365 Portals

This article is about using FullCalendar in Dynamics 365 Portals.

Introduction

In this article, we will be discussing how we can use FullCalendar in Dynamics 365 Portals. We will see how we can set different layout options and events.
 
 
Requirement
 
Show Booking information in Dynamics 365 Portal using Calendar control.

Details

We got a requirement where a client wanted to see all work order bookings under calendar control. The first thing I tried was to use Calendar View under entity list for booking the entity, but I faced issues while using a custom template. As we wanted the specific layout, so I thought of using custom calendar libraries and found FullCalendar which is very popular and easy to implement. When I checked if somebody already used it in Dynamics 365 Portals I  found this which helped me to initially implement FullCalendar. During implementation, we got some layout requirement which I am sharing below.

Render Monday as the first day and set the Week View as ‘ddd D/M’

By default, FullCalendar renders Sunday as the first day of the week, but we got a requirement to show Monday as the first day and set our Week View format as ‘ddd D/M’. To implement this, I used the following property.
  1. //set as Monday first day    
  2. firstDay: 1,  
  3.     locale: 'en-AU',  
  4.     views: {  
  5.         week: {  
  6.             columnFormat: 'ddd D/M'  
  7.         }  
  8.     }, 

Show More Details on Booking Hover

Another requirement we got is to show additional information when a user hovers on the booking rendered under FullCalendar control. We can do this using the following options.
  1. eventRender: function(eventObj, $el) {  
  2.     $el.popover({  
  3.         title: eventObj.title,  
  4.         trigger: 'hover',  
  5.         placement: 'top',  
  6.         container: 'body'  
  7.     });  
  8. }  

Open Work Order Page on click on Booking

If a user clicks on the booking, we want to open the parent work order page to show complete work order details. To implement this, we used a click event of the calendar control to navigate to work order page like the following.
  1. eventClick: function(eventObj) {  
  2.    if(eventObj.workorder!=null)  
  3.    window.location.href = "/WorkOrders/WorkOrderDetails/?id="+eventObj.workorder;  
  4. }  

Change FullCalendar Header

By default, the FullCalendar control displays the headers like following.
 
 
But we wanted to render it like the following.
 
 
To change the header, we used the following properties.
  1. header: {  
  2.         left: 'prev,next today',  
  3.         center: 'title',  
  4.         right: 'month,agendaWeek,agendaDay'  
  5.     },  
  6.     buttonText: {  
  7.         today: 'Today',  
  8.         month: 'Month',  
  9.         agendaWeek: 'Week',  
  10.         agendaDay: 'Day'  
  11.     },  

I hope it will help someone. Feel free to comment if you are facing any issue. Stay tuned for more Dynamics 365 Contents!!