Custom options

​

Quick Start

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

• data-showdaybuttons="true"
• data-splitschedule="true"
• data-mainschedule="true" or data-mainschedule="false"
• data-default-stage="Main Stage"
• data-label-ticket-button="Buy tickets"
• data-hide-ticket-button="true"

​

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.

​

Option: Default Stage

​

Enable

<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-default-stage="Main Stage"
></div>

​

Behavior

• Default is off.
• When set, the widget loads with that stage selected in the stage filter.
• The value should match the stage name as it appears in the widget.

​

Schedule Item Ticket Links

• scheduleItem.custom_fields.ticketUrl
• scheduleItem.relatedEvent.custom_fields.ticketUrl

​

Option: Ticket Button Label

​

Enable

<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-label-ticket-button="Buy tickets"
></div>

​

Behavior

• The default ticket button label comes from data-lang.
• data-label-ticket-button overrides the translated default.

​

Option: Hide Ticket Button

​

Enable

<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-hide-ticket-button="true"
></div>

​

Behavior

• Default is off.
• When set to true, schedule item ticket buttons are hidden.

​

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.

​

Recommended Usage

• 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>

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