Calendar – Code

Implementation
Calendar Props

Live Component Playground

Common Examples

import { Calendar } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <Calendar defaultValue={new Date().toISOFormat()} />;
}

Date Format

The Calendar component accepts ISO 8601 date strings for value and defaultValue. Prefer date-only strings (for example, "2025-07-02") for predictable calendar date selection.onSelection returns a full ISO datetime string with timezone offset (for example, “2025-07-02T00:00:00.000-07:00”), or undefined when the selection is cleared.Convert to a date-only string (for example, const dateOnly = value?.split("T")[0];) before passing the value to date fields or APIs that expect YYYY-MM-DD.

Example with new Date()

<Calendar defaultValue={new Date().toISOString()} />

Controlling calendar state

Uncontrolled calendars

By default, calendars handle their own state. Use the defaultValue prop to set the initial value of an uncontrolled calendar.

Controlled calendars

Use the value prop to manually control the state of a calendar.

Selecting a date range

Calendar can also be used to select range of dates using range prop.

Calendar focus

By default, the month of selected date or today is shown.

Overriding calendar focus

In the example below, 2024-07-07 is the selected date but June is showing on initial render because of focusedDate="2024-06-06".

Calendar Timezone

By default, local browser timezone is used. To override local system timezone, defaultTimezone can be used.

Scoping calendar dates

There are two different ways to limit the scope of selectable dates within a calendar.

Min and Max

The minDate and maxDate props can be used to scope the date range selection.

Unavailable dates

You can also pass an array of dates to the unavailable.dates prop to disable selecting specific dates.

<Calendar
  defaultValue="2024-01-15"
  defaultFocusedDate="2024-01-01"
  defaultTimeZone="America/New_York"
  focusedDate="2024-01-15"
  maxDate="2024-12-31"
  minDate="2024-01-01"
  unavailable={{ dates: ["2024-01-20", "2024-01-21"]}}
  value="2024-01-15"
/>

`Calendar` Props

Props marked as BETA are currently only available if you import from @servicetitan/anvil2/beta.

dateMetaData

{ date: string, context: string }[]

BETA Array of date metadata objects to display pips and provide context.

defaultFocusedDate

string

Uncontrolled focus date.

defaultTimeZone

IanaZone

default:"Local browser timezone"

defaultValue

string | { start?: string; end?: string }

Uncontrolled date value. Object is only accepted when range={true}.

focusedDate

string

Controlled focus date.

locale

Locale

default:"Browser locale"

The locale to use for the calendar.

maxDate

string

minDate

string

onMonthView

({ month, year }: { month: number, year: number }) => void

BETA Callback when the visible month changes.

onSelection

(data: { value }) => void

Callback when a date is selected.

range

boolean

Enable date range selection mode. When true, value and defaultValue accept objects with start and end properties.

startDay

"Sunday" | "Monday"

default:"Sunday"

The day of the week to start the calendar on.

unavailable

{ daysOfWeek?: WeekdayNumbers[]; dates?: string[] }

The days of the week and specific dates that are unavailable.

value

string | { start?: string; end?: string }

Controlled date value. Object is only accepted when range={true}.

​Live Component Playground

​Common Examples

​Date Format

​Example with new Date()

​Controlling calendar state

​Uncontrolled calendars

​Controlled calendars

​Selecting a date range

​Calendar focus

​Overriding calendar focus

​Calendar Timezone

​Scoping calendar dates

​Min and Max

​Unavailable dates

​Calendar Props

Live Component Playground

Common Examples

Date Format

Example with new Date()

Controlling calendar state

Uncontrolled calendars

Controlled calendars

Selecting a date range

Calendar focus

Overriding calendar focus

Calendar Timezone

Scoping calendar dates

Min and Max

Unavailable dates

`Calendar` Props