| Panel |
|---|
| borderColor | Green |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddffcc |
|---|
| borderStyle | solid |
|---|
| title | Definition |
|---|
|
The Calendar Menu displays a day/week/month calendar view in your App's Userview. - Display your own data records in a calendar day/week/month view format. For this to work, you need to map the form and field IDs that stores the calendar records, into the Calendar plugin properties page. You can download a sample calendar app from Joget Marketplace.
- The Calendar Menu plugin can also connect to Google API to display your favorite country's public holidays within the same calendar day/week/month view. You will need a Google Calendar API key for this, more details below.
|
| Panel |
|---|
| borderColor | purple |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddccff |
|---|
| borderStyle | solid |
|---|
| title | New Feature |
|---|
|
This is a new feature in Joget Workflow v6. |
| Info |
|---|
| title | Check out the Sample App |
|---|
|
Check out the sample Calendar Menu App in Joget Marketplace for demonstration. |
Image Added
Figure 1: Calendar Menu
Image Added
Figure 2: Properties - General
| Name | Description |
|---|
| Custom ID | Item link slug. Optional field. | Info |
|---|
| | Value defined here must be unique to the rest of the Userview Menus as the first matching name will be called upon. |
|
| Label | Menu label. Mandatory field. |
| Page Title | Calendar page title |
| Data Binder | List of Datalist Binder will be shown to source entries data from. |
| Auto Handle Date Range | Enable to auto handle date range or disable to manually use #requestParam.start# and #requestParam.end# in your binder configuration. Date format is yyyy-MM-dd. |
Image Added
| Name | Description |
|---|
| Event ID (column ID) | Defines individual calendar entry ID. Form field ID is expected here. |
| Event Title (column ID) | Calendar entry title. Form field ID is expected here. |
| All Day (column ID, boolean value) | true/false value is expected. Form field ID is expected here. |
| From Date (column ID) | Calendar entry date from value. Form field ID is expected here. | Info |
|---|
You can point to Datepicker field with time support. |
|
| From Time (column ID) | Calendar entry time from value. Form field ID is expected here. | Info |
|---|
If you are pointing to the same field as "From Date" above, leave this field empty. |
|
| To Date (column ID) | Calendar entry date to value. Form field ID is expected here. | Info |
|---|
You can point to Datepicker field with time support. |
|
| To Time (column ID) | Calendar entry time to value. Form field ID is expected here. | Info |
|---|
If you are pointing to the same field as "To Date" above, leave this field empty. |
|
| Date Format | Date Format in Java is expected here. e.g. yyyy-MM-dd. | Info |
|---|
You can point to Datepicker field with time support. When you do so, define just the date format here and not the time format. |
|
| Event Url (column ID) | Calendar entry URL. Form field ID is expected here. |
| Color (column ID) | Calendar entry CSS color code. Form field ID is expected here. |
| CSS Class (column ID) | Calendar entry CSS Class. Form field ID is expected here. |
| Additional Data | Additional Data to be added to the calendar entry. |
Image Added
| Name | Description |
|---|
Google Calendar Integration - | 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.
|
Event Rendering Callback (Javascript) | Custom Javascript code. |
Event After Rendering Callback (Javascript) | Custom Javascript code. | Code Block |
|---|
| language | js |
|---|
| title | Sample Code to change the event time indicator to a more meaningful value |
|---|
| linenumbers | true |
|---|
| 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. |
Event Click Callback (Javascript) | Custom Javascript code. | Code Block |
|---|
| title | Sample Code to open up form view in a popup dialog |
|---|
| linenumbers | true |
|---|
| var popupActionDialog = new PopupDialog("calendarDisplayForm?id="+event.id+"&embed=true");
popupActionDialog.init(); |
|
Time Display Format | Refer to https://fullcalendar.io/docs/date-formatting-string for formats. |
| Custom header in HTML to show on the top of the calendar. |
| Custom footer in HTML to show on the bottom of the calendar. |
| Panel |
|---|
| borderColor | purple |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddccff |
|---|
| borderStyle | solid |
|---|
| title | Performance |
|---|
|
You can configure the Performance settings in this Userview Element which allows one to cache existing content for improved performance and loading speed. Read more at Performance Improvement with Userview Caching. |