...
Image Removed
Image Added
Figure 1: Calendar Menu Properties
...
| Name | Description |
|---|
| id | Menu element unique id. Userview will use this id in the URL for the menu if the Custom ID is empty. |
| Custom ID | Item link slug. Optional field. | Info |
|---|
| Ensure that value defined here is unique to other userview menus in the app, since the first matching/conflicting ID will take precedence in page loading. |
|
| Label | The userview menu label. |
| Page Title | Calendar page title. |
| Data Binder | 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. |
Image Removed
Image Added
Figure 2: Sample Calendar Menu in runtime
Column to Data Mappings
Figure 3: Column to Data Mappings Properties
...
Image Removed
Image Added
FIgure 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.
|
Image Removed
Image Added
Figure 5: Events & UI Properties (1)
Image Added
Figure 6: Events & UI Properties (2)
| Name | Description |
|---|
Event Rendering Callback (Javascript) | Custom Javascript code to execute upon rendering each calendar event. |
Event After Rendering Callback (Javascript) | Custom Javascript code to execute for each calendar event, after it has been rendered. | Code Block |
|---|
| language | js |
|---|
| title | Sample Code to change the event time indicator to a more meaningful value |
|---|
| var fromTime = event.start.format("H:mm").toString();
var toTime = event.end.format("H:mm").toString();
if (fromTime.indexOf("10:00") > -1 && toTime.indexOf("16:20") > -1) {
$(element).find('span.fc-time').text("First Shift --> ");
} |
See sample app here for more info: APP_calendarTest-sample.jwa |
Event After All Rendering Callback (Javascript) | Custom JavaScript code to execute after all rendering of the calendar menu has been completed. 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. | Code Block |
|---|
| $("div.calendar_menu_body td.fc-day").click(function() {
var preferredDefaultTime = "09:00";
var dateFromFieldId = "date_from";
window.location = "calendarViewEditable?" + dateFromFieldId + "="
+ $(this).attr("data-date") + "%20" + preferredDefaultTime;
}); |
|
Event Click Callback (Javascript) | Custom Javascript code to execute when a calendar event is clicked on. | Code Block |
|---|
| title | Sample Code to open up form view in a popup dialog |
|---|
| var popupActionDialog = new PopupDialog("EventFormMenuId?id="+event.id+"&embed=true");
popupActionDialog.init(); |
 Image Added Image Removed
| Code Block |
|---|
| title | Show in JPopup Dialog |
|---|
| var address = "EventFormMenuId?embed=true&id=" + event.id;
JPopup.show("testPopup", address, {}, "View Item", "50%", "50%"); |
Image Removed Image Added |
Time Display Format | Refer to https://fullcalendar.io/docs/date-formatting-string for formats. | Code Block |
|---|
| h(:mm)t //2:12p, 1p
HH:mm //14:12, 13:00
hh(:mm)t //02:12p, 01p |
|
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. |
...
Note: PWA Offline support is dependent on the theme used.
...
