Race Countdown Widgets
Engage your motorsport audience with live countdown timers for every major racing series, including Formula 1, MotoGP, WEC, NASCAR, and more. These lightweight, customizable widgets keep your visitors up-to-date with the next session or race, making your website a go-to destination for race schedules. Simply copy and paste a single line of code to get started. Use of these widgets is free.
Implementation
Add the following code to your website where you want the widget to appear:
<div id="motorsports-calendar-countdown"
data-series="all"
data-theme="light"
data-display="compact"
data-color="#1a1a1a"
data-weather-display="no"
data-weather-bg-color="rgba(0, 0, 0, 0.05)"
data-weather-text-color="inherit"
data-time-size="1.5em"
data-label-size="0.8em"></div>
<script src="https://motorsportscalendar.com/widgets/countdown.js"></script>
Configuration Options
data-series
Property |
Value |
Description |
Series to display events from |
Default value |
all |
Available values |
f1, f2, f3, f1-academy, indycar, indylights, formula-e, wec, lemans, imsa, nascar-cup, nascar-xs, nascar-truck, nascar-euro, super-formula, supergt, dtm, v8supercars, motogp, moto2, moto3, wsbk, wrc, dakar, aslms, intercontinental-gt-challenge, roc |
data-theme
Property |
Value |
Description |
Widget theme |
Default value |
light |
Available values |
light, dark |
data-display
Property |
Value |
Description |
Display style |
Default value |
compact |
Available values |
compact, full |
data-color
Property |
Value |
Description |
Accent color |
Default value |
#1a1a1a |
Available values |
Any valid CSS color |
data-weather-display
Property |
Value |
Description |
Weather display mode for the circuit location |
Default value |
no |
Available values |
no, minimal, full |
data-weather-bg-color
Property |
Value |
Description |
Background color of the weather section |
Default value |
rgba(0, 0, 0, 0.05) for light theme, rgba(255, 255, 255, 0.05) for dark theme |
Available values |
Any valid CSS color |
data-weather-text-color
Property |
Value |
Description |
Text color of the weather section |
Default value |
inherit |
Available values |
Any valid CSS color |
data-time-size
Property |
Value |
Description |
Font size for countdown numbers |
Default value |
1.5em |
Available values |
Any valid CSS font size value |
data-label-size
Property |
Value |
Description |
Font size for countdown labels |
Default value |
0.8em |
Available values |
Any valid CSS font size value |
The widget will take up 100% width of it's parent container. You can adjust the width by wrapping the widget in a div with a specific width.
Please keep in mind that altering the widget in any way to remove the "Powered by MotorsportsCalendar" link is not allowed.
When using weather display features, the widget will automatically include attribution to Open-Meteo as required by their terms of service.
Examples
Dark Theme
Full view
Custom Colors
Weather Display - Minimal
Weather Display - Full
Weather Display with Custom Colors