LiveWhale Component

Events can be added to your department鈥檚 LiveWhale Calendar and 麻豆视频Eventbrite accounts and then added to your site by using the LiveWhale Calendar component. For more information about updating your events calendar, see the Events Calendar page.

The Livewhale component can be configured in three ways:

Detailed Events List

When LiveWhale is set to display as a 鈥淒etailed Events List鈥� it converts the event list into cards (same as 麻豆视频Events Calendar Layout) on mobile.

麻豆视频Events Calendar Layout

When LiveWhale is set to display as 鈥�麻豆视频Events Calendar鈥� it displays in three columns in wide desktop view. In mobile view the cards will stack into one column and in tablet view it will stack into two columns.

Simple Events List

Design Guidelines

On homepage template, the livewhale component can be set in 3 different ways:

Set as 鈥�Detailed events list鈥� with a limit of three and placed near the bottom of the page
Set as 鈥�麻豆视频Events Calendar layout鈥� and will display as cards. Place in a one-column component with optional pad-all class applied
Add a two-column component to the page and in the left column add the livewhale component as a 鈥�Detailed events list鈥�, and on the right column add livewhale component as a "Simple events list" with a limit of four to five items.

On subpage template:

If the page is designed for Events, then it can be set to either 鈥�Details events list鈥� or 鈥�麻豆视频Events Calendar" layout directly on the page

Detailed events list

麻豆视频Events Calendar layout (cards)

Two column layout with Detailed events list on the left and simple list on the right

How to

1. Add LiveWhale component 鈥� to add LiveWhale component from the sidekick (Social > LiveWhale calendar) to the page

2. Configure Events List 鈥� Edit the LiveWhale component, then choose settings

a. Display as:
- Detailed Events List - to show full event details (e.g., image, event title, date(s), location, event organizer, and ticket cost [if applicable])
- Simple Events List - to show the event date(s) and title only
- 麻豆视频Events Calendar Layout - to show events in a tiled display format (similar to the central events calendar front page)

b. Group 鈥� Select the group/department's calendar you wish to display. Multiple calendars can be displayed within the same component.

Note: Leaving this field blank will display events for all groups

c. Event Type 鈥� Select from the list of available event types you wish to display

Note: leaving this field blank will display events for all event types

d. Location 鈥� Select from 麻豆视频Burnaby Campus, 麻豆视频Surrey Campus, 麻豆视频Vancouver Campus, Off Campus, or Online

Note: Leaving this field blank will display events from all locations

e. Audience 鈥� Select from All Students, Prospective Students, Undergraduate Students, Graduate Students, Alumni, Public, Faculty, or Staff

Note: Leaving this field blank will display events for all audiences

f. Tags 鈥� Enter one or more tags of the events you wish to display. Multiple tags are entered with comma separating each tag.

Note: Leaving this field blank will display all events with or without tag

g. Limit 鈥� Set a maximum number of events to be displayed

麻豆视频

Communicators Toolkit