Arlo Calendar Control

The Arlo JS Calendar Control is calendar controller for the Arlo event management system. It was built with Adam Shaw's FullCalendar and jQuery, so it's easy to implement, easy to use and easy to configure.

Please note: The maximum number of records returned by any single request made by the Arlo Calendar Control is 200. When the user navigates to the next month view or applies a filter, the control will return the first 200 events matching the filter criteria. Subsequent navigation or filtering will return another batch of up to 200 records.

Contents

• Installation
• Configuration
• Examples

Installation

Include the Arlo Calendar Control in your page

You can download the Arlo Calendar Control library loader and include it in your page, but we suggest you to just refer directly from our fast and reliable CDN with the little code snippet below:

<script src="http://connect.arlocdn.net/calendarcontrol/1.0/init.js" defer></script>
            

Please note that the script above contains the "defer" attribute, which makes sure that initialisation script loads before the init.js file

Include the dependencies

The calendar control requires these libraries be included in your page.

• jQuery 1.9.1 or later
• FullCalendar 2.3.1 or later
  Please note that FullCalendar has a dependency for Moment JS, so you have to include it.

For additional functionality the following libraries are required.

Custom Event URL

• speakingurl 5.0.1 or later

Tag selector

• Bootstrap CSS 3.0.0 or later

Popover

• Bootstrap CSS 3.0.0 or later
• Bootstrap JS 3.0.0 or later

Date Selector

• jQuery UI 1.11.4 or later

Add control containers to your HTML

Place elements on the page where you would like the calendar control to appear.

                <div id="calendar"></div>            
            

Add the Arlo Calendar Control initialisation script

This is where you specify the options for the calendar control and initalise it. The initialisation script should only be run after the Arlo Calendar Control library has fully loaded. To do this, place your initialisation script code inside a document event handler called arlocalendarcontrolloaded.

<script defer="defer">
    document.addEventListener("arlocalendarcontrolloaded", function() {
        var calendar = new LS.CalendarControl({
            platformID: "demo",
            renderTo: "#calendar",
            eventUrl: "http://demo.arlo.co/events/?object_post_type=event&arlo_id={templateID}"
        }).init();
    });
</script>