Versions Compared

Old Version 6

changes.mady.by.user Justin

Saved on

compared with

New Version 7

changes.mady.by.user Justin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Introduction

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

  1. Display your own data records in a calendar day/week/month view format. For this to work, you need to must map the form and field IDs IDs that stores the calendar records, into the Calendar plugin properties page. You can download a sample calendar app from Joget Marketplace.

  2. The Calendar Menu plugin can also connect to supports Google API to display your favorite preferred country's public holidays within in the same calendar day/week/month view.
    You will need a Google Calendar API key for this, more details below.

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

Image Removed

Figure 1: Calendar Menu

Image Removed

...

Calendar Menu Properties

Configure Calendar Menu

NameDescriptionScreens (Click to view)
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.

Image Added

Figure 1: Calendar Menu Properties


Image Added

Figure 2: Sample Calendar Menu in runtime

LabelThe userview menu label.
Page TitleCalendar page title.
Data Binder

List See list of Datalist Binder will be shown to source entries data fromavailable 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 date range automatically, or disable to manually use #requestParam.start# and #requestParam.end# request parameter hash variables in your datalist binder configuration.

Default Date format for date format range is yyyy-MM-dd.

...

Column to Data Mappings

NameDescriptionScreens (Click to view)
Event ID (column ID)Defines individual calendar entry ID. Form field ID is expected here.IDs, based on each distinct datalist record.

Image Added

Figure 3: Column to Data Mappings Properties

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 Datepicker 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 you are pointing to the same field as "From Date" above 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 Datepicker 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 you are pointing to the same field as "To Date" above 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

You can point to Datepicker field with time support. When you do so, define just If the date values has a time value, just define the date format here and not the time 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 hereto style the calendar event.
CSS Class (column ID)Calendar entry CSS Class. Form field ID is expected hereclass to style the calendar event.
Additional DataAdditional Data Any additional data to be added to the calendar entry.

...

Advanced

Google Calendar Integration

Google Calendar Integration -
NameDescription
Additional Data

Configurations to load calendar entries from Google Calendar.

Notes if you want the Calendar Menu plugin to connect to Google Calendar

  1. 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.
  2. 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 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
languagejs
titleSample Code to change the event time indicator to a more meaningful value
linenumberstrue
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.
Event Click Callback (Javascript)

Custom Javascript code to execute when a calendar event is clicked on.

Code Block
titleSample Code to open up form view in a popup dialog
linenumberstrue
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 (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.

...