LiveWhale Component

Events can be added to your department’s LiveWhale Calendar and SFU 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 “Detailed Events List” it converts the event list into cards (same as SFU Events Calendar Layout) on mobile.

SFU Events Calendar Layout

When LiveWhale is set to display as “SFU 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 “SFU 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 “SFU Events Calendar" layout directly on the page

Detailed events list

SFU 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
- SFU 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 SFU Burnaby Campus, SFU Surrey Campus, SFU 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