calendar/usage

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Calendar basic usage example

To use Calendar, import CalendarDate and today from @internationalized/date, and Calendar from @/components/ui/calendar. Create state with useState<CalendarDate | null>(today(getLocalTimeZone())), then render <Calendar value={date} onChange={setDate} className="rounded-lg border" />

Calendar international calendar systems support

To use international calendar systems such as Persian, Islamic, or Buddhist calendars, use React Aria's I18nProvider to set the locale.

Calendar timeZone prop and date offset fix

If you notice a selected date offset (for example, selecting the 20th highlights the 19th), make sure the timeZone prop is set to the user's local timezone. This issue occurs when the timezone is not properly configured.

Calendar timeZone detection must be client-side

The timezone should be detected using Intl.DateTimeFormat().resolvedOptions().timeZone inside a useEffect to ensure compatibility with server-side rendering. Detecting the timezone during render would cause hydration mismatches, as the server and client may be in different timezones.

Calendar basic usage example with single date selection

Here is a basic example of using Calendar with single date selection: ```tsx const [date, setDate] = React.useState<Date | undefined>(new Date()) return ( <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-lg border" /> ) ``` This example shows a calendar that allows users to select a single date.

Calendar timeZone prop usage

The Calendar component accepts a timeZone prop to ensure dates are displayed and selected in the user's local timezone. Here is an example: ```tsx export function CalendarWithTimezone() { const [date, setDate] = React.useState<Date | undefined>(undefined) const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined) React.useEffect(() => { setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone) }, []) return ( <Calendar mode="single" selected={date} onSelect={setDate} timeZone={timeZone} /> ) } ``` The timezone is detected using Intl.DateTimeFormat().resolvedOptions().timeZone inside a useEffect to ensure compatibility with server-side rendering.

Calendar component import

Import the Calendar component using: import { Calendar } from "@/components/ui/calendar"

Basic Calendar usage example

This example shows how to create a basic single-date calendar: const [date, setDate] = React.useState<Date | undefined>(new Date()) return ( <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-lg border" /> )

Calendar with timezone example

This example shows how to create a calendar with timezone support: export function CalendarWithTimezone() { const [date, setDate] = React.useState<Date | undefined>(undefined) const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined) React.useEffect(() => { setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone) }, []) return ( <Calendar mode="single" selected={date} onSelect={setDate} timeZone={timeZone} /> ) }

Give your agent this brain