Fullcalendar

Fullcalendar

The Calendar Component is a Servoy NG Component. Use the form editor to place the fullcalendar NG Component into your form and use the calendar element's API to initialize the calendar. The component has to be initialized programmatically using the fullcalendar constructor available from the element's API.

NOTE: make sure the calendar component in form has the element name set.

var options = {
        eventSources: [ events: [{ title: "lunch event", start: new Date() }]],
		selectable: true,
		editable: true,
		defaultView: 'agendaWeek',
		showCurrentTimeline: true
}
var calendar = elements.fullcalendarElementName.fullCalendar(options);

Calendar Options

The options object contains the calendar properties; see the fullcalendar docs for available properties. All the properties are optional. Set the eventSources options to feed the calendar with Event Source Objects. Event Sources will populate the calendat with Event objects. Call the FullCalendar constructor for the same element to destroy and recreate the Calendar. Read more about Event and Event Sources at Fullcalendar Events. Fullcalendar options can be found here.

Update Calendar Options

The options height , contentHeight, aspectRatio can be updated at runtime using the calendar's API options.

To update any other of the calendar options call again the fullcalendar constructor to force the calendar to be destroyed and be recreated again with the new options.

Note: when calling the constructor the calendar view will be resetted to the default view ( for example if the user has navigated from Today to a different date as 1st December 2016, if the calendar constructor is called the calendar will re-render itself to Today's date ). To preserve the calendar navigation set to **true **the additional argument renderOnCurrentView of the calendar constructor.

// update the calendar aspect ratio
var calendar = elements.fullcalendarElementName.options(aspectRatio, 2);

// update the the calendar to scroll at 13.00.00
// for such update the calendar has to be destroyed and re-rendered again
// set renderOnCurrentView to true on the constructor to maintain the navigation date and view
var options = elements.fullcalendarElementName.getFullCalendarOptions();
options.scrollTime = "13:00:00";
elements.fullcalendarElementName.fullCalendar(options, true);

The calendar component offers several events handlers. You can register to the calendar events you would like to interact with from the properties view of the form editor.

Fullcalendar Event Details

Fullcalendar events can be found here.

onSelect

The method that is executed when user select any area of the calendar.

onDateClick

The method that is executed when the user clicks on any space of the calendar.

onEventClick

The method that is executed when the user clicks any event object rendered in the calendar.

onEventDrop

The method that is executed when an event is dropped on the calendar.

onEventResize

The method that is executed when an event is resized on the calendar.

Fullcalendar Property Summary

Fullcalendar events can be found here.

styleClass

The name of the style class that should be applied to this component.

tooltipExpression

The text expression to be shown as tooltip when hovering over the calendar events.Use double curly brackets to evaluate {{propertyName}} the event's properties. For non-standard properties, use {{extendedProps.yourPropertyName}}.

Example

This is the event title:{{title}}. The event starts at: {{start}}. Description: {{extendedProps.data.description}}