...
Figure 5: Events & UI Properties
...
Event Rendering Callback (Javascript)
...
Figure 5: Events & UI Properties
...
Event After Rendering Callback (Javascript)
...
Custom Javascript code to execute for each calendar event, after it has been rendered.
| Code Block | ||||
|---|---|---|---|---|
| ||||
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 | ||
|---|---|---|
| ||
$("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 | ||
|---|---|---|
| ||
var popupActionDialog = new PopupDialog("EventFormMenuId?id="+event.id+"&embed=true");
popupActionDialog.init(); |
| Code Block | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
h(:mm)t //2:12p, 1p
HH:mm //14:12, 13:00
hh(:mm)t //02:12p, 01p |
...
Custom Header (HTML)
...
Custom Footer (HTML)
...
Performance & Offline
Cache Settings
...