Calendar configuration

While the dates configuration governs the calendar's functionality, the calendar configuration defines the calendar's appearance and visual aspects.

The calendar configuration takes the following structure:

interface DPCalendarConfig {
  mode?: 'static' | 'fluid';
  offsets?: number[];
  startDay: DPDayInteger;
}

interface DPCalendarConfig {
  mode?: 'static' | 'fluid';
  offsets?: number[];
  startDay: DPDayInteger;
}

mode

The mode option has 2 variants static and fluid.

In the static mode, calendars are structured with 6 rows containing 7 days each. This layout prevents any visual jumping within the UI when transitioning between months and years.

🗓 February 2022 in static mode:

30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05
06 07 08 09 10 11 12

30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05
06 07 08 09 10 11 12

In the fluid mode, calendars are constructed based on the day number of the first and last month date, filled by the days of the week from the previous and next months if needed. The number of rows in a calendar can differ for two neighboring months due to this dynamic arrangement.

🗓 February 2022 in fluid mode:

30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05

30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05

offsets

The offsets option enables the addition of extra Calendars.

The initial calendar is always [0], followed by any provided offsets. These offset values are calculated based on the current month and can be negative, such as -1, which adds a month before the current one.

For instance, using offsets: [-1, 1] when the current month is November 2023 would result in three calendars: October, November, December.

startDay

The startDay property specifies the starting day of the week for the calendar. It takes a number from 0 to 6, where 0 represents Sunday and 6 represents Saturday.

Dates Locale