;
}
};
## Live Component Playground
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [date, setDate] = useState();
return (
setDate(date.value)}
/>
{date && `Selected Date: ${date}`}
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Calendar } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
### Date Format
To follow the [international standard](https://www.iso.org/iso-8601-date-and-time-format.html), 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()
```tsx theme={null}
```
### Controlling calendar state
```tsx lines expandable theme={null}
import { Calendar, Flex, Button } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [date, setDate] = useState(
new Date().toISOString(),
);
return (
setDate(value)} />
);
}
export default App;
```
#### Uncontrolled calendars
By default, calendars handle their own state. Use the `defaultValue` prop to set the initial value of an uncontrolled calendar.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### 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.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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"`.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Calendar Timezone
By default, local browser timezone is used. To override local system timezone, `defaultTimezone` can be used.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [date, setDate] = useState();
return (
setDate(date.value)}
defaultTimeZone="America/New_York"
/>
{date && `Selected Date: ${date}`}
);
}
export default App;
```
### Scoping calendar dates
There are two different ways to limit the scope of selectable dates within a calendar.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Min and Max
The `minDate` and `maxDate` props can be used to scope the date range selection.
```tsx lines expandable theme={null}
import { Calendar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Unavailable dates
You can also pass an array of dates to the `unavailable.dates` prop to disable selecting specific dates.
```tsx theme={null}
```
## `Calendar` Props
Props marked as BETA are currently only available if you import {component_0} from `@servicetitan/anvil2/beta`.
BETA Array of date metadata objects to display pips and provide context.
Uncontrolled focus date.
Uncontrolled date value. Object is only accepted when `range={true}`.
Controlled focus date.
The locale to use for the calendar.
BETA Callback when the visible month changes.
Callback when a date is selected.
Enable date range selection mode. When `true`, `value` and `defaultValue` accept objects with `start` and `end` properties.
The day of the week to start the calendar on.
The days of the week and specific dates that are unavailable.
Controlled date value. Object is only accepted when `range={true}`.
