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.
Contents
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>