Search

Scales Options

Time and Scales

Customize date and time formats at each zoom level.

Scales Options
View live example →

Use the controls below the timeline to change the styling and formatting of dates and times in the scale.

Different zoom levels and scale wrapping options will show the formats defined in dateTimeFormats.

See also:

import { createTimeline } from "kronograph";
import localesData from "./data";

const timeline = createTimeline("my-timeline");

const timelineOptions = {
  scales: {
    showAtTop: false,
    showAtBottom: true,
    textColor: "#f5f7fa",
    wrapping: "year",
  },
};

timeline.options(timelineOptions);

function handleSelectOption(id, setOptionFn) {
  document.getElementById(id).addEventListener("change", (e) => {
    const { value } = e.target;
    // Update the timelineOptions object with the user's selection and pass it to the Timeline's options function
    setOptionFn(value);
    timeline.options(timelineOptions);
  });
}

handleSelectOption("locale-select", (value) => {
  const { dateTimeFormats, dateTimeNames } = localesData[value];
  timelineOptions.scales = { ...timelineOptions.scales, dateTimeFormats, dateTimeNames };
});

handleSelectOption("wrapping-select", (value) => {
  timelineOptions.scales.wrapping = value;
});

handleSelectOption("scale-color-select", (value) => {
  timelineOptions.scales.textColor = value;
});

handleSelectOption("scale-position-select", (value) => {
  timelineOptions.scales.showAtBottom = value === "bottom" || value === "both";
  timelineOptions.scales.showAtTop = value === "top" || value === "both";
});
export default {
  czech: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d. MMMM yyyy",
      dateNoYear: "d. MMMM",
      dateNoYearTimeSeconds: "d. MMMM  HH:mm:ss",
      dateTimeSeconds: "d. MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d.  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      fullMonth: "MMMMM",
      fullMonthYear: "MMMMM yyyy",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "leden",
        "únor",
        "březen",
        "duben",
        "květen",
        "červen",
        "červenec",
        "srpen",
        "září",
        "říjen",
        "listopad",
        "prosinec",
      ],
      fullMonthNamesInDate: [
        "ledna",
        "února",
        "března",
        "dubna",
        "května",
        "června",
        "července",
        "srpna",
        "září",
        "října",
        "listopadu",
        "prosince",
      ],
      shortMonthNames: [
        "led",
        "úno",
        "bře",
        "dub",
        "kvě",
        "čvn",
        "čvc",
        "srp",
        "zář",
        "říj",
        "lis",
        "pro",
      ],
      fullDayOfWeekNames: ["neděle", "pondělí", "úterý", "středa", "čtvrtek", "pátek", "sobota"],
      shortDayOfWeekNames: ["ne", "po", "út", "st", "čt", "pá", "so"],
    },
  },
  english: {
    dateTimeFormats: {},
    dateTimeNames: {},
  },
  german: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d. MMMM yyyy",
      dateNoYear: "d. MMMM",
      dateNoYearTimeSeconds: "d. MMMM  HH:mm:ss",
      dateTimeSeconds: "d. MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d.  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember",
      ],
      fullMonthNamesInDate: [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember",
      ],
      shortMonthNames: [
        "Jan",
        "Feb",
        "Mär",
        "Apr",
        "Mai",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Okt",
        "Nov",
        "Dez",
      ],
      fullDayOfWeekNames: [
        "Sonntag",
        "Montag",
        "Dienstag",
        "Mittwoch",
        "Donnerstag",
        "Freitag",
        "Samstag",
      ],
      shortDayOfWeekNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    },
  },
  french: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d MMMM yyyy",
      dateNoYear: "d MMMM",
      dateNoYearTimeSeconds: "d MMMM  HH:mm:ss",
      dateTimeSeconds: "d MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "janvier",
        "février",
        "mars",
        "avril",
        "mai",
        "juin",
        "juillet",
        "août",
        "septembre",
        "octobre",
        "novembre",
        "décembre",
      ],
      fullMonthNamesInDate: [
        "janvier",
        "février",
        "mars",
        "avril",
        "mai",
        "juin",
        "juillet",
        "août",
        "septembre",
        "octobre",
        "novembre",
        "décembre",
      ],
      shortMonthNames: [
        "janv.",
        "févr.",
        "mars",
        "avr.",
        "mai",
        "juin",
        "juil.",
        "août",
        "sept.",
        "oct.",
        "nov.",
        "déc.",
      ],
      fullDayOfWeekNames: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
      shortDayOfWeekNames: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
    },
  },
  hebrew: {
    dateTimeFormats: {
      date: "\u202bd MMMM yyyy",
      dateNoYear: "\u202bd MMMM",
      dateNoYearTimeSeconds: "\u202bd MMMM  HH:mm:ss",
      dateTimeSeconds: "\u202bd MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "\u202bd  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "\u202bdddd  HH:mm:ss",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss.f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "ינואר",
        "פברואר",
        "מרץ",
        "אפריל",
        "מאי",
        "יוני",
        "יולי",
        "אוגוסט",
        "ספטמבר",
        "אוקטובר",
        "נובמבר",
        "דצמבר",
      ],
      fullMonthNamesInDate: [
        "ינואר",
        "פברואר",
        "מרץ",
        "אפריל",
        "מאי",
        "יוני",
        "יולי",
        "אוגוסט",
        "ספטמבר",
        "אוקטובר",
        "נובמבר",
        "דצמבר",
      ],
      shortMonthNames: [
        "ינו׳",
        "פבר׳",
        "מרץ",
        "אפר׳",
        "מאי",
        "יוני",
        "יולי",
        "אוג׳",
        "ספט׳",
        "אוק׳",
        "נוב׳",
        "דצמ׳",
      ],
      fullDayOfWeekNames: [
        "יום ראשון",
        "יום שני",
        "יום שלישי",
        "יום רביעי",
        "יום חמישי",
        "יום שישי",
        "יום שבת",
      ],
      shortDayOfWeekNames: ["יום א׳", "יום ב׳", "יום ג׳", "יום ד׳", "יום ה׳", "יום ו׳", "שבת"],
    },
  },
  japanese: {
    dateTimeFormats: {
      date: "yyyy年M月d日",
      dateNoYear: "M月d日",
      dateNoYearTimeSeconds: "M月d日 H時m分s秒",
      dateTimeSeconds: "yyyy年M月d日 H時m分s秒",
      dayOfMonthTimeSeconds: "d日  H時m分s秒",
      fullDayOfWeekTimeSeconds: "dddd H時m分s秒",
      fullMonth: "M月",
      fullMonthYear: "yyyy年M月",
      shortMonth: "M月",
      time: "H時m分",
      timeSeconds: "H時m分s秒",
      timeSecondsTenths: "H時m分s.f秒",
      year: "yyyy年",
    },
    dateTimeNames: {
      fullMonthNames: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      fullMonthNamesInDate: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      shortMonthNames: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      fullDayOfWeekNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
      shortDayOfWeekNames: ["日", "月", "火", "水", "木", "金", "土"],
      ampmNames: ["午前", "午後"],
    },
  },
};
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
  </head>
  <body>
    <div class="story">
      <div class="story__timeline" id="my-timeline"></div>
      <div class="story__controls story__controls--row">
        <div class="stack">
          <div class="story__controls__item">
            <label for="locale-select" class="flex-2">Locale</label>
            <select id="locale-select" class="select">
              <option value="czech">Czech</option>
              <option value="english" selected>English</option>
              <option value="french">French</option>
              <option value="german">German</option>
              <option value="hebrew">Hebrew</option>
              <option value="japanese">Japanese</option>
            </select>
          </div>
          <div class="story__controls__item">
            <label for="wrapping-select" class="flex-2">Wrapping</label>
            <select id="wrapping-select" class="select">
              <option value="day">Day</option>
              <option value="week">Week</option>
              <option value="month">Month</option>
              <option value="year" selected>Year</option>
              <option value="off">Off</option>
            </select>
          </div>
        </div>
        <div class="stack">
          <div class="story__controls__item">
            <label for="scale-color-select">Color</label>
            <select id="scale-color-select" class="select">
              <option value="#f5f7fa" selected>White</option>
              <option value="#68d391">Green</option>
              <option value="#90cdf4">Blue</option>
            </select>
          </div>
          <div class="story__controls__item">
            <label for="scale-position-select">Position</label>
            <select id="scale-position-select" class="select">
              <option value="top">Top</option>
              <option value="bottom" selected>Bottom</option>
              <option value="both">Both</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import localesData from "./data";

export const Demo = () => {
  const [locale, setLocale] = useState("english");
  const [wrapping, setWrapping] = useState("year");
  const [scaleColor, setScaleColor] = useState("#f5f7fa");
  const [scaleTop, setScaleTop] = useState(false);
  const [scaleBottom, setScaleBottom] = useState(true);

  const { dateTimeNames, dateTimeFormats } = localesData[locale];
  const options = {
    scales: {
      dateTimeFormats,
      dateTimeNames,
      showAtBottom: scaleBottom,
      showAtTop: scaleTop,
      textColor: scaleColor,
      wrapping,
    },
  };

  return (
    <div className="story">
      <Timeline className="story__timeline" options={options} />

      <div className="story__controls story__controls--row">
        <div className="stack">
          <div className="story__controls__item">
            <label htmlFor="locale-select" className="flex-2">
              Locale
            </label>
            <select
              id="locale-select"
              className="select"
              value={locale}
              onChange={(e) => {
                setLocale(e.target.value);
              }}
            >
              <option value="czech">Czech</option>
              <option value="english">English</option>
              <option value="french">French</option>
              <option value="german">German</option>
              <option value="hebrew">Hebrew</option>
              <option value="japanese">Japanese</option>
            </select>
          </div>
          <div className="story__controls__item">
            <label htmlFor="wrapping-select" className="flex-2">
              Wrapping
            </label>
            <select
              id="wrapping-select"
              className="select"
              value={wrapping}
              onChange={(e) => {
                setWrapping(e.target.value);
              }}
            >
              <option value="day">Day</option>
              <option value="week">Week</option>
              <option value="month">Month</option>
              <option value="year">Year</option>
              <option value="off">Off</option>
            </select>
          </div>
        </div>
        <div className="stack">
          <div className="story__controls__item">
            <label htmlFor="scale-color-select">Color</label>
            <select
              id="scale-color-select"
              className="select"
              defaultValue="#f5f7fa"
              onChange={(e) => {
                setScaleColor(e.target.value);
              }}
            >
              <option value="#f5f7fa">White</option>
              <option value="#68d391">Green</option>
              <option value="#90cdf4">Blue</option>
            </select>
          </div>
          <div className="story__controls__item">
            <label htmlFor="scale-position-select">Position</label>
            <select
              id="scale-position-select"
              className="select"
              defaultValue="bottom"
              onChange={(e) => {
                const { value } = e.target;
                setScaleTop(value === "top" || value === "both");
                setScaleBottom(value === "bottom" || value === "both");
              }}
            >
              <option value="top">Top</option>
              <option value="bottom">Bottom</option>
              <option value="both">Both</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  czech: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d. MMMM yyyy",
      dateNoYear: "d. MMMM",
      dateNoYearTimeSeconds: "d. MMMM  HH:mm:ss",
      dateTimeSeconds: "d. MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d.  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      fullMonth: "MMMMM",
      fullMonthYear: "MMMMM yyyy",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "leden",
        "únor",
        "březen",
        "duben",
        "květen",
        "červen",
        "červenec",
        "srpen",
        "září",
        "říjen",
        "listopad",
        "prosinec",
      ],
      fullMonthNamesInDate: [
        "ledna",
        "února",
        "března",
        "dubna",
        "května",
        "června",
        "července",
        "srpna",
        "září",
        "října",
        "listopadu",
        "prosince",
      ],
      shortMonthNames: [
        "led",
        "úno",
        "bře",
        "dub",
        "kvě",
        "čvn",
        "čvc",
        "srp",
        "zář",
        "říj",
        "lis",
        "pro",
      ],
      fullDayOfWeekNames: ["neděle", "pondělí", "úterý", "středa", "čtvrtek", "pátek", "sobota"],
      shortDayOfWeekNames: ["ne", "po", "út", "st", "čt", "pá", "so"],
    },
  },
  english: {
    dateTimeFormats: {},
    dateTimeNames: {},
  },
  german: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d. MMMM yyyy",
      dateNoYear: "d. MMMM",
      dateNoYearTimeSeconds: "d. MMMM  HH:mm:ss",
      dateTimeSeconds: "d. MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d.  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember",
      ],
      fullMonthNamesInDate: [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember",
      ],
      shortMonthNames: [
        "Jan",
        "Feb",
        "Mär",
        "Apr",
        "Mai",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Okt",
        "Nov",
        "Dez",
      ],
      fullDayOfWeekNames: [
        "Sonntag",
        "Montag",
        "Dienstag",
        "Mittwoch",
        "Donnerstag",
        "Freitag",
        "Samstag",
      ],
      shortDayOfWeekNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    },
  },
  french: {
    dateTimeFormats: {
      centiseconds: ",ff",
      date: "d MMMM yyyy",
      dateNoYear: "d MMMM",
      dateNoYearTimeSeconds: "d MMMM  HH:mm:ss",
      dateTimeSeconds: "d MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "d  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "dddd  HH:mm:ss",
      milliseconds: ",fff",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss,f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "janvier",
        "février",
        "mars",
        "avril",
        "mai",
        "juin",
        "juillet",
        "août",
        "septembre",
        "octobre",
        "novembre",
        "décembre",
      ],
      fullMonthNamesInDate: [
        "janvier",
        "février",
        "mars",
        "avril",
        "mai",
        "juin",
        "juillet",
        "août",
        "septembre",
        "octobre",
        "novembre",
        "décembre",
      ],
      shortMonthNames: [
        "janv.",
        "févr.",
        "mars",
        "avr.",
        "mai",
        "juin",
        "juil.",
        "août",
        "sept.",
        "oct.",
        "nov.",
        "déc.",
      ],
      fullDayOfWeekNames: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
      shortDayOfWeekNames: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
    },
  },
  hebrew: {
    dateTimeFormats: {
      date: "\u202bd MMMM yyyy",
      dateNoYear: "\u202bd MMMM",
      dateNoYearTimeSeconds: "\u202bd MMMM  HH:mm:ss",
      dateTimeSeconds: "\u202bd MMMM yyyy HH:mm:ss",
      dayOfMonthTimeSeconds: "\u202bd  HH:mm:ss",
      fullDayOfWeekTimeSeconds: "\u202bdddd  HH:mm:ss",
      time: "HH:mm",
      timeSeconds: "HH:mm:ss",
      timeSecondsTenths: "HH:mm:ss.f",
    },
    dateTimeNames: {
      fullMonthNames: [
        "ינואר",
        "פברואר",
        "מרץ",
        "אפריל",
        "מאי",
        "יוני",
        "יולי",
        "אוגוסט",
        "ספטמבר",
        "אוקטובר",
        "נובמבר",
        "דצמבר",
      ],
      fullMonthNamesInDate: [
        "ינואר",
        "פברואר",
        "מרץ",
        "אפריל",
        "מאי",
        "יוני",
        "יולי",
        "אוגוסט",
        "ספטמבר",
        "אוקטובר",
        "נובמבר",
        "דצמבר",
      ],
      shortMonthNames: [
        "ינו׳",
        "פבר׳",
        "מרץ",
        "אפר׳",
        "מאי",
        "יוני",
        "יולי",
        "אוג׳",
        "ספט׳",
        "אוק׳",
        "נוב׳",
        "דצמ׳",
      ],
      fullDayOfWeekNames: [
        "יום ראשון",
        "יום שני",
        "יום שלישי",
        "יום רביעי",
        "יום חמישי",
        "יום שישי",
        "יום שבת",
      ],
      shortDayOfWeekNames: ["יום א׳", "יום ב׳", "יום ג׳", "יום ד׳", "יום ה׳", "יום ו׳", "שבת"],
    },
  },
  japanese: {
    dateTimeFormats: {
      date: "yyyy年M月d日",
      dateNoYear: "M月d日",
      dateNoYearTimeSeconds: "M月d日 H時m分s秒",
      dateTimeSeconds: "yyyy年M月d日 H時m分s秒",
      dayOfMonthTimeSeconds: "d日  H時m分s秒",
      fullDayOfWeekTimeSeconds: "dddd H時m分s秒",
      fullMonth: "M月",
      fullMonthYear: "yyyy年M月",
      shortMonth: "M月",
      time: "H時m分",
      timeSeconds: "H時m分s秒",
      timeSecondsTenths: "H時m分s.f秒",
      year: "yyyy年",
    },
    dateTimeNames: {
      fullMonthNames: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      fullMonthNamesInDate: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      shortMonthNames: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      fullDayOfWeekNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
      shortDayOfWeekNames: ["日", "月", "火", "水", "木", "金", "土"],
      ampmNames: ["午前", "午後"],
    },
  },
};
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
  </head>
  <body>
    <div id="my-timeline" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.