Calendar

An easily stylable calendar component.

November 2025

S	M	T	W	T	F	S

import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui-components/react/calendar';
import styles from '../../calendar.module.css';

function isDateUnavailable(date: Date) {
  return date.getDay() === 6 || date.getDay() === 0; // Unavailable on weekends
}

export default function ExampleCalendar() {
  return (
    <Calendar.Root
      className={styles.Root}
      isDateUnavailable={isDateUnavailable}
      aria-label="Departure date"
    >
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
              ◀
            </Calendar.SetPreviousMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.toString()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {(week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.toString()}
                  className={styles.DayGridRow}
                >
                  {(day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.toString()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  )}
                </Calendar.DayGridRow>
              )}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { Calendar } from '@base-ui-components/react/calendar';

<Calendar.Root>
  <Calendar.SetPreviousMonth />
  <Calendar.SetNextMonth />
  <Calendar.SetMonth />
  <Calendar.DayGrid>
    <Calendar.DayGridHeader>
      <Calendar.DayGridHeaderRow>
        <Calendar.DayGridHeaderCell />
      </Calendar.DayGridHeaderRow>
    </Calendar.DayGridHeader>
    <Calendar.DayGridBody>
      <Calendar.DayGridRow>
        <Calendar.DayGridCell>
          <Calendar.DayButton />
        </Calendar.DayGridCell>
      </Calendar.DayGridRow>
    </Calendar.DayGridBody>
  </Calendar.DayGrid>
</Calendar.Root>

API reference

Root

Groups all parts of the calendar. Renders a <div> element.

defaultValue

TemporalValue

—

Name: defaultValue
Description: The uncontrolled value that should be initially selected. To render a controlled (Range)Calendar, use the value prop instead.
Type: Date | null | undefined

value

TemporalValue

—

Name: value
Description: The controlled value that should be selected. To render an uncontrolled (Range)Calendar, use the defaultValue prop instead.
Type: Date | null | undefined

onValueChange

function

—

Name: onValueChange
Description: Event handler called when the selected value changes. Provides the new value as an argument. Has getValidationError() in the eventDetails to retrieve the validation error associated to the new value.
Type: | (( value: TemporalValue, eventDetails: Calendar.Root.ChangeEventDetails, ) => void) | undefined

defaultVisibleDate

Date

—

Name: defaultVisibleDate
Description: The date used to decide which month should be initially displayed in the Day Grid. To render a controlled Calendar, use the visibleDate prop instead.
Type: Date | undefined

isDateUnavailable

((day: Date) => boolean)

—

Name: isDateUnavailable
Description: Mark specific dates as unavailable. Those dates will not be selectable but they will still be focusable with the keyboard.
Type: ((day: Date) => boolean) | undefined

maxDate

Date

—

Name: maxDate
Description: Maximal selectable date.
Type: Date | undefined

minDate

Date

—

Name: minDate
Description: Minimal selectable date.
Type: Date | undefined

monthPageSize

number

1

Name: monthPageSize
Description: The amount of months to move by when navigating. This is mostly useful when displaying multiple day grids.
Type: number | undefined
Default: 1

onVisibleDateChange

function

—

Name: onVisibleDateChange
Description: Event handler called when the visible date changes. Provides the new visible date as an argument.
Type: ((visibleDate: Date) => void) | undefined

referenceDate

Date

'The closest valid date using the validation props.'

Name: referenceDate
Description: The date used to generate the new value when both value and defaultValue are empty.
Type: Date | undefined
Default: 'The closest valid date using the validation props.'

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.Root.State, ) => CSSProperties | undefined) | undefined

timezone

string

'The timezone of the "value" or "defaultValue" prop if defined, "default" otherwise.'

Name: timezone
Description: Choose which timezone to use for the value. Example: "default", "system", "UTC", "America/New_York". If you pass values from other timezones to some props, they will be converted to this timezone before being used.
Type: string | undefined
Default: 'The timezone of the "value" or "defaultValue" prop if defined, "default" otherwise.'

visibleDate

Date

—

Name: visibleDate
Description: The date used to decide which month should be displayed in the Day Grid. To render an uncontrolled Calendar, use the defaultVisibleDate prop instead.
Type: Date | undefined

disabled

boolean

false

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

readOnly

boolean

false

Name: readOnly
Description: Whether the user should be unable to select a date in the calendar.
Type: boolean | undefined
Default: false

invalid

boolean

—

Name: invalid
Description: Whether the calendar is forcefully marked as invalid.
Type: boolean | undefined

children

ReactNode | ((parameters: CalendarContext) => ReactNode)

—

Name: children
Description: The children of the component. If a function is provided, it will be called with the public context as its parameter.
Type: | React.ReactNode | ((parameters: CalendarContext) => ReactNode)

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Calendar.Root.State) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.Root.State, ) => ReactElement)

data-disabled

Present when the calendar is disabled.

data-readonly

Present when the calendar is readonly.

data-invalid

Present when the current value is invalid.

data-empty

Present when the current value is empty.

data-navigation-direction

Indicates the direction of the navigation (based on the month navigating to).

Attribute	Description
`data-disabled`	Present when the calendar is disabled.
`data-readonly`	Present when the calendar is readonly.
`data-invalid`	Present when the current value is invalid.
`data-empty`	Present when the current value is empty.
`data-navigation-direction`	Indicates the direction of the navigation (based on the month navigating to).

DayGrid

Groups all the parts of the calendar's day grid. Renders a <table> element.

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGrid.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Calendar.DayGrid.State) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGrid.State, ) => ReactElement)

DayGridHeader

Groups all parts of the calendar's day grid header. Renders a <thead> element.

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGridHeader.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayGridHeader.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGridHeader.State, ) => ReactElement)

DayGridHeaderCell

An individual day header cell in the calendar. Renders a <th> element.

value^*

Date

—

Name: value
Type: Date

formatter

((date: Date) => string)

(date) => adapter.format(date, 'weekday3Letters').charAt(0).toUpperCase()

Name: formatter
Description: The formatter function used to display the day of the week.
Type: ((date: Date) => string) | undefined
Default: (date) => adapter.format(date, 'weekday3Letters').charAt(0).toUpperCase()

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGridHeaderCell.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayGridHeaderCell.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGridHeaderCell.State, ) => ReactElement)

DayGridBody

Groups all parts of the calendar's day grid. Renders a <tbody> element.

fixedWeekNumber

number

—

Name: fixedWeekNumber
Description: Will render the requested amount of weeks by adding weeks of the next month if needed. Set it to 6 to create a Gregorian calendar where all months have the same amount of weeks.
Type: number | undefined

offset

number

0

Name: offset
Description: The offset to apply to the rendered month compared to the current month. This is mostly useful when displaying multiple day grids.
Type: number | undefined
Default: 0

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGridBody.State, ) => CSSProperties | undefined) | undefined

children

ReactNode | ((week: Date, index: number, weeks: Date[]) => ReactNode)

—

Name: children
Description: The children of the component. If a function is provided, it will be called for each week to render as its parameter.
Type: | React.ReactNode | (( week: Date, index: number, weeks: Date[], ) => ReactNode)

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayGridBody.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGridBody.State, ) => ReactElement)

DayGridRow

Groups all cells of a given calendar's day grid row. Renders a <tr> element.

value^*

Date

—

Name: value
Description: The date object representing the week.
Type: Date

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGridRow.State, ) => CSSProperties | undefined) | undefined

children

ReactNode | ((day: Date, index: number, days: Date[]) => ReactNode)

—

Name: children
Description: The children of the component. If a function is provided, it will be called for each day of the week as its parameter.
Type: | React.ReactNode | ((day: Date, index: number, days: Date[]) => ReactNode)

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayGridRow.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGridRow.State, ) => ReactElement)

DayGridCell

An individual day cell in the calendar. Renders a <td> element.

value^*

Date

—

Name: value
Description: The value to select when this cell is clicked.
Type: Date

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayGridCell.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayGridCell.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayGridCell.State, ) => ReactElement)

DayButton

An individual interactive day button in the calendar. Renders a <button> element.

nativeButton

boolean

true

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.DayButton.State, ) => CSSProperties | undefined) | undefined

format

string

adapter.formats.dayOfMonth

Name: format
Description: The format used to display the day.
Type: string | undefined
Default: adapter.formats.dayOfMonth

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.DayButton.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.DayButton.State, ) => ReactElement)

data-selected

Present when the day is selected.

data-disabled

Present when the day is disabled.

data-current

Present when the day is the current date.

data-outside-month

Present when the day is outside the month rendered by the day grid wrapping it.

data-unavailable

Present when the day is unavailable.

Attribute	Description
`data-selected`	Present when the day is selected.
`data-disabled`	Present when the day is disabled.
`data-current`	Present when the day is the current date.
`data-outside-month`	Present when the day is outside the month rendered by the day grid wrapping it.
`data-unavailable`	Present when the day is unavailable.

SetMonth

Displays an element to navigate to a given month in the calendar. Renders a <button> element.

nativeButton

boolean

true

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.SetMonth.State, ) => CSSProperties | undefined) | undefined

target^*

Date

—

Name: target
Description: The month to navigate to.
Type: Date

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Calendar.SetMonth.State) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.SetMonth.State, ) => ReactElement)

data-disabled

Present when the button is disabled.

Attribute	Description
`data-disabled`	Present when the button is disabled.

SetPreviousMonth

Displays an element to navigate to the previous month in the calendar. Renders a <button> element.

nativeButton

boolean

true

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.SetPreviousMonth.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.SetPreviousMonth.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.SetPreviousMonth.State, ) => ReactElement)

data-disabled

Present when the button is disabled.

Attribute	Description
`data-disabled`	Present when the button is disabled.

SetNextMonth

Displays an element to navigate to the next month in the calendar. Renders a <button> element.

nativeButton

boolean

true

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

style

Union

—

Name: style
Type: | React.CSSProperties | (( state: Calendar.SetNextMonth.State, ) => CSSProperties | undefined) | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Calendar.SetNextMonth.State, ) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Calendar.SetNextMonth.State, ) => ReactElement)

data-disabled

Present when the button is disabled.

Attribute	Description
`data-disabled`	Present when the button is disabled.

A viewport for displaying calendar month transitions. This component is only required if you want to animate certain part of a calendar when navigating between months. The first rendered child element has to handle a ref. Passes data-current to the currently visible content and data-previous to the previous content when animating between two. Doesn't render its own HTML element.

children^*

React.JSX.Element

—

Name: children
Description: The content to render inside the transition container.
Type: React.JSX.Element

data-current

Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.

data-navigation-direction

Indicates the direction of the navigation (based on the month navigating to).

data-previous

Applied to the direct child of the viewport that contains the exiting content when transitions are present.

data-starting-style

Present when the day grid body is animating in.

data-ending-style

Present when the day grid body is animating out.

Attribute	Description
`data-current`	Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
`data-navigation-direction`	Indicates the direction of the navigation (based on the month navigating to).
`data-previous`	Applied to the direct child of the viewport that contains the exiting content when transitions are present.
`data-starting-style`	Present when the day grid body is animating in.
`data-ending-style`	Present when the day grid body is animating out.

Examples

Validation

You can use the minDate and maxDate props to limit the range of selectable dates.

November 2025

S	M	T	W	T	F	S

November 2025

S	M	T	W	T	F	S

import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui-components/react/calendar';
import indexStyles from './index.module.css';
import styles from '../../calendar.module.css';

const today = new Date();

export default function MinMaxDateCalendars() {
  return (
    <div className={indexStyles.Wrapper}>
      <ValidationCalendar minDate={today} />
      <ValidationCalendar maxDate={today} />
    </div>
  );
}

function ValidationCalendar(props: Calendar.Root.Props) {
  return (
    <Calendar.Root className={styles.Root} {...props}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
              ◀
            </Calendar.SetPreviousMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.toString()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {(week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.toString()}
                  className={styles.DayGridRow}
                >
                  {(day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.toString()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  )}
                </Calendar.DayGridRow>
              )}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

Display week numbers

You can use useWeekList() and useDayList() hooks to build a calendar with additional DOM elements, like week numbers.

November 2025

#	S	M	T	W	T	F	S
44
45
46
47
48
49

import * as React from 'react';
import { format } from 'date-fns/format';
import { startOfWeek } from 'date-fns/startOfWeek';
import { startOfMonth } from 'date-fns/startOfMonth';
import { getWeek } from 'date-fns/getWeek';
import { Calendar } from '@base-ui-components/react/calendar';
import { unstable_useDayList as useDayList } from '@base-ui-components/react/use-day-list';
import { unstable_useWeekList as useWeekList } from '@base-ui-components/react/use-week-list';
import styles from '../../calendar.module.css';
import indexStyles from './index.module.css';

export default function CalendarWithWeekNumbers() {
  const getWeekList = useWeekList();
  const getDayList = useDayList();

  return (
    <Calendar.Root className={styles.Root}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
              ◀
            </Calendar.SetPreviousMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                <th
                  role="columnheader"
                  aria-label="Week number"
                  className={styles.DayGridHeaderCell}
                >
                  #
                </th>
                {getDayList({ date: startOfWeek(new Date()), amount: 7 }).map((day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.toString()}
                    className={styles.DayGridHeaderCell}
                  />
                ))}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {getWeekList({
                date: startOfMonth(visibleDate),
                amount: 'end-of-month',
              }).map((week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.toString()}
                  className={styles.DayGridRow}
                >
                  <th
                    className={indexStyles.DayWeekNumber}
                    scope="row"
                    aria-label={`Week ${getWeek(week)}`}
                  >
                    {getWeek(week)}
                  </th>
                  {getDayList({ date: week, amount: 7 }).map((day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.toString()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  ))}
                </Calendar.DayGridRow>
              ))}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

Timezone support

You can use the timezone prop to display data in the calendar in your preferred timezone.

Timezone support is based on @date-fns/tz.

Calendar is displayed in America/New_York timezone.

April 2025

S	M	T	W	T	F	S

Stored date: Thu Apr 17 2025 04:45:00 GMT+0200 (Central European Summer Time)

import * as React from 'react';
import { format } from 'date-fns/format';
import { TZDate } from '@date-fns/tz';
import { Calendar } from '@base-ui-components/react/calendar';
import styles from '../../calendar.module.css';
import indexStyles from './index.module.css';

export default function CalendarWithTimezone() {
  const [value, setValue] = React.useState<Date | null>(
    new TZDate(2025, 3, 17, 4, 45, 0, 0, 'Europe/Paris'),
  );
  return (
    <div className={indexStyles.Wrapper}>
      <p className={indexStyles.Text}>
        Calendar is displayed in <strong>America/New_York</strong> timezone.
      </p>
      <Calendar.Root
        className={styles.Root}
        timezone="America/New_York"
        value={value}
        onValueChange={setValue}
      >
        {({ visibleDate }) => (
          <React.Fragment>
            <header className={styles.Header}>
              <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
                ◀
              </Calendar.SetPreviousMonth>
              <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
              <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
            </header>
            <Calendar.DayGrid className={styles.DayGrid}>
              <Calendar.DayGridHeader className={styles.DayGridHeader}>
                <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                  {(day) => (
                    <Calendar.DayGridHeaderCell
                      value={day}
                      key={day.toString()}
                      className={styles.DayGridHeaderCell}
                    />
                  )}
                </Calendar.DayGridHeaderRow>
              </Calendar.DayGridHeader>
              <Calendar.DayGridBody className={styles.DayGridBody}>
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.toString()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.toString()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </Calendar.DayGrid>
          </React.Fragment>
        )}
      </Calendar.Root>
      {value && <p className={indexStyles.Text}>Stored date: {value.toString()}</p>}
    </div>
  );
}

Animating month changes

You can use the <Calendar.Viewport> component to animate month transitions. Wrapping the <Calendar.DayGridBody> in the <Calendar.Viewport> renders the previous month if a transition is in progress.

November 2025

S	M	T	W	T	F	S

import * as React from 'react';
import clsx from 'clsx';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui-components/react/calendar';
import styles from '../../calendar.module.css';
import indexStyles from './index.module.css';

export default function AnimatedCalendar() {
  return (
    <Calendar.Root className={clsx(styles.Root, indexStyles.Root)}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
              ◀
            </Calendar.SetPreviousMonth>
            <div className={indexStyles.HeaderLabelWrapper}>
              <Calendar.Viewport>
                <span className={clsx(styles.HeaderLabel, indexStyles.HeaderLabel)}>
                  {format(visibleDate, 'MMMM yyyy')}
                </span>
              </Calendar.Viewport>
            </div>
            <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
          </header>
          <Calendar.DayGrid className={clsx(styles.DayGrid, indexStyles.DayGrid)}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.toString()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.Viewport>
              <Calendar.DayGridBody className={clsx(styles.DayGridBody, indexStyles.DayGridBody)}>
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.toString()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.toString()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </Calendar.Viewport>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

Animating with `motion/react`

You can use external animation libraries like Framer Motion to animate month transitions.

November 2025

S	M	T	W	T	F	S

import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui-components/react/calendar';
import { motion, AnimatePresence } from 'motion/react';
import styles from '../../calendar.module.css';

export default function AnimatedCalendarWithMotion() {
  return (
    <Calendar.Root className={styles.Root}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.SetPreviousMonth className={styles.SetPreviousMonth}>
              ◀
            </Calendar.SetPreviousMonth>
            <AnimatePresence initial={false} mode="popLayout">
              <motion.span layout className={styles.HeaderLabel}>
                {format(visibleDate, 'MMMM yyyy')}
              </motion.span>
            </AnimatePresence>
            <Calendar.SetNextMonth className={styles.SetNextMonth}>▶</Calendar.SetNextMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.toString()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <AnimatePresence initial={false} mode="popLayout">
              <Calendar.DayGridBody
                key={`${visibleDate.getUTCFullYear()}-${visibleDate.getMonth()}`}
                className={styles.DayGridBody}
                render={
                  <motion.tbody
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0 }}
                  />
                }
              >
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.toString()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.toString()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </AnimatePresence>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

Calendar

Animating with motion/react

Animating with `motion/react`