Versions Compared

Old Version 2

changes.mady.by.user Ricy

Saved on

compared with

New Version 3

changes.mady.by.user Mohamed Elorbany

Saved on

Key

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

...

Calendar Menu Properties

Configure Calendar Menu

Image RemovedImage Added

Figure 1: Calendar Menu Properties


userview the 
NameDescription
idMenu element unique id. Userview will use this id in the URL for the menu if the Custom ID is empty.
LabelThe userview menu label.
Menu Custom ID

Item link slug. Optional field.

Info
Ensure that value defined here is unique to other
UI menus in the app, since
the first matching/conflicting ID will take precedence in page loading.
LabelThe userview menu label.
Page TitleCalendar page title.
Load Data BinderFrom

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.


Figure 2: Sample Calendar Menu in runtime

...

NameDescription

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
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
titleSample 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
titleSample Code to open up form view in a popup dialog
var popupActionDialog = new PopupDialog("EventFormMenuId?id="+event.id+"&embed=true");
popupActionDialog.init();
Image Removed


 Code Block
titleShow in JPopup Dialog
var address = "EventFormMenuId?embed=true&id=" + event.id;
JPopup.show("testPopup", address, {}, "View Item", "50%", "50%");
Time Display Format
Refer to https://fullcalendar.io/docs/date-formatting-string for formats.
 Code Block
titleExample
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.
...