Arlo

JavaScript add-ons/widgets

List of upcoming events

This control has been deprecated. Please use Arlo Web Controls instead.

The Arlo API can be used to produce a list of event dates for display on your own website in the form of a calendar, or a simple list of events and dates. A common use of this list is as a widget on the homepage of your website to promote your training or events activity.

The list can be a general one of all your upcoming events, or it can be filtered to show only specific events with tags, events in a particular category, city, or filtered by another attribute supported by the API.

This article will guide you through integrating a JavaScript control that will call the API and render a list of events running on dates that match some criteria.

If you want to produce a list with only names of events (not a calendar with dates or duplicates), see the alternative article covering how to add a list of courses/events to your website.

Live demo

Getting started

To quickly get started, download the ZIP (ls-upcoming-events-control.zip) and open the index.htm file in your browser. This file contains all of the code referenced below.

Dependencies

The demo code in this article requires:

  • JQuery 1.11 (it is compatible with JQuery 1.6 or higher if your own site uses an older version of JQuery)
  • Knockout 3.1
  • LearningSource Arlo JavaScript API client (included in the ZIP)

Steps to integrate an event calendar list into your own page

  1. Add container markup (placeholder)

    Add some container markup to your page where you need the events list to appear. The element must contain a data-bind attribute referencing a template element for Knockout to use (see step 4).

                <div class="ls-upcoming-events">
                <h3>Events</h3>
                <div id="ls-upcoming-events-content" data-bind="template: 'ls-upcoming-events-tpl', css: { 'ls-loading': !$data.isReady() }"></div>
            </div>
  2. Add script references

    At the bottom of your page, include references to the two key script files that contain the JavaScript API client, and the main code for producing the event list.

                        <script src="./knockout-3.3.0.js"></script>
                    <script src="./ls-apiclient.min.js"></script>
                    <script src="./ls-upcoming-events-control.js"></script>
  3. Add control init script

    Below the two script references above, add the code below to initialize the control.

    <script defer="defer">
	 jQuery(document).ready(function () {
		    new LS.EventsListControl({
			    platformID: "demo.arlo.co", //TODO: change platformID to point at your own instance
                filter: {
                    templateCode: "MGMT101"
                }
			    maxCount: 6,
                eventsPageUrl: "https://demo.arlo.co/upcoming-events", //TODO: Point at a list of your upcoming events
			    renderTo: "#ls-upcoming-events-content"
	        }).init();
	 });
</script>

    The script example above configures the control to:

    • Point at a platform with ID demo. You should change this to be the ID of your own platform.
    • Show only (filter) events from the template with code MGMT101. If you don't want the list to be filtered (so that it will list all upcoming events), you can remove the filter property completely.
    • Show a maximum of 6 results
    • Render itself into a page element with ID ls-upcoming-events-content.
  4. Add Knockout template

    The Knockout template is a script element (with a known ID referenced in step 1) that contains HTML markup with Knockout binding directives to control how the list markup is generated. This template allows you to completely customise how the list is rendered, including the message that is displayed if there are no available events or if there is an error.

    The code below is just an example, and you are free to completely reformat this template according to your own site's needs. We do recommend it as a good starting point since it contains

    • support for rich snippets for the events to help with Google and Bing search indexing
    • templates for handling empty lists
    • error display from the API

See knockoutjs.com for more information on the binding syntax used in this markup.

<!-- 
    Knockout HTML template for upcoming events. Uses rich snippet markup for Google and Bing 
    See: https://support.google.com/webmasters/answer/164506    
-->
<script id="ls-upcoming-events-tpl" type="text/html">
    <!-- ko if: $data.isReady() -->
        <!-- ko if: $data.success()  -->
            <!-- ko if: $data.responseData() != null && $data.responseData().Count > 0 -->
                <ul class="ls-cf" data-bind="foreach: $data.responseData().Items">
                    <li class="ls-cf" itemscope itemtype="http://data-vocabulary.org/Event">
                        <a class="ls-cf" data-bind="attr: { href: $data.ViewUri, title: $data.Name }">
                            <span class="ls-date">
                                <span class="ls-month" data-bind="text: $root.getMonthAbbreviationText($data.StartDateTime)"></span>
                                <span class="ls-day" data-bind="text: $root.getDayText($data.StartDateTime)"></span>
                            </span>
                            <span class="ls-event-info">
                                <span class="ls-name" data-bind="text: $data.Name"></span>
                                <span class="ls-location" data-bind="with: $data.Location">
                                    <span data-bind="text: $data.Name"></span>
                                </span>
                            </span>
                        </a>
                        <!-- Start rich snippet tags -->
                        <meta itemprop="summary" data-bind="attr: { content: $data.Name }" />
                        <meta itemprop="url" data-bind="attr: { content: $data.ViewUri }" />
                        <meta itemprop="offers" data-bind="attr: { content: $data.ViewUri }" />
                        <meta itemprop="startDate" data-bind="attr: { content: $data.StartDateTime }" />
                        <meta itemprop="endDate" data-bind="attr: { content: $data.EndDateTime }" />
                        <!-- ko with: $data.Location -->
                            <!-- ko if: $data.VenueName -->
                            <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
                                <meta itemprop="name" data-bind="attr: { content: $data.VenueName }" />
                                <!-- ko if: $root.getStreetAddress($data) != null --><span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"><meta itemprop="street-address" data-bind="attr: { content: $root.getStreetAddress($data) }" /><meta itemprop="locality" data-bind="attr: { content: $data.City }" /><meta itemprop="region" data-bind="attr: { content: $data.Country }" /></span><!-- /ko -->
                                <!-- ko if: $data.PointLatitude && $data.PointLongitude --><span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"><meta itemprop="latitude" data-bind="attr: { content: $data.PointLatitude }" /><meta itemprop="longitude" data-bind="attr: { content: $data.PointLongitude }" /></span><!-- /ko -->
                            </span>
                            <!-- /ko -->
                            <!-- ko ifnot: $data.VenueName --><meta itemprop="location" data-bind="attr: { content: $data.Name }" /><!-- /ko -->
                        <!-- /ko -->
                        <!-- End rich snippet tags -->
                    </li>
                </ul>
                <!-- ko if: $data.eventsPageUrl != null -->
                    <div class="ls-view-more"><a href="#" data-bind="attr: { href: $data.eventsPageUrl }">View more</a></div>
                <!-- /ko -->
            <!-- /ko -->
            <!-- ko if: $data.responseData().Count === 0 -->
                <div class="ls-empty"><p>Check back soon for information about our events!</p></div>
            <!-- /ko -->
        <!-- /ko -->
        <!-- ko ifnot: $data.success() -->
            <div class="ls-error">
                <p>Event information is not currently available.</p>
                <p>Please <a href="#" class="ls-refresh" data-bind="click: $data.refresh">try again</a> in a few moments.</p>
                <div data-bind="if: $data.showErrorDetail && $data.errorInfo != null">
                    <p class="ls-error-detail"><span data-bind="text: $data.errorInfo.code"></span> - <span data-bind="text: $data.errorInfo.message"></span></p>
                </div>
            </div>
        <!-- /ko -->
    <!-- /ko -->
</script>

The attached ZIP contains a complete example of the steps outlined above. Download this file and open the index.htm file in your browser.