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:
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.
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.
Visitors can scroll through stages with the control buttons. The Controls are visible on desktop when the
data-layout option is set to
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
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
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
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
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
The Location component represents a single stage of your event. Basically, it’s a list of Activities, sorted by time.
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:
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.
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
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.