Code

Implementation
Calendar Props

Live Component Playground

Common Examples

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

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

Date Format

To follow the international standard, the Anvil2 Calendar component uses ISO 8601 for date-time format. ISO date format strings should always be used when passing a date-time value to a Calendar. The same format is also returned by the onSelection callback.

Example with new Date()

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

Controlling calendar state

Demo

Uncontrolled calendars

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

Demo

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.

Demo

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".

Demo

Calendar Timezone

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

Demo

Scoping calendar dates

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

Demo

Min and Max

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

Demo

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}.

Anvil2 Web

Resources

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

Anvil2 Web

Resources

​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