Theme Editor - Calendar - TWICE Commerce

Calendar settings panel in the theme editor — Theme Editor > Calendar

The Calendar panel customises the availability calendar widget that appears on listing pages for rental date selection. Stock level colours indicate how much inventory is available on each date, and configurable thresholds control when each colour band applies.

Stock level indicators on the calendar are only visible when the Show stock level option is enabled in the storefront content settings for the listing page. When disabled, date cells render without colour coding and the stock level legend is hidden.

Stock level colours

Each stock level has a separate background and text colour. Four levels are available:

Setting	Default	Description
Low background	`#FDA29B`	Background colour for date cells at or below the Low threshold.
Low text	`#344054`	Text colour inside low-stock date cells.
Limited background	`#F5C771`	Background colour for date cells between the Low and Limited thresholds.
Limited text	`#344054`	Text colour inside limited-stock date cells.
High background	`#B4EFD5`	Background colour for date cells above the Limited threshold.
High text	`#344054`	Text colour inside high-stock date cells.
Out of stock background	`#E4E6EB`	Background colour for date cells with no available stock.
Out of stock text	`#6B7280`	Text colour inside out-of-stock date cells.

Stock level thresholds

Thresholds control when each colour band applies. They are percentages of available stock relative to total stock at a location.

Setting	Type	Default	Range	Description
Low	Number	25%	0–100%	Dates with availability at or below this percentage show the Low colour.
Limited	Number	60%	0–100%	Dates with availability between the Low threshold and this percentage show the Limited colour. Dates above this percentage show High.

The Low threshold must be less than or equal to the Limited threshold. If you set Low above Limited, the panel adjusts Limited to match automatically.

Selected date

Colours for the currently selected date on the calendar.

Setting	Default	Description
Background	`#212121`	Background colour of the selected date cell.
Text	`#FFFFFF`	Text colour of the selected date cell.

Day cell

Setting	Type	Default	Range	Description
Corner radius	Slider	50%	0–50%	How rounded each day cell is. 0% is square, 50% is circular.

Today

Setting	Default	Description
Border	`#212121`	Border colour for today’s date cell.

Border

Setting	Type	Default	Range	Description
Color	Color	`#212121`	—	Border colour around the calendar widget.
Thickness	Slider	1 px	0–4 px	Border width around the calendar widget.
Corner radius	Slider	0 px	0–40 px	How rounded the calendar corners are.

Container

Setting	Type	Default	Range	Description
Padding	Slider	1 px	0–16 px	Internal padding between the calendar border and its content.

Stock level legend

When Show stock level is enabled, a legend appears below the calendar showing coloured swatches with labels for each stock level (Out of stock, Low, Limited, High). The swatch shape matches the day cell corner radius for visual consistency. You can customise the legend labels in the storefront content settings for the listing page. If a label is left empty, that legend entry is hidden.

CSS variables

:root {
  /* Stock level colours */
  --storefront-calendar-stock-low-color: #FDA29B;
  --storefront-calendar-stock-low-text-color: #344054;
  --storefront-calendar-stock-limited-color: #F5C771;
  --storefront-calendar-stock-limited-text-color: #344054;
  --storefront-calendar-stock-high-color: #B4EFD5;
  --storefront-calendar-stock-high-text-color: #344054;
  --storefront-calendar-stock-out-background-color: #E4E6EB;
  --storefront-calendar-stock-out-text-color: #6B7280;

  /* Stock level thresholds */
  --storefront-calendar-stock-low-threshold: 25;
  --storefront-calendar-stock-limited-threshold: 60;

  /* Selected date */
  --storefront-calendar-selected-background-color: #212121;
  --storefront-calendar-selected-text-color: #FFFFFF;

  /* Today */
  --storefront-calendar-today-border-color: #212121;

  /* Day cell */
  --storefront-calendar-day-cell-corner-radius: 50%;

  /* Border */
  --storefront-calendar-border-color: #212121;
  --storefront-calendar-border-width: 1px;
  --storefront-calendar-border-radius: 0px;

  /* Container */
  --storefront-calendar-container-padding: 1px;

  /* Other */
  --storefront-calendar-accent-color: #212121;
  --storefront-calendar-background-color: #FFFFFF;
}

Colors

Define the storefront colour palette.

Inputs

Configure form field styles.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Calendar

Stock level colours

Stock level thresholds

Selected date

Day cell

Today

Border

Container

Stock level legend

CSS variables

Colors

Inputs

​Stock level colours

​Stock level thresholds

​Selected date

​Day cell

​Today

​Border

​Container

​Stock level legend

​CSS variables

​Related

Colors

Inputs

Stock level colours

Stock level thresholds

Selected date

Day cell

Today

Border

Container

Stock level legend

CSS variables

Related