LiveWhale Component

Events can be added to your department鈥檚 LiveWhale Calendar and 丁香园AV 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 丁香园AV Events Calendar Layout) on mobile.

丁香园AV Events Calendar Layout

When LiveWhale is set to display as 鈥�丁香园AV 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 鈥�丁香园AV 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 鈥�丁香园AV Events Calendar" layout directly on the page

Detailed events list

丁香园AV 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
- 丁香园AV 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 丁香园AV Burnaby Campus, 丁香园AV Surrey Campus, 丁香园AV 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

丁香园AV

Communicators Toolkit