For this article, we will only use the standard functionality that is open sourced. This library has several benefits compared to other calendar libraries:
lightweight and provides a React wrapper
styles are loaded directly into the head of the document as inline styles - no need to load CSS files
good documentation and interfaces for customization
good performance and OOB functionality
For this demo, we assume that we have a case type called 'Appointment' that will be used to store each appointment. The case type provides standard OOB properties like pyID and pzInsKey that can be used to open the case - On top of these properties, 3 additional properties are used: SessionDate, StartTime and EndTime by the calendar widget.
The Case type exposes a list Data page that provides all the instances of this case type. When configuring the widget, the name of the DP is passed to the component as parameter (D_AppointmentList) - Another parameter called 'Create case className' will show the 'create' button if this parameter is set.
Here is a screenshot of the widget configuration when adding it to a page:
The component supports the following functionality:
3 types of views are supported by default: Monthly, Weekly and Daily - Weekly and Daily shows an hour timeline whereas Monthly only show the day.
Monthly view render the appointment as large card with field values whereas Weekly and Daily only render the title of the appointment (pyLabel)
For hourly views - the range is from 7 AM to 7 PM - this is not configurable but could easily be exposed as settings
The widget will listen to filter change on the UI (change month, view...) - it will persist the context in localstorage and on load of the UI, it will use the context from the localstorage if present - this allows to navigate between pages but maintain the selected view
The widget will listen to ASSIGNMENT_SUBMISSION event from the Constellation runtime - if the case is edited using the preview panel, the calendar data will be refreshed automatically
Here is a screenshot of the component in storybook using mock data:
Demo of the component and other details
Important note: The demo and the source code attached has been tested against a Pega 8.8 system