...
Figure 2: Sample Calendar Menu in runtime
Column to Data Mappings
Figure 3: Column to Data Mappings Properties
...
| Name | Description |
|---|
| 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. | Info |
|---|
You can also point to Date Picker form field with time support. |
|
| From Time (column ID) | Calendar entry start time value. | Info |
|---|
If the From Date value already contains a time value, leave this field empty. |
|
| To Date (column ID) | Calendar entry end date value. | Info |
|---|
You can also point to Date Picker form field with time support. |
|
| To Time (column ID) | Calendar entry end time value. | Info |
|---|
If the To Date value already contains a time value, leave this field empty. |
|
| Date Format | 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. | Info |
|---|
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. |
|
| Time Format | Available options: - 24 Hour System (e.g: 18:00)
- 12 Hour System (e.g: 6:00 PM)
|
| 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. |
| Additional Data | Any additional data to be added to the calendar entry. |
Image Removed
Image Added
Figure 4: Google Calendar Integration Properties
...
| Name | Description |
|---|
Additional Data | Configurations to load calendar entries from Google Calendar. Notes if you want the Calendar Menu plugin to connect to Google Calendar: - Every request your application sends to the Google Calendar API must include an authorization token.
The token also identifies your application to Google.
Here are the steps to obtain the Google Calendar API Key: - Go to the Google Developer Console and create a new project (it might take a second).
- Once in the project, go to APIs & auth > APIs on the sidebar.
- Find "Calendar API" in the list and turn it ON.
- On the sidebar, click APIs & auth > Credentials.
- In the "Public API access" section, click "Create new Key".
- Choose "Browser key".
- If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
- Your new API key will appear. It might take second or two before it starts working.
- Copy and paste your API key into the Calendar menu properties "Configure Calendar Menu>Data Binder>Advanced" page.
- Steps to enable your Google Calendar to be public:
- In the Google Calendar interface, locate the "My calendars" area on the left.
- Hover over the calendar you need and click the downward arrow.
- A menu will appear. Click "Calendar Settings".
- Check "Make this calendar public".
- Make sure "Share only my free/busy information" is unchecked.
- Click "Save".
- Obtain your Google Calendar's ID:
- In the Google Calendar interface, locate the "My calendars" area on the left.
- Hover over the calendar you need and click the downward arrow.
- A menu will appear. Click "Calendar settings".
- In the "Calendar Address" section of the screen, you will see your Calendar ID. It will look something like "abcd1234@group.calendar.google.com".
- Copy and paste your API key into the Calendar menu properties "Configure Calendar Menu>Data Binder>Advanced" page.
- You can read more at Google Calendar API site.
|
Google Calendar API Key | Google Calendar API Key |
Calendar ID | ID of the calendar syncing with |
CSS Classes | CSS Custom classes. |
Color | Color of the event in the calendar |
Figure 5: Events & UI Properties (1)
...
Image Added
Name | Description |
|---|
| Scope | Caching options are: - None: No caching.
- Application: Cache content by application where all users will see the same content.
- User: Cache by username.
|
| Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
...
Note: PWA Offline support is dependent on the theme used.
Image Added
Name | Description |
|---|
| Enable cache for offline support | Enable caching for offline support, usually set for use on mobile browsers. |
...
