Skip to main content

Festivals Widget Custom Options

This guide documents the current custom options for the festivals widget and how they work together.

Quick Start​

Base embed:

<div id="bc-widget" data-venue="YOUR_VENUE_ID"></div>

Optional custom options:

  • data-showdaybuttons="true"
  • data-splitschedule="true"
  • data-mainschedule="true" or data-mainschedule="false"

Option: Show Day Buttons​

Enable​

<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-showdaybuttons="true"></div>

Behavior​

  • Default is off.
  • Day buttons are shown only when data-showdaybuttons="true" is set.
  • Day buttons are shown only when there are at least 2 unique days in the schedule.
  • Day filter works together with schedule split/main filtering.

CSS Classes For Day Labels​

  • .bcfw-settings-day-buttons-wrapper
  • .bcfw-settings-day-label
  • .bcfw-settings-day-label-name
  • .bcfw-settings-day-label-date
  • .bcfw-settings-day-label-month
  • .bcfw-settings-tab-button
  • .bcfw-settings-tab-button-active

Example CSS​

/* Optional: scope styles to this widget instance */
#bc-widget .bcfw-settings-day-buttons-wrapper {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#bc-widget .bcfw-settings-day-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

#bc-widget .bcfw-settings-day-label-name {
    font-weight: 600;
    text-transform: capitalize;
}

#bc-widget .bcfw-settings-day-label-date {
    font-size: 1.05em;
    font-weight: 700;
}

#bc-widget .bcfw-settings-day-label-month {
    font-size: 0.85em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Selected/active day button */
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-name,
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-date,
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-month {
    color: inherit;
}

Option: Split Schedule​

Enable​

<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-splitschedule="true"></div>

Behavior​

  • Default is off.
  • When enabled, the widget shows tabs for:
    • All
    • Festival (isMainSchedule === true)
    • Conference (isMainSchedule === false)
  • Filtering is done client-side by tab selection.
  • By defaut the labels are in English, but can be changed to Norwegian by using the data-lang="no" attribute. Custom labels per festival can be configured on request.

Option: Main Schedule​

Enable​

<!-- Show only main schedule events -->
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-mainschedule="true"></div>
<!-- Show only non-main schedule events -->
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-mainschedule="false"></div>

Behavior​

  • If data-mainschedule is omitted, no main-schedule filtering is applied.
  • If set to true, only isMainSchedule === true events are shown.
  • If set to false, only isMainSchedule === false events are shown.

How splitSchedule And mainSchedule Work Together​

Rule Of Precedence​

  • If data-splitschedule="true":
    • Split tabs are used.
    • data-mainschedule is effectively ignored for initial filtering.
    • Users can switch between All, Festival, and Conference.
  • If data-splitschedule is not true:
    • data-mainschedule (if provided) is applied directly as a filter.
  • Use splitSchedule when you want users to switch between views.
  • Use mainSchedule when you want a fixed single view.
  • Avoid setting both unless you intentionally want split tabs to take priority.

Combined Example​

<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-splitschedule="true"
    data-showdaybuttons="true"
></div>

In this setup:

  • User can switch All / Festival / Conference.
  • Day buttons update based on the currently selected tab.