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.

Example Widgets

Formula 1

MotoGP

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