Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
To know more about Calendar Menu, do check out the sample apps here.
Figure 1: Calendar Menu Properties
|Label||The UI menu label.|
Item link slug. Optional field.
Ensure that value defined here is unique to other UI menus in the app, since the first matching/conflicting ID will take precedence in page loading.
|Page Title||Calendar page title.|
|Load Data From|
See list of available Datalist Binders, to source the data for calendar entries.
|Auto Handle Date Range|
Enable this option to automatically handle range of calendar events to be populated into the calendar, based on event dates and calendar view format.
If this option is disabled, you need to manually handle date range via #requestParam.start# and #requestParam.end# request parameter hash variables in your datalist binder configuration.
Date format for date range is yyyy-MM-dd.
Figure 2: Sample Calendar Menu in runtime
Figure 3: Column to Data Mappings Properties
|Event ID (column ID)||Defines individual calendar entry IDs, based on each distinct datalist record.|
|Event Title (column ID)||Calendar entry title.|
|All Day (column ID, boolean value)||Expects a true or false value, to determine if the calendar entry is an all day event.|
|From Date (column ID)|
Calendar entry start date value.
|From Time (column ID)|
Calendar entry start time value.
If the From Date value already contains a time value, leave this field empty.
|To Date (column ID)|
Calendar entry end date value.
|To Time (column ID)|
Calendar entry end time value.
If the To Date value already contains a time value, leave this field empty.
You must specify the actual date format used by the From/To Date values.
Date Format in Java is expected here, e.g.: yyyy-MM-dd.
If the date values has a time value, just define the date format only and not the time format.
Because the time format is already handled by the Time Format property.
|Event Url (column ID)||Calendar entry URL.|
|Color (column ID)||Calendar entry CSS color code to style the calendar event.|
|CSS Class (column ID)||Calendar entry CSS class to style the calendar event.|
Any additional data to be added to the calendar entry.
Figure 4: Google Calendar Integration Properties
Configurations to load calendar entries from Google Calendar.
Notes if you want the Calendar Menu plugin to connect to Google Calendar:
Google Calendar API Key
Google Calendar API Key
ID of the calendar syncing with
CSS Custom classes.
Color of the event in the calendar
Figure 5: Events & UI Properties (1)
Figure 6: Events & UI Properties (2)
See sample app here for more info: APP_calendarTest-sample.jwa
In the sample below, upon clicking on a calendar date, it will redirect to an event form and prepopulate a date field with the clicked date.
Time Display Format
Refer to https://fullcalendar.io/docs/date-formatting-string for formats.
Custom Header (HTML)
|Custom header in HTML to show on the top of the calendar.|
Custom Footer (HTML)
|Custom footer in HTML to show on the bottom of the calendar.|
Caching options are:
|Duration (s)||Duration in seconds to cache content, defaults to 20 seconds if applicable.|
Note: PWA Offline support is dependent on the theme used.
|Enable cache for offline support||Enable caching for offline support, usually set for use on mobile browsers.|
Read Progressive Web Application (PWA) for more information.