Customisation

Customisations available for the Schedule widget

960960

Customisable elements in the Schedule widget

General

❗️

Mandatory keys

Keys in bold are required

<div class="pa-schedule" data-auth-token="<your embed token>" data-games-code="OWG2018" data-font-size="1.25rem"></div>
<script async src="//olympics-embed.pamedia.io/static/schedule.js" charset="UTF-8"></script>
KeyDescriptionExample
data-auth-tokenThe token used to authorize the embed (note: this is typically only permitted for whitelisted domains)hs6iCFXsTz8ok3sE
data-games-codeA valid Olympics games code; used to filter API callsOWG2018
data-font-familyOne or more comma-separated font familiesHelvetica, Arial, sans-serif
data-font-sizeMain font size; may be any valid CSS size42px or 1.5rem
data-font-colourMain font colour; may be any valid CSS colour, #00ff00, #0f0, green
data-font-weightMain font weight; may be any valid CSS font weight700 or bold
data-start-dateStart date of data displayed in schedule widget2017-02-11

Medals

There are four suites of medal icons for use across both widgets. Within the Schedule widget, your chosen medals can be used within the filter header and against any scheduled medal events

256256
KeyDescriptionExamples
data-medal-icon-typeThe set of medal icons to be used in the widget; may be one of default, inverted, round, or blue-ribboninverted

Navigational header

The navigational header (in the non-country-specific widget) can be customised to change the font size, family and colour. You can also change the background colour of the widget by passing in two separate colours to highlight a gradient or the same colour twice for a block colour. The date format within the navigational header will depend on your users' browser and location as the widget inherits the style of date eg. 'Monday 12 February' can present as 'February 12' etc.

KeyDescriptionExamples
data-header-heightHeight of the header; may be any valid CSS size42px or 1.5rem
data-header-backgroundHeader background colour; may be a valid CSS colour for a solid background, or two comma-separated CSS colours for a gradient, #ff0000 or #300,#foo
data-header-font-colourHeader font colour, #00ff00, #0f0, green
data-header-font-familyHeader font familyHelvetica, Arial, sans-serif
data-header-font-sizeHeader font size2em
data-header-font-weightHeader font weight100

Filter Bar

KeyDescriptionExamples
data-filterbar-backgroundFilter bar background colour; may be any valid CSS colour, #00ff00, #0f0, green
data-filterbar-font-colourFilter bar font colour; may be any valid CSS colour, #ffffff, #fff, white

Body

KeyDescriptionExamples
data-row-backgroundTable row or list item background colour; may be a single valid CSS colour, or two comma-separated CSS colours for alternating odd/even row colourswhite, or #000,#333
data-row-border-colourTable row or list item border colour; may be any valid CSS colour, #00ff00, #0f0, green
data-row-border-widthable row or list item border width; may be any valid CSS size2px

Footer

KeyDescriptionExample
data-footer-font-colourFooter font colour; may be any valid CSS colour, #00ff00, #0f0, green

Configurable to default to a particular country

Pass in a default country and your widget will only display schedule data today for that country. The navigational elements available are only available for the main schedule so a country-specific schedule widget will only ever show the current day (as per the user's browser timezone).

The data that specifies scheduled events for a particular country are often not available until the day before or of the event which is why we remove the ability to navigate to a new day in this widget -
users would see blank schedules!

KeyDescriptionExamples
data-org-codeA valid Olympics country code; when specified the schedule results will be filtered to only return events in which the given country is participatingUSA or JPN

Live Event Indicator

KeyDescriptionExamples
data-live-status-backgroundThe background colour of the 'Live' status indicator in the event listings; may be any valid CSS colour, #00ff00, #0f0, green
data-live-status-font-colourThe font colour of the 'Live' status indicator in the event listings; may be any valid CSS colour, #00ff00, #0f0, green

Having problems?

See our FAQ Page