Arlo

Configuration

You can customize the controller with different configuration options, and you can customize the look and feel of the controller with jQuerUI themes or your own CSS styles.

Field Type Description
platformID string Your platformID in the Arlo system
renderTo string The ID of the element, where the calendar would be placed. Should contain the #
calendarConfig object A configuration object, which will define the behavior of the calendar. 
calendarConfig: {
    header: {
	    left: "prev,next today",
	    center: "title",
	    right: "month,agendaWeek,agendaDay"
    },
    theme: "",
    firstDay: "",
    isRTL: "",
    weekends: "",
    hiddenDays: [],
    fixedWeekCount: "", 
    weekNumbers: "",
    eventLimit: "",
    eventLimitClick: "",
    eventClick: "popup"
}
Field Description
header A configuration for the calendar's header, defines the buttons and the title at the top of the calendar Same as the FullCalendar's header configuration
theme A jQueryUI theme can be used for the calendar Same as the FullCalendar's theme configuration
firstDay The first day of the week Same as the FullCalendar's firstDay configuration
isRTL Displays the calendar in right-to-left mode. Same as the FullCalendar's isRTL configuration
weekends Whether to include Saturday/Sunday columns in any of the calendar views. Same as the FullCalendar's weekends configuration
hiddenDays Exclude certain days-of-the-week from being displayed. Same as the FullCalendar's hiddenDays configuration
fixedWeekCount Determines the number of weeks displayed in a month view. Same as the FullCalendar's fixedWeekCount configuration
weekNumbers Determines if week numbers should be displayed on the calendar. Same as the FullCalendar's weekNumbers configuration
eventLimit Limits the number of events displayed on a day. Same as the FullCalendar's eventLimit configuration
eventLimitClick Determines the action taken when the user clicks on a "more" link created by the eventLimit option. Same as the FullCalendar's eventLimitClick configuration
eventClick Determines the action taken when the user clicks on an event.
"popover"
A popover will be shown with the basic event information and a register button. Bootstrap CSS + JS required
function
A callback function, for executing arbitrary code.
default
As a default, when a user clicks on an event, the browser will be redirected to the event's url at Arlo.
This link can be modified with the eventUrl configuration
filter object An initial filter for the Arlo API call 
filter: {
	city: "",
    citySuburb: "",
    state: "",
    locationName: "",
    tag: "",
    templateCode: "",
    templateTopicCode: "",
    templateTag: "",
    templateCategoryID: "",
    templateID: "",
    presenterID: "",
    eventID: "",
    eventGuid: "",
    venueID: ""	
}
For more information about the usages of the filters, please visit the Arlo Developer site
facetToolbar object | object array With this configuration object we can define different filters for the Arlo API call If this configuration is an array, every new object in the array represents a new toolbar row in the top of the controller 
facetToolbar: [{
    left: "locname(orderby=label)",
    center: "templatecategory",
    right: "keyword"
}],
The property's key can be one of the following:
Key Description
left The filter selector will be placed at the left part of the toolbar
right The filter selector will be placed at the center part of the toolbar
center The filter selector will be placed at the right part of the toolbar
The property's value can be one of the following:
Value Description
EventSearch facet For more information, please visit the Arlo EventSearch facet site. This facet filter can be controlled via the advanced format If the value is the tag or the templatetag, a clickable list of tags will be generated. Bootstrap CSS + JS required
keyword Renders a keyword search input field
deliverymethod Renders a selector for a live online (webinars) event type
timezone Renders a timezone selector
clearfilters Renders a button, which will clear all the filters (reset to the default filter configuration object)
facetSelectCallback function A callback function, which runs after the facet select element is rendered 
facetSelectCallback: function(element) {
    /* Element is a jQuery element 
    of the select element itself */
}
As a first parameter, a jQuery element is passed as a select element itself
showLoading boolean If true, a loading placeholder will be shown when the script queries the Arlo API. Default: true
eventUrl string With this configuration option you can modify the event's url. The string can contain the following placeholders:
eventID
The eventID in the Arlo system
eventName
An SEO friendly url created from the event name
eventUrl: 
"http://www.mysite.co.nz/courses/{eventID}-{eventName}"
speakingurl is required for this functionality. The default value for the event's url is the url in the Arlo's platform.
allowHashNavigation boolean If true, a hash tag will append to the url.
Only one instance of this controller could have this setting. Default: false
eventColoursList string array A list of css classes, which can be used as the colours of the event. Used with conjunction of eventColour. 
.color1 {
    border: 1px solid #3aad42;
    background-color: #3aad42;
}
eventColour object An object, which can be used to define different colors for different events. The colours' name are css classes 
eventColour: {
    key: "auto" | object
}
Where 'key' can be one of the following:
  • eventtemplateid
  • venueid
  • presenterid
If the property's value is set to "auto", the controller randomly choose one of the predefined colors which can be modified by the css or defined with the eventColoursList, based on the key's numeric ID If the property is an object, the object's key is the numeric ID, and the value is the defined css class name 
eventColour: {
    venueid: {
        9027: "color5",
        9069: "color2",
        9109: "color9"
    }
}
datePicker boolean | object If not false, a jQueryUI datepicker will append to the calendar's title.
jQuery UI must be installed If it is an object, the object will pass directly to the jQuery UI's datepicker constructor. Default: false