domain

Specify all options related to the domain configuration

type DomainOptions: {
  type: string;
  gutter: number;
  padding: [number, number, number, number];
  dynamicDimension: boolean;
  label: LabelOptions;
  sort: 'asc' | 'desc';
}

---

type

Domain's type, representing a time unit

type: string;

Default: hour

Available domains type

• year
• month
• week
• day
• hour

gutter

Space between each domain, in pixel

gutter: number;

Default: 4

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the gutter value to see result cal.paint({ itemSelector: '#example-gutter', domain: { gutter: 4 } }); render(<div id="example-gutter"></div>);

const cal = new CalHeatmap();
// Change the gutter value to see result
cal.paint({ itemSelector: '#example-gutter', domain: { gutter: 4 } });

render(<div id="example-gutter"></div>);

Result

Loading...

padding

Padding inside each domain, in pixel

padding: [number, number, number, number];

Expect an array of 4 numbers, in the same order as CSS padding property (top, right, bottom, left)

Default: [0, 0, 0, 0]

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the padding value to see result cal.paint({ itemSelector: '#example-padding', domain: { padding: [0, 0, 0, 0] }, }); render(<div id="example-padding"></div>);

const cal = new CalHeatmap();
// Change the padding value to see result
cal.paint({
  itemSelector: '#example-padding',
  domain: { padding: [0, 0, 0, 0] },
});

render(<div id="example-padding"></div>);

Result

Loading...

dynamicDimension

Whether the domain's should be resized to fit its content.

dynamicDimension: boolean;

The domain dimension depends on the chosen subDomain type, which each have a different number of columns and rows count.

Some of the subDomain type, such as day, do not have a fixed number of items, as there can be 28, 29, 30 or 31 days in a month.

This leads to different domains having different sizes, and may cause the calendar total dimension to change on navigation.

When disabled, the domains will all take the same maximum size as defined by the subDomain template, and some blank space may appear between domains.

Usually, only either the width or the height will by dynamic.

Default: true

label

Specify all options related to the domain’s label

label: LabelOptions;

See the Domain Label section for more informations

sort

Sort order of the domains.

sort: 'asc' | 'desc';

Default: asc

http://localhost:3000

Live Editor

const cal = new CalHeatmap(); // Change the sort value to see result cal.paint({ itemSelector: '#example-sort', domain: { type: 'day', sort: 'asc' }, subDomain: { type: 'hour' }, }); render(<div id="example-sort"></div>);

const cal = new CalHeatmap();
// Change the sort value to see result
cal.paint({
  itemSelector: '#example-sort',
  domain: { type: 'day', sort: 'asc' },
  subDomain: { type: 'hour' },
});

render(<div id="example-sort"></div>);

Result

Loading...

Option scope

This only affect the domain's order, not the subDomain. See subDomain.sort to also set the subDomains sort order.