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.
![Full calendar]()
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.
![FullCalendar control]()
But we wanted to render it like the following.
![Render]()
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!