Options

Customize the UI and content of the calendar

The calendar can be customized by passing an Options object to the paint() method on the calendar instance.

Usage
const cal = new CalHeatmap();
cal.paint(options?: Options): Promise<unknown>;

Type Signature
type Options = {
  itemSelector: Element | string,
  range: number,
  domain: DomainOptions,
  subDomain: SubDomainOptions,
  verticalOrientation: boolean,
  date: DateOptions,
  data: DataOptions,
  label: LabelOptions,
  animationDuration: number,
  scale: ScaleOptions,
  theme: 'light' | 'dark',
};

📄️ itemSelector

Specify where the calendar should be rendered

📄️ range

Specify the number of domains to show

🗃️ domain

1 items

📄️ subDomain

Specify all options related to the subDomain configuration

📄️ date

Specify the calendar's time boundaries and settings

📄️ data

Specify how to fetch and process the data used to fill the calendar

📄️ verticalOrientation

Whether the domains should be arranged on top of each other, or side by side.

📄️ scale

Control how your data are represented on the heatmap

📄️ animationDuration

Control the duration of the various animations

📄️ theme

Toggle between light and dark mode

tip

Throughout the documentation, you will see block like the following

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({ range: 1 });

render(<div id="cal-heatmap"></div>);

const cal = new CalHeatmap();
cal.paint({ range: 1 });

render(<div id="cal-heatmap"></div>);

Result

These are live editor: you can edit the code inline, and see the result in live.

Use them to test settings, and see what happen.