Calendar Menu

Introduction

1. For this to work, you must map the form and field IDs that stores the calendar records, into the Calendar plugin properties page.
2. 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.

Configure calendar

To configure Calendar properties, in UI Builder, drag and drop the Calendar element onto the canvas and click on it.

When adding Calendar, you will see the following fields available for configuration:

• Label: The UI menu label.
• Menu ID: Item link slug. Optional field.
  Ensure that the value defined here is unique to other UI menus in the app since the first matching/conflicting ID will take precedence in page loading.
• Page Title: Calendar page title.
• Load Data From: See the list of available List Data Store to source the data for calendar entries.
• Auto Handle Date Range: Enable this option to automatically handle the range of calendar events to be populated into the calendar based on event dates and calendar view format.

  If this option is disabled, you must manually handle the date range via the #requestParam.start# and #requestParam.end# request parameter hash variables in your datalist binder configuration.
  The date format for the date range is yyyy-MM-dd.

Column to data mappings

Column Data Mappings defines how data from a source, such as a database or an API, is mapped to the calendar events. Each column in the data source corresponds to a specific aspect of a calendar event, such as the event title, start and end dates, and additional metadata. This mapping allows for dynamic and accurate data representation as calendar entries within the Joget application.

Fields to Configure:

• Event ID (column ID): Define individual calendar entry IDs.
• Event Title (column ID): Calendar entry title.
• All Day (column ID, boolean value): Expect 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.
  You can also point to Date Picker form field with time support.
• From Time (column ID): Calendar entry start time value.
  If the From Date value already contains a time value, leave this field empty.
• To Date (column ID): Calendar entry end date value.
  You can also point to Date Picker form field with time support.
• To Time (column ID): Calendar entry end time value.
  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.

  The expected date format in Java is, for example, yyyy-MM-dd.

  If the date values has a time value, define the date format only and not the time format.
  Because the time format is already handled by the Time Format property.
• Time Format: Choose 24 Hour System or 12 Hour System for time display.
• 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.
  
  • Name
  • Column ID

Advanced

The Advanced settings in the Calendar Menu configuration in Joget include options for Google Calendar integration and event customization. These settings allow users to connect their Joget calendar with Google Calendar, enabling synchronization of events and display of public holidays or other events. Additionally, advanced configurations provide customization options for how events are rendered and interacted with on the UI, using JavaScript callbacks for enhanced functionality.

Google calendar integration

Google Calendar Integration in Joget allows the Calendar Menu to fetch and display events from a Google Calendar. This requires setting up an API key from the Google Developer Console and obtaining the Calendar ID. The integration enables seamless synchronization of events, ensuring that your Joget application can display up-to-date calendar information alongside your other app features.

Fields to Configure:

• Additional Data:
  

  Configurations to load calendar entries from Google Calendar.

  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 the 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 a 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 to 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.
     • For more information, see the Google Calendar API site.
  • Google Calendar API Key: Google Calendar API Key.
  • Calendar ID: ID of the calendar to sync with.
  • CSS Classes: CSS Custom classes.
  • Color: The color of the event in the calendar.

Events & UI

The Events & UI settings in the Calendar Menu configuration allow custom JavaScript code to be executed during various stages of event rendering. These settings include callbacks for event rendering, post-rendering, and event clicks. This enables developers to add custom behaviors and visual enhancements to the calendar events, providing a more interactive and tailored user experience.

Fields to Configure:

• Event Rendering Callback (Javascript): Custom Javascript code to execute upon rendering each calendar event.
• Event After Rendering Callback (Javascript): Custom Javascript code will be executed for each calendar event after it has been rendered.
  For example, 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 --> ");
  }

• Event After All Rendering Callback (Javascript): 

  Custom JavaScript code will be executed after all renderings of the calendar menu have been completed.

  In the sample below, clicking on a calendar date will redirect to an event form and prepopulate a date field with the clicked date.

  $("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.
  For example, code to open up form view in a popup dialog:
  

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

  Show in JPopup Dialog:

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

• Time Display Format: See FullCalendar documentation for formatting options.
  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

The Performance & Offline settings in Joget's Calendar Menu configuration focus on optimizing the loading speed and usability of the calendar, even when offline. These settings include caching options to store data locally, improving performance by reducing server load, and ensuring that the application remains functional without an internet connection. Proper configuration of these settings enhances the overall efficiency and user experience of the Joget application.

Cache Settings

Cache settings in Joget allow you to define how calendar data is cached to improve performance. 

Fields to Configure:

• Scope:
  Options include 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.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

PWA Offline Settings in Joget enable support for Progressive Web Applications (PWAs) by allowing calendar data to be cached for offline use. This is particularly useful for mobile browsers, ensuring that users can access and interact with the calendar even without an internet connection. Configuring these settings enhances the application's accessibility and reliability.

Field to Configure:

• Enable cache for offline support: Enable caching for offline support. This is usually set for mobile browsers. See Progressive Web Application (PWA) documentation for more details.

Download sample app