Events

The Event component displays the title, times, and dates for an event. It is used in the EventFeed component, which displays events from the campus calendar.

Anatomy

Usage Guidelines

The Event component may be used anywhere a simple event listing is needed. Event components are not suitable for lengthy descriptions and the title should match only the name of the event. Events may be linked to a page with more details. Displaying the location is optional.

Implementation

This component is available in WordPress as the Event block. It is a UA block maintained by the Division of Strategic Communications. A feed of events from the campus calendar may be embedded using the EventFeed block, also available in WordPress under UA Blocks.

<div class="ua_component_wrapper">
  <article class="ua_event">
    <h3 class=" ua_event_name"><a href="#">Example Event</a></h3>
    <p class="ua_event_date"><span>Mar 30 - May 31 2024</span></p>
    <p class="ua_event_time">
      <span class="fa fa-clock" title="Time" aria-hidden="true"></span>
      <span class="ua_visually-hidden">Time</span>
      8:00 a.m.
      <span>- 2:00 p.m.</span>
    </p>
    <p class="ua_event_location">
      <span
        class="fa fa-location-dot"
        title="Location"
        aria-hidden="true"
      ></span>
      <span class="ua_visually-hidden">Location</span>
      Virtual
    </p>
  </article>
</div>

<Event
  heading_level={3}
  title="Example Event"
  start="2024-03-30 8:00"
  end="2024-05-31 14:00"
  location="Virtual"
  href="#"
/>

React Component Props

heading_level number 1-6 (required)

The heading level of the event title

title string (required)

The name of the event

start string | Date (required)

The start datetime for the event

end string | Date (required)

The end datetime for the event

href string

The link for more details about the event

newTab boolean

Determines if the event link opens in a new tab

location string

The location of the event

className string

Additional classes to add to the component wrapper

Event Feed

<EventFeed
  heading_level={2}
  title="Academic Dates & Deadlines"
  limit={4}
  groupSlug="academic_dates_deadlines"
/>

title string (required)

The title of the event feed

limit number (required)

The max number of events to display

heading_level number 1-5

The heading level for the event feed title

align left | right | center

The alignment for the event feed title and CTA

showLocation boolean

Determines if the location is shown on the event items

maxColumns number

The max number of columns the event feed will use

groupSlug string

The slug of the group to pull events for. See Localist Docs

filters string

Additional filters to apply to the calendar API call. See Localist Docs