{"id":3513,"date":"2018-12-12T05:42:11","date_gmt":"2018-12-12T05:42:11","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=3513"},"modified":"2018-12-13T02:19:13","modified_gmt":"2018-12-13T02:19:13","slug":"using-fullcalendar-for-dynamics-365-portals","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=3513","title":{"rendered":"Using FullCalendar for Dynamics 365 Portals"},"content":{"rendered":"

Introduction<\/strong>
\nThis article we will be discussing how we can use FullCalendar<\/a> in Dynamics 365 Portals. We will see how we can set different layout options and events.
\n\"calendar3\"<\/a>
\nRequirement<\/strong>
\nShow Booking information in Dynamics 365 Portal using Calendar control.<\/p>\n

Details<\/strong>
\nWe got requirement where client wanted to see all work order booking under calendar control. The first thing I tried to use calendar view under entity list for booking entity, but I faced issue while using custom template as we wanted 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 found this<\/a> which helped me to initially implement fullcalendar. During implementation we got some layout requirement which I am sharing below.<\/p>\n

Render Monday as first Day and set Week view as ‘ddd D\/M’<\/strong>
\nBy default fullcalendar render Sunday as first day of the week, but we got requirement to show Monday as first day and set week view format as ‘ddd D\/M’, to implement this I used following property<\/p>\n

\r\n\/\/set as Monday first day\r\nfirstDay:1,\r\nlocale:'en-AU',\r\nviews: {\r\nweek: {columnFormat: 'ddd D\/M'}\r\n},\r\n<\/pre>\n
Show More Details on Booking Hover<\/strong>
\nAnother requirement we got to show additional information when user hovers on the booking rendered under FullCalendar control. We can do this using following options.<\/p>\n
\r\neventRender: function(eventObj, $el) {\r\n$el.popover({\r\ntitle: eventObj.title,\r\ntrigger: 'hover',\r\nplacement: 'top',\r\ncontainer: 'body'\r\n});\r\n}\r\n<\/pre>\n
Open Work order Page on click on Booking<\/strong>
\nIf user clicks on the booking, we wanted to open parent work order page to show complete work order details, to implement this we used click event of the calendar control to navigate to work order page like following.<\/p>\n
\r\neventClick: function(eventObj) {\r\nif(eventObj.workorder!=null)\r\nwindow.location.href = "\/WorkOrders\/WorkOrderDetails\/?id="+eventObj.workorder;\r\n}\r\n<\/pre>\n
Change FullCalendar Header<\/strong>
\nBy default fullcalendar control display headers like following
\n\"calendar1\"<\/a>
\nBut we wanted to render it like following
\n\"calendar2\"<\/a>
\nTo change header we used following properties.<\/p>\n
\r\nheader: {\r\nleft: 'prev,next today',\r\ncenter: 'title',\r\nright: 'month,agendaWeek,agendaDay'\r\n},\r\nbuttonText: {\r\ntoday: 'Today',\r\nmonth:'Month',\r\nagendaWeek:'Week',\r\nagendaDay:'Day'\r\n},\r\n<\/pre>\n
Hope it will help someone. Feel free to comment if you are facing any issue. Stay tuned for more Dynamics 365 Contents !!<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction 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 requirement where client wanted to see all work order booking under calendar control. The first thing I tried… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":3206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[402,508],"tags":[685,686,687,684],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3513"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3513"}],"version-history":[{"count":5,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3513\/revisions"}],"predecessor-version":[{"id":4225,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3513\/revisions\/4225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/3206"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}