Skip to main content


How to change start of week to monday

The start of the week (sunday/monday) depends on each locale. By default, the calendar is using the en locale, which uses sunday as first day of the week.

Use a locale where the start of the week is monday

Some locale, such as fr, uses monday as start of the week, nothing else is required

const cal = new CalHeatmap();
date: { locale: 'fr' },

Keep the en locale, but customize it to have monday as start of the week

You can pass a partial daysjs locale object to locale, overwritting some default en locale values

const cal = new CalHeatmap();
date: { locale: { weekStart: 1 } },

Pass your own custom locale

See locale doc


This option was known as startWeekOnMonday in the previous version.

How to change the calendar language

Use the locale option. For additional text such as tooltip text, a callback function is provided, so you can customize the displayed text.

Dark/Light mode support

Use the theme option

Trigger an action when clicking a calendar cell

See the click event

Use a custom subDomain interval, such as 6 hours, 15 min, etc ...

See Templates, to create your own custom subDomain with your desired time interval

Refresh the calendar with new data, dynamically

See fill API

How to change the domain/subDomain label text size/font

Take a look at the css

  • domain label are controlled via .ch-domain-text
  • subDomain text are controlled via .ch-subdomain-text

Show only weekdays, instead of all days of the week

Use a custom template. You can see an example here

Use a data source, behind authentication

data.source is expecting a string url. When your API is behind authentication, or required additional request headers, you can use requestinit to customize the http request, to add addition headers, change the request type to POST, etc ...

Right to Left (RTL) support

Set both domain.sort and subDomain.sort to desc

Reproduce a calendar in the Github contribution style

See Github showcase

Does it work with React ?

Yes, see this starter demo

The homepage demo is also a React Component, see the source code directly on the documention repo

Does it work with VueJS ?

Yes, see this starter demo

Does it work on NodeJS ?

The script requires a DOM Element. As long as your app have a virtual DOM Element, it should work.