Table of Contents

Introduction

Definition

English
borderColor	Green
borderWidth	1
titleBGColor	#ddffcc
borderStyle	solid
title

The Calendar Menu displays a records from your preferred datalist as calendar events, in formats of day/week/month calendar view in your Appapp's Userviewuserview.Display your own data records in a calendar day/week/month view format.

For this to work, you

...

must map the form and field

...

IDs that stores the calendar records, into the Calendar plugin properties page.

...

The Calendar Menu

...

also

...

supports Google API to display your

...

preferred country's public holidays

...

in the

...

calendar

...

.
See Google Calendar Integration for more details.

To know more about Calendar Menu, do check out the sample apps here.

Calendar Menu Properties

Configure Calendar Menu

Image Added

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 Removed

Figure 1: Calendar Menu

Image Removed

Figure 2: Properties - General

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

title	Unique field

Value defined here must be unique to the rest of the Userview Menus as the first matching name will be called upon

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

Menu

The userview menu label.

Mandatory field.


Page Title	Calendar page title.
Data Binder

List

See list of

Datalist Binder will be shown to source entries data from

available Datalist Binders, to source the data for calendar entries.
Auto Handle Date Range	Enable this option to

auto

automatically handle

date range or disable to manually use

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 Added

Figure 2: Sample Calendar Menu in runtime

Column to Data Mappings

Image Added

Figure 3: Column to Data Mappings PropertiesImage Removed

Name	Description
Event ID (column ID)	Defines individual calendar entry

ID. Form field ID is expected here.

IDs, based on each distinct datalist record.
Event Title (column ID)	Calendar entry title

. Form field ID is expected here

.
All Day (column ID, boolean value)	Expects a true

/

or false value

is expected. Form field ID is expected here

, to determine if the calendar entry is an all day event.
From Date (column ID)	Calendar entry start date

from

value.

Form field ID is expected here

Info
You can also point to Date Picker form field with time support.

From Time (column ID)

Calendar entry start time

from

value.

Form field ID is expected here

Info
If the From Date value already contains a time value, leave this field empty.

To Date (column ID)

Calendar entry end date

to

value.

Form field ID is expected here

Info
You can also point to Date Picker form field with time support.

To Time (column ID)

Calendar entry end time

to

value.

Form field ID is expected here

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

. Form field ID is expected here

.
Color (column ID)	Calendar entry CSS color code

. Form field ID is expected here.

to style the calendar event.
CSS Class (column ID)	Calendar entry CSS

Class. Form field ID is expected here

class to style the calendar event.

Additional Data

Any additional data to be added to the calendar entry.

...

Advanced

...

Google Calendar Integration

...

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

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.

Events & UI

Image Added

Figure 5: Events & UI Properties

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.

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

title	Sample Code

$("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

linenumberstrue

var popupActionDialog = new PopupDialog("

calendarDisplayForm

EventFormMenuId?id="+event.id+"&embed=true");
popupActionDialog.init();

Image Added

Code Block

title	Show in JPopup Dialog

var address = "EventFormMenuId?embed=true&id=" + event.id;
JPopup.show("testPopup", address, {}, "View Item", "50%", "50%");

Image Added

Time Display Format

Refer to https://fullcalendar.io/docs/date-formatting-string for formats.

Code Block

title	Example

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.

Performance & Offline

Cache Settings

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.

Panel

borderColor	purple
bgColor	#fefaff
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.

PWA Offline Settings

Note:

...

PWA Offline support is dependent on the theme used.

Name	Description
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.

Download Demo App

Calendar Menu App in Joget Marketplace (Note: For Joget Workflow v5 only)
APP_calendarTest-sample.jwa - Sample use of Event After Rendering Callback field

Space shortcuts

Page tree

Versions Compared

Old Version 1

New Version Current

Key

Introduction

Calendar Menu Properties

Configure Calendar Menu

Column to Data Mappings

Image Added

Advanced

Google Calendar Integration

Events & UI

Performance & Offline

Cache Settings

PWA Offline Settings

Download Demo App

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 1

New Version Current

Key

Introduction

Calendar Menu Properties

Configure Calendar Menu

Column to Data Mappings

Image Added

Advanced

Google Calendar Integration

Events & UI

Performance & Offline

Cache Settings

PWA Offline Settings

Download Demo App