Events Widgets

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>WDN.initializePlugin('events', {url: 'https://events.unl.edu/yourcalendar/', limit: 5});</script>

Event 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>WDN.initializePlugin('monthwidget');</script>

Event 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="wdn_calendarDisplay"></div>
<script>WDN.initializePlugin('events', {limit: 5});</script>

Event 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" class="bp1-wdn-grid-set-halves bp2-wdn-grid-set-thirds"></div>
<script>WDN.initializePlugin('events-band', {limit: 5});</script>