Basic structure

The timetable embed is split into smaller, independent pieces called components, which in turn are split into even smaller components. Each component has a unique CSS class, which makes it easy to style them separately.

The main components are:

Date selector

The Date Selector component is visible when your event has multiple dates. Visitors can use this component to switch between dates. On desktop the Date Selector is shown as a Button Bar. On mobile, it switches to a Dropdown menu. You can change this by setting the date-selector-type of the schedule.

Category filter

The Category Filter component shows all categories used by the schedule. Visitors can use this component to filter acts (speakers, talks or artists) by selecting categories. Acts that do not match the selected category are filtered out.

This component will be automatically hidden when no categories have been added to the schedule.

Options

The Options component lets visitors sign in to add favorites, print their schedule or add the schedule to their calendar.

Controls

Visitors can scroll through stages with the control buttons. The Controls are visible on desktop when the data-layout option is set to columns.

In some cases it’s not necessary to show the controls. For example, when your event only has one or two stages. You can easily hide the controls by setting data-hide-controls.

Note: When the schedule is viewed on very large displays, the whole schedule might fit on a single screen. In those cases it’s best to hide the controls with media queries and CSS instead of setting data-hide-controls.

Timetable

A single day of your event is represented by the Timetable component, which consist of a Dashboard, Locations, Activities and Time Indicator component.

If one of your schedule’s dates is the same as today’s date, it’s automatically selected. Also, the Time Indicator will then be visible and scrolled into view. That way, acts that are currently performing will be shown when the schedule is opened. You can disable this by setting data-autoscroll.

Some components, like the Dashboard and Time Indicator, are only visible during the event and difficult to test. However, you can enable them at any time by setting data-testflight.

Dashboard

During the event, the Dashboard component is shown on mobile devices. The component shows acts that are now active, and acts that are coming up next.

You can disable the Dashboard by setting data-hide-dashboard to true.

Location

The Location component represents a single stage of your event. Basically, it’s a list of Activities, sorted by time.

Activity

Acts are represented by the Activity component. Its position and size show the start and duration of the activity and are automatically calculated by the embed.

Selecting an Activity will show the Activity Details component:

Activity details

The Activity Details component is a modal presented when an Activity is selected. It shows all information about the selected act or talk. This includes titles, subtitles, times, descriptions, photos, links and embeds.

Notifications & Alerts

Notifications and Alerts are small modals used to show instructions when a visitor wants to sign in, or to display an an error when something went wrong.

Time indicator

The Time Indicator is only visible during the event and shows, as the name suggests, the current time.

You can test the time indicator by setting the data-testflight option

Trial bar

The Trial bar will remind you that you haven’t upgraded your account yet. And, that your schedule will only be visible to you and your teammates. The Trial bar will disappear once you’ve upgraded your account.