Canvas Docs

Conference Programme

Day-tabbed session agenda, or a row of upcoming-event cards, built from the event records. It is shown in the block inserter as Canvas Conference Programme and registered as canvas-core/conference-events.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Conference Programme settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Layout

  • LayoutDefaultDay-Tabbed Agenda

    How the programme is presented: an agenda with one tab per day, or a row of event cards. The settings below are grouped to match, and only the ones the chosen layout uses are read.

    ChoicesDay-Tabbed AgendaEvent Cards

Query

  • Event Category SlugDefaultEmpty

    Only events in this category are shown. Empty shows every event.

  • EventsDefault0

    0 shows every published event in the category.

  • Order ByDefaultMenu Order

    What decides the sequence sessions appear in within a day: the order you arranged them in, when each was published, or the session title.

    ChoicesMenu OrderPublished DateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards.

    ChoicesAscendingDescending

Agenda

  • Tab List IDDefaulttab-9

    The name given to the row of day tabs. Change it only if two agendas share one page, since two things with the same name confuse the browser.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab List ClassesDefaultnav canvas-alt-tabs tabs-alt tabs-bb tabs nav-tabs nav-fill mb-5

    Style classes on the row of day tabs, which is what spreads them evenly across the width and underlines the day being viewed.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Content IDDefaultcanvas-tab-alt-content

    The name given to the area the tabs reveal. As with the tab list, change it only if two agendas share one page.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Content ClassesDefaulttab-content

    Style classes on the area the tabs reveal.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Button ID PrefixDefaultcanvas-tab-

    The day number is appended, e.g. canvas-tab-1.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Pane ID PrefixDefaulttabs-

    The day number is appended, e.g. tabs-1.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Day FormatDefaultjS

    PHP date format for the always-visible part of a tab label.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Month FormatDefaultF

    PHP date format for the part of a tab label that hides on small screens. Empty shows day only.

    Shown when Layout is "Day-Tabbed Agenda"

  • Tab Month ClassesDefaultd-none d-md-inline-block

    Style classes on the month part of a tab label. The default hides it on small screens, where there is only room for the day.

    Shown when Layout is "Day-Tabbed Agenda"

  • Agenda List ClassesDefaultrow dark mb-0

    Style classes on the list of sessions for a day.

    Shown when Layout is "Day-Tabbed Agenda"

  • Time Column ClassesDefaultcol-sm-3

    Style classes on the column holding the time of a session, which is what sets how wide that column is.

    Shown when Layout is "Day-Tabbed Agenda"

  • Session Column ClassesDefaultcol-sm-9

    Style classes on the column holding the session itself, beside the time.

    Shown when Layout is "Day-Tabbed Agenda"

  • Time ClassesDefaultschedule-time font-primary

    Style classes on the time of a session, which is what sets it in the heading typeface.

    Shown when Layout is "Day-Tabbed Agenda"

  • Session ClassesDefaultschedule-desc

    Style classes on the session title and its details.

    Shown when Layout is "Day-Tabbed Agenda"

  • Organizer PrefixDefault-

    Printed, followed by a space, before the organizer name under a session title.

    Shown when Layout is "Day-Tabbed Agenda"

  • Link Session TitlesDefaultOff

    Links each session title to its own event page.

    Shown when Layout is "Day-Tabbed Agenda"

  • Organizer Link TextDefaultView Map

    Button shown beside a session that carries an organizer URL. Empty hides it.

    Shown when Layout is "Day-Tabbed Agenda"

  • Organizer Link ClassesDefaultbutton ls-1 text-uppercase fw-semibold button-small button-black button-dark bg-dark mt-2 mt-sm-0 float-none float-sm-right

    Style classes on that button, which is what draws it small and dark and floats it to the right once there is room.

    Shown when Layout is "Day-Tabbed Agenda"

  • Session Split-Row ClassesDefaultrow justify-content-between align-items-center

    Style classes on the row that puts the session details and the organizer button at opposite ends of the same line.

    Shown when Layout is "Day-Tabbed Agenda"

  • Split-Row Text Column ClassesDefaultcol-sm-9

    Style classes on the details side of that split row.

    Shown when Layout is "Day-Tabbed Agenda"

  • Split-Row Button Column ClassesDefaultcol-sm-3

    Style classes on the button side of that split row.

    Shown when Layout is "Day-Tabbed Agenda"

Cards

  • Cards Row ClassesDefaultrow align-items-stretch mt-3

    Style classes on the row that holds the cards. The default makes every card in a row the same height.

    Shown when Layout is "Event Cards"

  • Card Column ClassesDefaultcol-md-4 mb-3

    Style classes on the column each card sits in. This is what decides how many cards fit across the row at each screen width.

    Shown when Layout is "Event Cards"

  • Card ClassesDefaultcard dark

    Style classes on the card itself. The default switches its text to the light treatment, which is what the strong background colours need.

    Shown when Layout is "Event Cards"

  • Card Body ClassesDefaultcard-body

    Style classes on the padded area inside a card.

    Shown when Layout is "Event Cards"

  • Card Background ColoursDefault#FB6567,#F3317A,#EC008B

    Comma-separated colours cycled across the cards. Empty leaves cards unstyled.

    Shown when Layout is "Event Cards"

  • Card Title TagDefaultH4

    Which heading level a card title uses, so the programme fits the outline of the page around it. The look is set by the classes below, not by this.

    ChoicesH2H3H4H5H6Shown when Layout is "Event Cards"

  • Card Title ClassesDefaultmb-4 font-body fw-normal h5

    Style classes on the card title, which is what sets its size and weight whatever heading level it uses.

    Shown when Layout is "Event Cards"

  • Card Meta Row ClassesDefaultd-flex flex-wrap justify-content-between

    Row holding the card date. Empty prints the date without a wrapper.

    Shown when Layout is "Event Cards"

  • Card Date TagDefaultH5

    Which element carries the date on a card. Choose a paragraph or a span where the date is a detail rather than a heading in the page outline.

    ChoicesH3H4H5H6PSpanShown when Layout is "Event Cards"

  • Card Date ClassesDefaultfont-body mb-0 text-uppercase ls-1

    Style classes on the date, which is what sets it in spaced capitals in the body typeface.

    Shown when Layout is "Event Cards"

  • Card Date PrefixDefault-

    Printed immediately before the date, followed by a space. Clear it for a date with nothing in front of it.

    Shown when Layout is "Event Cards"

  • Card Date FormatDefaultjS F, Y

    PHP date format used for the card date.

    Shown when Layout is "Event Cards"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Events: Event Archive Grid, Event Categories, Event Content, Event Date, Event Excerpt, Event Image.

Was this page helpful?