Using FullCalendar For 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 the 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 the entity list for booking the entity, but I faced issues while using a custom template. As we wanted a 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 requirements 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 have 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.

// Set as Monday first day
firstDay: 1,
locale: 'en-AU',
views: {
    week: {
        columnFormat: 'ddd D/M'
    }
},

Show More Details on Booking Hover

Another requirement we have is to show additional information when a user hovers over the booking rendered under FullCalendar control. We can do this using the following options.

eventRender: function(eventObj, $el) {
    $el.popover({
        title: eventObj.title,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
    });
}

Open the 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.

eventClick: function(eventObj) {
    if (eventObj.workorder != null)
        window.location.href = "/WorkOrders/WorkOrderDetails/?id=" + eventObj.workorder;
}

Change FullCalendar Header

By default, the FullCalendar control displays the headers like the following.

But we wanted to render it like the following.

To change the header, we used the following properties.

header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
buttonText: {
    today: 'Today',
    month: 'Month',
    agendaWeek: 'Week',
    agendaDay: 'Day'
},

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