Skip to main content Link Menu Expand (external link) Document Search Copy Copied


Specify all options related to the domain configuration

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


Domain’s type, representing a time unit

type: string;

Default: hour

Available default domains type

  • year
  • month
  • week
  • day
  • hour

See Examples


Space between each domain, in pixel

gutter: number;

Default: 4



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]



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


When set to true, notice how the calendar may resize on navigation

When set to false, notice how the calendar never resize on navigation, 
but some white space may appear between the domains


Specify all options related to the domain’s label

label: LabelOptions;

See the Domain Label section


Sort order of the domains.

sort: 'asc' | 'desc';

Default: asc

This only affect the domain’s order, not the subDomain.


Toggle sort order

Table of contents