Events

Skill Level: 
Intermediate

Pulling data from the UNL Events system is available with a number of widgets, each with their own styling and interactions.

The events plugin provides a vertically rendered list of upcoming events. The monthwidget plugin provides a tabular month calendar rendering of events for the current month. The events-band plugin provides a horizontal block grid of upcoming events. Each of these plugins work by providing a placeholder element on your page and adding a script to inject the content loaded asynchronously from the events system.

How to Configure the Widgets

All of the events widgets are initialized via JavaScript with the WDN.initializePlugin('plugin-name', {configuration object}) function. A JavaScript object can be passed as the second parameter to customize the widgets.

For example, all of the widgets will use the main UNL calendar by default, but you can use your calendar by passing a url option in the configuration object (the second parameter of the WDN.initializePlugin function). Note that the url option has to be the base URL for your calendar (use https://events.unl.edu/yourcalendar/ and not https://events.unl.edu/yourcalendar/upcoming). For example:

<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('events', {url: 'https://events.unl.edu/yourcalendar/', limit: 5});
  });
</script>

Events Month Widget

Options

  • url
    Type: String
    Default: 'https://events.unl.edu/'

    The URL of the events calendar you'd like to pull from.

  • container
    Type: Selector
    Default: '#monthwidget'

    A CSS selector for loading the widget into.

<div id="monthwidget"></div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('monthwidget');
  });
</script>

Events List Widget

Options

  • url
    Type: String
    Default: 'https://events.unl.edu/'

    The URL of the events calendar you'd like to pull from.

  • title
    Type: String
    Default: ''

    A label to add to the see all link.

  • container
    Type: Selector
    Default: '#wdn_calendarDisplay'

    A CSS selector for loading the widget into.

  • limit
    Type: Integer
    Default: 10

    The maximum number of upcoming events to show.

  • rooms
    Type: Boolean
    Default: false

    A flag to designate if event location rooms should be rendered.

<div id="events"></div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('events', {limit: 5});
  });
</script>

Events Band Widget

Options

  • url
    Type: String
    Default: 'https://events.unl.edu/'

    The URL of the events calendar you'd like to pull from.

  • title
    Type: String
    Default: ''

    A label to add to the see all link. This option is currently unused.

  • container
    Type: Selector
    Default: '#events-band'

    A CSS selector for loading the widget into.

  • limit
    Type: Integer
    Default: 10

    The maximum number of upcoming events to show.

  • rooms
    Type: Boolean
    Default: false

    A flag to designate if event location rooms should be rendered.

<div id="events-band"></div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('events-band', {limit: 6, rooms: true});
  });
</script>
Contributed By: 
IIM