Pic

Full Calendar in OutSystems - Customizing a complex calendar

We’ve used the Full Calendar javascript framework in many of our projects, as it’s a very complete solution to develop calendars on websites. However, integrating Full Calendar in some of our projects has been really challenging, due to the projects requiring custom views and the added complexity of integrating it with the OutSystems platform.

One of these projects was WayneCore, an intranet that required a completely custom resource view and some external functions. This calendar was created to be used by project managers, allowing them to better organize their teams’ workload and projects, as well as manage allocations and overview the employees’ reported time.

The project has a Resource Plan page consisting of a calendar view with a filter section where the user can filter by projects, users, departments or business units.

Resource Plan full calendar view

For this calendar view, we needed to have an option to toggle the weekends’ visibility and this toggle also had to refresh the calendar data depending on the selected option. We also removed the default button to toggle between the calendar’s daily and weekly views, in order to improve the platform’s user experience.

Resource Plan daily view

This calendar also required some changes to the table cells so we extended the table cell’s functions and added:

  • an avatar;
  • a new trash icon with an action to remove the resource from current view; 
  • a custom split cell for two lines of events: one for the planning schedule and another for the employee’s reported time.

Each employee row is divided into two rows, the first being the scheduled event’s row and the latter being the time reported row. In the first row - the events’ row - users can add, edit and move events. This can be achieved by clicking in the date/time slot or clicking in two (or more) days/hours to either create a new schedule event or move existing events.

The second row - the reporting zone - doesn’t have events so we disabled this functionally in these rows.

To create and edit calendar events we used OutSystems modals, where users could submit the event’s information, like the resource’s identification and the time. This task was a bit challenging and to achieve this we had to refactor the calendar source code integrated into OutSystems, so we could get the information regarding resource identification in the event.

Displayed events can have some event information such as the time, project name and can also differ in color. Blue background color indicates to the user that he can’t edit the event, while the grey events are editable.

A key requirement was mobile usage and this was a challenge as well because although this calendar was built to work on mobile devices, we still needed to adapt it to be used under special conditions such as when workers are on the field. To achieve this we created some delays and added special touch events so that users wouldn’t accidentally open the edit modals when they’re scrolling or navigating the page, for example. In the mobile version, the user would need to press on a date slot cell for half a second to show the create modal, instead of being an instant click like on the web version. 

These are some examples of the custom features we’ve developed for the Full Calendar on the OutSystems platform. More recently we’ve also created the Full Calendar Reactive component, available now on the OutSystems Forge, where we integrated the Fullcalendar JavaScript plugin in OutSystems Reactive Web Apps.

Main post image by Zan on Unsplash