date

Specify the calendar’s time boundaries and settings

type DateOptions: {
  start: Date;
  min?: Date;
  max?: Date;
  highlight?: Date[];
  locale: string;
  timezone?: string
}

start

Start date of the calendar

start: Date;

Default: new Date() (today)

Date is rounded to the start of the domain’s type.
If start is new Date(2000-06-16), and the chosen domain is month, the calendar will start on 2000-06-01 (start of the month).

min

Minimum allowed date. Used on navigation, to set a lower bound when navigating backward.

Should always be <= start

min?: Date;

Default: null

Playground

Previous Next

max

Maximum allowed date. Used on navigation, to set a upper bound when navigating forward.

Should always be >= start

max?: Date;

Default: null

Playground

Previous Next

highlight

Array of dates to highlight.
Highlighted subDomain cells are given a special class to make them standout.

highlight?: Date[];

Default: []

Playground

Highlight 2 random minutes

See the highlight class in the CSS to customize its style

locale

Date locale.

locale: string;

locale is used by the underlying Day.js library to set the language and locale specific function, such as the first day of the week (monday/sunday).

Default: en

See the list of supported locale on day.js repository.

For performance reasons, only the en locale is included by default, and all other locales are loaded on-demand. You can save a few milliseconds by including the dayjs locale script directly in your <head>, e.g. <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/zh-cn.js"></script>

Example with the french locale

timezone

Date timezone.

timezone?: string;

Default: guessed from user browser.