Events feeds working example

Live events feed

Loading…

Code for example above

Add the events JavaScript to the page:


{% block bottom_js %}{{ parent() }}
<script src="/assets/dist/js/events.min.js"></script>
{% endblock %}

In this case we're not using the loader macro. It's just HTML:


<h2>Live events feed</h2>
<!-- div w/ data attributes -->
<div id="events-container" class="loader-container" aria-live="polite"
        data-events-app {# this is how the JavaScript below knows we want to pull in a events feed #}
        data-q="6" {# get this from Link Pro on the events admin site #}
        data-r="3" {# get this from Link Pro on the events admin site #}
        data-t="182" {# get this from Link Pro on the events admin site #}
        data-target-element-selector="#events-container" {# The element selector for the feed html #}
        data-template-path="/assets/dist/views/cehd/events/" {# The path the the Nunjucks template #}
        data-template-name="index.html" {# The name of the Nunjucks template #}
        data-limit="3" {# How many stories to display #}
    >
    <div class="loader">
        <div class="loader-figure "></div>
        <p class="loader-label">Loading&hellip;</p>
    </div>
</div>

The code explained

The events calendar "Link Pro" sets up query parameters to pull in different feeds. For example, an XML feed will look something like this: http://apps.cehd.umn.edu/events/Admin/XMLFeed.aspx?&r=1&q=6&t=355

t=355 above is the id for the tag we want to use. Thus, the tag id is the first parameter for pulling in events. Likewise for the q and r values.

Including the JavaScript file in the example above enables us to include some parameters in HTML data attributes.

Providing the information in the format above is enough to pull in a category. The data-template-path and data-template-name attributes indicate where the Nunjucks template is. Templates have to be in the public directory so browsers can access them.

That's what will render the list of stories. Here's what that template looks like:


{% if data.events|length > 0 %}
    <dl class="events">
    {% for event in data.events %}
        {% if loop.index0 < data.limit %}
            <dt class="event-date">{{ event.dayOfWeek }}, {{ event.fullMonth }} {{ event.day }}, {{ event.year }}</dt>
            <dd class="event-title">
                <a href="/events/{{ event.id }}/">{{ event.title }}</a>
            </dd>
        {% endif %}
    {% endfor %}
    </dl>
{% else %}
    <p>There are no upcoming events.</p>
{% endif %}

Events feed data points

The events feed from the events tool gets translated from XML to JSON because JavaScript can work with JSON natively. The JSON is just a set of key/value pairs. E.g., event.day in the template above maps to day in the JSON below:


[
  {
    "date": "3/22/2018",
    "dateTimeEnd": "3/22/2018 7:00 PM",
    "dateTimeStart": "3/22/2018 5:30 PM",
    "description": null,
    "endTime": "7:00 PM",
    "endHour": "07",
    "endMinute": "00",
    "id": "7216",
    "location": "McNamara Alumni Center, University Hall",
    "locationURL": "http://mac-events.org/rooms/university.html",
    "shortDescription": null,
    "startTime": "5:30 PM",
    "startHour": "05",
    "startMinute": "30",
    "title": "CEHD Alumni and Undergraduate Networking Reception",
    "url": "http://www.cehd.umn.edu/events/?z=7216&dt=3/22/2018",
    "day": "22",
    "dayOfWeek": "Thursday",
    "month": "3",
    "fullMonth": "March",
    "shortMonth": "Mar",
    "year": "2018",
    "timestampStart": 1517416200,
    "timestampEnd": 1517403600,
    "relatedEventTitle": null,
    "relatedEventURL": null
  }
]

This should help map the data in the feed to a template. Note: even though url is present, it's deprecated.