Appearance
Date Range Styling
Style every visual detail of a Date Range — the two date fields, the calendar panel, day cells and how the selected span is painted, unavailable days, the date format, and the selection summary — using per-type templates.
Overview
Read Types Settings first if you haven't created a template before. In the Style Settings modal this type is labeled Date Range.
The editor's left navigation has 7 tabs, in this order: Layout, Date fields, Calendar panel (with Month header and Weekday labels), Days, Unavailable days, Format & summary, and Responsive.
Availability rules aren't here
Duration, blocked days and dates, and the booking window all live on the option itself — see Date Range. This editor controls appearance only. The one exception is Date format and Date separator, which are display concerns and live here.
Layout
How the two date fields sit together.
| Setting | Options (default) | What it controls |
|---|---|---|
| Field layout | Split (default) / Joined / Stacked | Split shows two separate inputs, Joined merges them into one box, Stacked puts one above the other |
| Gap between fields | 0–32px (8px) | Space between the two fields — Split and Stacked only |
| Field padding | per side, max 40px (6/10/6/10) | Space inside the box |
| Field background | color (#FFFFFF, falls back to the Global input background) | Box fill |
| Field border | color (#E2E8F0, falls back to the Global input border) | Box border color |
| Border width | 0–4px (1px, follows the Global border width) | Box border thickness |
| Corner radius | 0–24px (4px, follows the Global input radius) | Box roundness |
"Which box?" depends on the layout
Padding, background, border and radius apply to whichever box the layout draws: the shared box in Joined, and each field separately in Split and Stacked.
Date Fields
| Setting | Options (default) | What it controls |
|---|---|---|
| Field height | 28–72px (40px) | Height of each field |
| Field text | color (#1F2937, falls back to the Global text color) | The date text — also colours the placeholder shown before a date is picked |
| Field label colour | color (#64748B, falls back to the Global text color) | The "Check in" / "Check out" labels |
| Field label size | 8–20px (12px) | Label text size |
| Label weight | Regular (default) / Medium / Semibold / Bold | Label text weight |
Calendar Panel
The surface the calendar is drawn on.
| Setting | Options (default) | What it controls |
|---|---|---|
| Panel style | Card (default) / Inline | Inline keeps the calendar open on the page, so customers see availability without clicking |
| Drop shadow | toggle (on) | Lifts the calendar off the page |
| Panel background | color (#FFFFFF, falls back to the Global input background) | Panel fill |
| Panel border | color (#E2E8F0, falls back to the Global input border) | Panel border color |
| Panel border width | 0–4px (1px, follows the Global border width) | Panel border thickness |
| Panel corner radius | 0–24px (8px, follows the Global input radius) | Panel roundness |
| Panel padding | 0–40px (12px) | Space inside the panel |
Inline changes the flow
With Card, the second click completes the range and closes the calendar. With Inline, the calendar stays on the page — useful when availability itself is the selling point.
Month header
| Setting | Options (default) | What it controls |
|---|---|---|
| Month title size | 10–24px (14px) | Month/year heading size |
| Month title weight | Regular / Medium / Semibold (default) / Bold | Heading weight |
| Month title colour | color (#1F2937, falls back to the Global text color) | Heading color |
| Month title alignment | Left / Centre (default) / Right | Heading alignment |
| Arrow colour | color (#1F2937, falls back to the Global text color) | Previous/next arrow color |
| Arrow background | color (#FFFFFF) | Arrow button fill |
| Arrow hover colour | color (#2563EB) | Arrow color on hover |
| Arrow hover background | color (#F1F5F9) | Arrow button fill on hover |
| Arrow corner radius | 0–24px (4px, follows the Global input radius) | Arrow button roundness |
| Arrow size | 24–48px (32px) | Sizes the button and the arrow inside it together |
Arrow size can't go below 24px
24px is the WCAG 2.5.8 target-size floor. The editor won't let you style your way below a usable tap target.
Weekday labels
| Setting | Options (default) | What it controls |
|---|---|---|
| Weekday labels | Short (Mon) (default) / Letter (M) / Hidden | The column headings |
| Weekday colour | color (#64748B, falls back to the Global text color) | Heading color — hidden when labels are |
| Weekday text size | 8–18px (12px) | Heading size — hidden when labels are |
| Weekday weight | Regular (default) / Medium / Semibold / Bold | Heading weight — hidden when labels are |
Hiding the labels keeps them for screen readers
Hiding the labels keeps the column names available to screen readers — it's a visual change only.
Days
Day cells, and how the selected span is painted.
| Setting | Options (default) | What it controls |
|---|---|---|
| Range fill | Bar / Soft (default) / Minimal | How the days between start and end are painted |
| Day shape | Circle (default) / Rounded / Square | Shape of each day cell |
| Day size | 24–56px (36px) | Cell size |
| Day text size | 10–22px (14px) | Number size inside the cell |
| Day text | color (#1F2937, falls back to the Global text color) | Day number color |
| Day hover background | color (#F1F5F9) | Cell fill on hover |
| Selected background | color (#2563EB) | Fill of the start and end days |
| Selected text | color (#FFFFFF) | Text of the start and end days |
| In-range background | color (#DBEAFE) | Fill of the days between — also used for the connector line in the Minimal range fill, and for the range preview while choosing |
| In-range text | color (#1E3A8A) | Text of the days between — Bar and Soft only |
| Today marker | Underline (default) / Dot / Outline / None | How today is marked |
| Today marker colour | color (#2563EB) | Marker color — hidden when the marker is None |
Day size also stops at 24px
Same WCAG 2.5.8 target-size floor as the navigation arrows.
In-range background does triple duty
It paints the days between start and end, the connector line under the Minimal fill, and the live hover preview while the customer is choosing an end date. Pick a color that reads well in all three.
Unavailable Days
| Setting | Options (default) | What it controls |
|---|---|---|
| Unavailable day style | Faded / Strikethrough (default) / Crossed | How closed and blocked dates are drawn |
| Unavailable day text | color (#6B7280) | Text color of unavailable days |
Unavailable days stay readable
Unavailable days always stay visible and readable by screen readers — only the styling changes. They keep aria-disabled rather than being hidden, so a customer using assistive technology can still tell a closed day apart from a missing one.
Format & Summary
Date format
| Setting | Options (default) | What it controls |
|---|---|---|
| Date format | ten options (YYYY-MM-DD default) | How dates are shown to customers and written on the cart. Stored dates are always ISO |
| Week starts on | Sunday (default) through Saturday | The first column of the calendar |
Available formats: YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, MM-DD-YYYY, DD.MM.YYYY, D MMM YYYY, MMM D, YYYY, D MMMM YYYY, MMMM D, YYYY.
Date format changes the cart line, not the data
The visible cart property uses this format. The hidden _{label} start and _{label} end properties are always ISO — build your theme logic on those, not on the formatted string. See Cart Properties.
Selection summary
| Setting | Options (default) | What it controls |
|---|---|---|
| Summary text | Length only (default) / Dates and length / Hidden | The line under the fields that confirms what the customer picked |
| Date separator | text (–) | Shown between the two dates on the cart line — only under "Dates and length" |
| Summary colour | color (#64748B, falls back to the Global text color) | Summary text color — hidden when the summary is |
| Summary text size | 8–20px (12px) | Summary size — hidden when the summary is |
The summary is also where a customer is told when a chosen start leaves no bookable end at all.
Responsive
| Setting | Options (default) | What it controls |
|---|---|---|
| Day size on mobile | 24–48px (32px) | A desktop-sized two-month calendar overflows a phone; this shrinks the cells below 480px |
How to Style a Date Range
- Open the Style Settings modal (see Customization Overview)
- Click Types → Date Range
- Create a new template or click an existing one to edit it
- Pick a Field layout and Panel style first — they shape everything below
- Use the left navigation to jump between Layout, Date fields, Calendar panel, Days, Unavailable days, Format & summary, and Responsive
- Click Manage preview above the Live Preview to build a test calendar — see Sandbox & Live Preview
- Click Save in the contextual save bar
Pin the calendar open while you style days
The Sandbox has a Keep the calendar open control so the panel doesn't collapse while you adjust day colours, plus Preselect a range so the selected and in-range colours are visible without picking dates each time.
Related
- Date Range (option type) — duration, availability, booking window, and cart properties
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — build a test calendar while styling
- Time Picker Styling
- Slider Styling