Calendar

An easily stylable calendar component.

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css theme.css

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

export default function ExampleCalendar() {
  return (
    <Calendar.Root className={styles.Root}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.getTime()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {(week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.getTime()}
                  className={styles.DayGridRow}
                >
                  {(day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.getTime()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  )}
                </Calendar.DayGridRow>
              )}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

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

<Calendar.Root>
  <Calendar.DecrementMonth />
  <Calendar.IncrementMonth />
  <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>

Examples

Unavailable dates

You can use the isDateUnavailable() prop to mark specific dates as unavailable. Unavailable dates are visually indicated and cannot be selected, but are focusable.

This example disables weekends, US holidays, and the first Monday of every month.

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css theme.css

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

const holidays: Array<[number, number]> = [
  [0, 1], // New Year's Day
  [6, 4], // Independence Day
  [10, 11], // Veterans Day
  [11, 25], // Christmas Day
];

function isDateUnavailable(date: Date) {
  const day = date.getDay();
  const month = date.getMonth();
  const dayOfMonth = date.getDate();

  // Weekends
  if (day === 0 || day === 6) {
    return true;
  }

  // US holidays
  if (holidays.some(([m, d]) => month === m && dayOfMonth === d)) {
    return true;
  }

  // First Monday of every month (maintenance day)
  if (day === 1 && dayOfMonth <= 7) {
    return true;
  }

  return false;
}

export default function UnavailableDatesCalendar() {
  return (
    <Calendar.Root
      className={styles.Root}
      isDateUnavailable={isDateUnavailable}
      aria-label="Appointment date"
    >
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.getTime()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {(week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.getTime()}
                  className={styles.DayGridRow}
                >
                  {(day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.getTime()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  )}
                </Calendar.DayGridRow>
              )}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Validation

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

March 2026

S	M	T	W	T	F	S

March 2026

S	M	T	W	T	F	S

index.tsx index.module.css calendar.module.css theme.css

'use client';
import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui/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.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.getTime()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.DayGridBody className={styles.DayGridBody}>
              {(week) => (
                <Calendar.DayGridRow
                  value={week}
                  key={week.getTime()}
                  className={styles.DayGridRow}
                >
                  {(day) => (
                    <Calendar.DayGridCell
                      value={day}
                      key={day.getTime()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  )}
                </Calendar.DayGridRow>
              )}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Lazy loading

You can render custom content inside <Calendar.DayButton> and use Calendar.useContext() to react to month changes — for example, to lazily load per-day data.

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css index.module.css theme.css

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

function DayPrice({
  loading,
  price,
  isDeal,
  loadingDelay,
  revealDelay,
}: {
  loading: boolean;
  price: number | null | undefined;
  isDeal: boolean;
  loadingDelay: string;
  revealDelay: string;
}) {
  if (loading) {
    return (
      <span
        className={indexStyles.Skeleton}
        style={{ animationDelay: loadingDelay }}
        aria-hidden="true"
      />
    );
  }
  if (price != null) {
    return (
      <span
        className={clsx(indexStyles.Price, isDeal && indexStyles.PriceDeal)}
        style={{ animationDelay: revealDelay }}
      >
        ${price}
      </span>
    );
  }
  return (
    <span className={indexStyles.PriceSoldOut} style={{ animationDelay: revealDelay }}>
      —
    </span>
  );
}

function CalendarContent() {
  const { visibleDate } = Calendar.useContext();
  const [prices, setPrices] = React.useState<Record<string, number | null>>({});
  const [loading, setLoading] = React.useState(true);
  const timeout = useTimeout();

  const monthKey = format(visibleDate, 'yyyy-MM');

  React.useEffect(() => {
    const year = parseInt(monthKey.split('-')[0], 10);
    const month = parseInt(monthKey.split('-')[1], 10) - 1;
    setLoading(true);
    timeout.start(800, () => {
      setPrices((prev) => ({ ...prev, ...generateMonthPrices(year, month) }));
      setLoading(false);
    });
  }, [monthKey, timeout]);

  const minPrice = React.useMemo(() => {
    const monthPrices = Object.entries(prices)
      .filter(([key]) => key.startsWith(monthKey))
      .flatMap(([, p]) => (p != null ? [p] : []));
    return monthPrices.length > 0 ? Math.min(...monthPrices) : null;
  }, [prices, monthKey]);

  return (
    <React.Fragment>
      <header className={styles.Header}>
        <Calendar.DecrementMonth className={styles.DecrementMonth}>
          <ChevronLeftIcon />
        </Calendar.DecrementMonth>
        <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
        <Calendar.IncrementMonth className={styles.IncrementMonth}>
          <ChevronRightIcon />
        </Calendar.IncrementMonth>
      </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.getTime()}
                className={clsx(styles.DayGridHeaderCell, indexStyles.DayGridHeaderCell)}
              />
            )}
          </Calendar.DayGridHeaderRow>
        </Calendar.DayGridHeader>
        <Calendar.DayGridBody className={styles.DayGridBody}>
          {(week) => (
            <Calendar.DayGridRow value={week} key={week.getTime()} className={styles.DayGridRow}>
              {(day) => {
                const dateKey = format(day, 'yyyy-MM-dd');
                const inCurrentMonth = dateKey.startsWith(monthKey);
                const price = prices[dateKey];
                const isDeal = inCurrentMonth && price != null && price === minPrice;
                const daySeed =
                  day.getFullYear() * 10000 + (day.getMonth() + 1) * 100 + day.getDate();
                const loadingDelay = `${(seededRandom(daySeed + 50) * 0.4).toFixed(3)}s`;
                const revealDelay = `${(seededRandom(daySeed + 60) * 0.5).toFixed(3)}s`;
                return (
                  <Calendar.DayGridCell
                    value={day}
                    key={day.getTime()}
                    className={styles.DayGridCell}
                  >
                    <Calendar.DayButton className={clsx(styles.DayButton, indexStyles.DayButton)}>
                      <span className={indexStyles.DayNumber}>{format(day, 'd')}</span>
                      {inCurrentMonth && (
                        <DayPrice
                          loading={loading}
                          price={price}                          isDeal={isDeal}
                          loadingDelay={loadingDelay}
                          revealDelay={revealDelay}
                        />
                      )}
                    </Calendar.DayButton>
                  </Calendar.DayGridCell>
                );
              }}
            </Calendar.DayGridRow>
          )}
        </Calendar.DayGridBody>
      </Calendar.DayGrid>
    </React.Fragment>
  );
}

export default function FlightPriceCalendar() {
  return (
    <Calendar.Root
      className={clsx(styles.Root, indexStyles.Root)}
      aria-label="Flight departure date"
    >
      <CalendarContent />
    </Calendar.Root>
  );
}

function seededRandom(seed: number) {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

function generateMonthPrices(year: number, month: number): Record<string, number | null> {
  const prices: Record<string, number | null> = {};
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  for (let d = 1; d <= daysInMonth; d += 1) {
    const date = new Date(year, month, d);
    const dateKey = format(date, 'yyyy-MM-dd');
    const seed = year * 10000 + (month + 1) * 100 + d;
    const rand = seededRandom(seed);
    prices[dateKey] = rand < 0.15 ? null : Math.floor(79 + seededRandom(seed + 1) * 320);
  }
  return prices;
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Display week numbers

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

March 2026

#	S	M	T	W	T	F	S
10
11
12
13
14

index.tsx calendar.module.css index.module.css theme.css

'use client';
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/react/calendar';
import styles from './calendar.module.css';
import indexStyles from './index.module.css';

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

  return (
    <Calendar.Root className={styles.Root}>
      {({ visibleDate }) => (
        <React.Fragment>
          <header className={styles.Header}>
            <Calendar.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </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.getTime()}
                    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.getTime()}
                  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.getTime()}
                      className={styles.DayGridCell}
                    >
                      <Calendar.DayButton className={styles.DayButton} />
                    </Calendar.DayGridCell>
                  ))}
                </Calendar.DayGridRow>
              ))}
            </Calendar.DayGridBody>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

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)

index.tsx calendar.module.css index.module.css theme.css

'use client';
import * as React from 'react';
import { format } from 'date-fns/format';
import { TZDate } from '@date-fns/tz';
import { Calendar } from '@base-ui/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.DecrementMonth className={styles.DecrementMonth}>
                <ChevronLeftIcon />
              </Calendar.DecrementMonth>
              <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
              <Calendar.IncrementMonth className={styles.IncrementMonth}>
                <ChevronRightIcon />
              </Calendar.IncrementMonth>
            </header>
            <Calendar.DayGrid className={styles.DayGrid}>
              <Calendar.DayGridHeader className={styles.DayGridHeader}>
                <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                  {(day) => (
                    <Calendar.DayGridHeaderCell
                      value={day}
                      key={day.getTime()}
                      className={styles.DayGridHeaderCell}
                    />
                  )}
                </Calendar.DayGridHeaderRow>
              </Calendar.DayGridHeader>
              <Calendar.DayGridBody className={styles.DayGridBody}>
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.getTime()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.getTime()}
                        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>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

The calendar can display the date in a selected timezone.

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css index.module.css theme.css

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

export default function CalendarWithTimezoneDisplay() {
  const [timezone, setTimezone] = React.useState<Timezone | null>('Australia/Sydney');
  return (
    <div className={indexStyles.Wrapper}>
      <TimezoneSelect
        value={timezone}
        onValueChange={(value) => setTimezone(value as Timezone | null)}
      />
      <Calendar.Root className={styles.Root} timezone={timezone ?? undefined}>
        {({ visibleDate }) => (
          <React.Fragment>
            <header className={styles.Header}>
              <Calendar.DecrementMonth className={styles.DecrementMonth}>
                <ChevronLeftIcon />
              </Calendar.DecrementMonth>
              <span className={styles.HeaderLabel}>{format(visibleDate, 'MMMM yyyy')}</span>
              <Calendar.IncrementMonth className={styles.IncrementMonth}>
                <ChevronRightIcon />
              </Calendar.IncrementMonth>
            </header>
            <Calendar.DayGrid className={styles.DayGrid}>
              <Calendar.DayGridHeader className={styles.DayGridHeader}>
                <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                  {(day) => (
                    <Calendar.DayGridHeaderCell
                      value={day}
                      key={day.getTime()}
                      className={styles.DayGridHeaderCell}
                    />
                  )}
                </Calendar.DayGridHeaderRow>
              </Calendar.DayGridHeader>
              <Calendar.DayGridBody className={styles.DayGridBody}>
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.getTime()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.getTime()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </Calendar.DayGrid>
          </React.Fragment>
        )}
      </Calendar.Root>
    </div>
  );
}

function TimezoneSelect(props: Omit<Select.Root.Props<string, false>, 'children'>) {
  return (
    <Select.Root {...props}>
      <Select.Trigger className={indexStyles.Select}>
        <Select.Value placeholder="Select timezone" />
        <Select.Icon className={indexStyles.SelectIcon}>
          <ChevronUpDownIcon />
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner className={indexStyles.Positioner} sideOffset={8}>
          <Select.Popup className={indexStyles.Popup}>
            <Select.ScrollUpArrow className={indexStyles.ScrollArrow} />
            <Select.List className={indexStyles.List}>
              {timezones.map((timezone) => (
                <Select.Item key={timezone} value={timezone} className={indexStyles.Item}>
                  <Select.ItemIndicator className={indexStyles.ItemIndicator}>
                    <CheckIcon className={indexStyles.ItemIndicatorIcon} />
                  </Select.ItemIndicator>
                  <Select.ItemText className={indexStyles.ItemText}>{timezone}</Select.ItemText>
                </Select.Item>
              ))}
            </Select.List>
            <Select.ScrollDownArrow className={indexStyles.ScrollArrow} />
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
}

type Timezone = (typeof timezones)[number];

const timezones = [
  'America/Los_Angeles',
  'Europe/Paris',
  'Asia/Tokyo',
  'Australia/Sydney',
] as const;

function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="8"
      height="12"
      viewBox="0 0 8 12"
      fill="none"
      stroke="currentcolor"
      strokeWidth="1.5"
      {...props}
    >
      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
      <path d="M0.5 7.5L4 10.5L7.5 7.5" />    </svg>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
    </svg>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Month and year select

Use Calendar.useContext() inside the calendar to read visibleDate and call setVisibleDate, enabling custom controls like the Select component for direct month and year navigation.

S	M	T	W	T	F	S

index.tsx calendar.module.css index.module.css theme.css

'use client';
import * as React from 'react';
import { format } from 'date-fns/format';
import { getMonth } from 'date-fns/getMonth';
import { getYear } from 'date-fns/getYear';
import { Calendar } from '@base-ui/react/calendar';
import { Select } from '@base-ui/react/select';
import styles from './calendar.module.css';
import indexStyles from './index.module.css';

const YEAR_PAST = 40;
const YEAR_FUTURE = 10;
const MONTHS = Array.from({ length: 12 }, (_, i) => format(new Date(2000, i, 1), 'MMMM'));

function CalendarContent() {
  const { visibleDate, setVisibleDate } = Calendar.useContext();
  const currentMonth = getMonth(visibleDate);
  const currentYear = getYear(visibleDate);
  const todayYear = getYear(new Date());
  const years = Array.from(
    { length: YEAR_PAST + YEAR_FUTURE + 1 },
    (_, i) => todayYear - YEAR_PAST + i,
  );

  return (
    <React.Fragment>
      <header className={styles.Header}>
        <Calendar.DecrementMonth className={styles.DecrementMonth}>
          <ChevronLeftIcon />
        </Calendar.DecrementMonth>
        <div className={indexStyles.HeaderSelectWrapper}>
          <Select.Root
            value={currentMonth}
            onValueChange={(value, eventDetails) => {
              if (value != null) {
                setVisibleDate(
                  new Date(currentYear, value, 1),
                  eventDetails.event,
                  eventDetails.trigger as HTMLElement,
                  'month-change',
                );
              }
            }}
          >
            <Select.Trigger className={indexStyles.Select} aria-label="Month" data-month-select>
              <Select.Value>{(value: number) => MONTHS[value]}</Select.Value>
              <Select.Icon className={indexStyles.SelectIcon}>
                <ChevronUpDownIcon />
              </Select.Icon>
            </Select.Trigger>
            <Select.Portal>
              <Select.Positioner className={indexStyles.Positioner} sideOffset={8}>
                <Select.Popup className={indexStyles.Popup}>
                  <Select.ScrollUpArrow className={indexStyles.ScrollArrow} />
                  <Select.List className={indexStyles.List}>
                    {MONTHS.map((name, index) => (
                      <Select.Item key={name} value={index} className={indexStyles.Item}>
                        <Select.ItemIndicator className={indexStyles.ItemIndicator}>
                          <CheckIcon className={indexStyles.ItemIndicatorIcon} />
                        </Select.ItemIndicator>
                        <Select.ItemText className={indexStyles.ItemText}>{name}</Select.ItemText>
                      </Select.Item>
                    ))}
                  </Select.List>
                  <Select.ScrollDownArrow className={indexStyles.ScrollArrow} />
                </Select.Popup>
              </Select.Positioner>
            </Select.Portal>
          </Select.Root>
          <Select.Root
            value={currentYear}
            onValueChange={(value, eventDetails) => {
              if (value != null) {
                setVisibleDate(
                  new Date(value, currentMonth, 1),
                  eventDetails.event,
                  eventDetails.trigger as HTMLElement,
                  'month-change',
                );
              }
            }}
          >
            <Select.Trigger className={indexStyles.Select} aria-label="Year">
              <Select.Value />
              <Select.Icon className={indexStyles.SelectIcon}>
                <ChevronUpDownIcon />
              </Select.Icon>
            </Select.Trigger>
            <Select.Portal>
              <Select.Positioner className={indexStyles.Positioner} sideOffset={8}>
                <Select.Popup className={indexStyles.Popup}>
                  <Select.ScrollUpArrow className={indexStyles.ScrollArrow} />
                  <Select.List className={indexStyles.List}>
                    {years.map((year) => (
                      <Select.Item key={year} value={year} className={indexStyles.Item}>
                        <Select.ItemIndicator className={indexStyles.ItemIndicator}>
                          <CheckIcon className={indexStyles.ItemIndicatorIcon} />
                        </Select.ItemIndicator>
                        <Select.ItemText className={indexStyles.ItemText}>{year}</Select.ItemText>
                      </Select.Item>
                    ))}
                  </Select.List>
                  <Select.ScrollDownArrow className={indexStyles.ScrollArrow} />
                </Select.Popup>
              </Select.Positioner>
            </Select.Portal>
          </Select.Root>
        </div>
        <Calendar.IncrementMonth className={styles.IncrementMonth}>
          <ChevronRightIcon />
        </Calendar.IncrementMonth>
      </header>
      <Calendar.DayGrid className={styles.DayGrid}>
        <Calendar.DayGridHeader className={styles.DayGridHeader}>
          <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
            {(day) => (
              <Calendar.DayGridHeaderCell
                value={day}
                key={day.getTime()}
                className={styles.DayGridHeaderCell}              />
            )}
          </Calendar.DayGridHeaderRow>
        </Calendar.DayGridHeader>
        <Calendar.DayGridBody className={styles.DayGridBody}>
          {(week) => (
            <Calendar.DayGridRow value={week} key={week.getTime()} className={styles.DayGridRow}>
              {(day) => (
                <Calendar.DayGridCell
                  value={day}
                  key={day.getTime()}
                  className={styles.DayGridCell}
                >
                  <Calendar.DayButton className={styles.DayButton} />
                </Calendar.DayGridCell>
              )}
            </Calendar.DayGridRow>
          )}
        </Calendar.DayGridBody>
      </Calendar.DayGrid>
    </React.Fragment>
  );
}

export default function ExampleCalendarYearMonthSelect() {
  return (
    <Calendar.Root className={styles.Root}>
      <CalendarContent />
    </Calendar.Root>
  );
}

function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="8"
      height="12"
      viewBox="0 0 8 12"
      fill="none"
      stroke="currentcolor"
      strokeWidth="1.5"
      {...props}
    >
      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
    </svg>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
    </svg>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

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.

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css index.module.css theme.css

'use client';
import * as React from 'react';
import clsx from 'clsx';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui/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.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <div className={indexStyles.HeaderLabelWrapper}>
              <Calendar.Viewport>
                <span className={clsx(styles.HeaderLabel, indexStyles.HeaderLabel)}>
                  {format(visibleDate, 'MMMM yyyy')}
                </span>
              </Calendar.Viewport>
            </div>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </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.getTime()}
                    className={styles.DayGridHeaderCell}
                  />
                )}
              </Calendar.DayGridHeaderRow>
            </Calendar.DayGridHeader>
            <Calendar.Viewport>
              <Calendar.DayGridBody className={clsx(styles.DayGridBody, indexStyles.DayGridBody)}>
                {(week) => (
                  <Calendar.DayGridRow
                    value={week}
                    key={week.getTime()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.getTime()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </Calendar.Viewport>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Animating with `motion/react`

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

March 2026

S	M	T	W	T	F	S

index.tsx calendar.module.css theme.css

'use client';
import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui/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.DecrementMonth className={styles.DecrementMonth}>
              <ChevronLeftIcon />
            </Calendar.DecrementMonth>
            <AnimatePresence initial={false} mode="popLayout">
              <motion.span layout className={styles.HeaderLabel}>
                {format(visibleDate, 'MMMM yyyy')}
              </motion.span>
            </AnimatePresence>
            <Calendar.IncrementMonth className={styles.IncrementMonth}>
              <ChevronRightIcon />
            </Calendar.IncrementMonth>
          </header>
          <Calendar.DayGrid className={styles.DayGrid}>
            <Calendar.DayGridHeader className={styles.DayGridHeader}>
              <Calendar.DayGridHeaderRow className={styles.DayGridHeaderRow}>
                {(day) => (
                  <Calendar.DayGridHeaderCell
                    value={day}
                    key={day.getTime()}
                    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.getTime()}
                    className={styles.DayGridRow}
                  >
                    {(day) => (
                      <Calendar.DayGridCell
                        value={day}
                        key={day.getTime()}
                        className={styles.DayGridCell}
                      >
                        <Calendar.DayButton className={styles.DayButton} />
                      </Calendar.DayGridCell>
                    )}
                  </Calendar.DayGridRow>
                )}
              </Calendar.DayGridBody>
            </AnimatePresence>
          </Calendar.DayGrid>
        </React.Fragment>
      )}
    </Calendar.Root>
  );
}

function ChevronLeftIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentcolor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

Localization

The calendar’s locale is controlled by the date library. It handles month and day names, as well as the start of the week. You can use the <LocalizationProvider> to customize these settings.

API reference

Root

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

defaultValueTemporalValue—

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

valueTemporalValue—

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

onValueChangefunction—

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: CalendarValueChangeEventDetails<ValidateDateReturnValue>, ) => void) | undefined

defaultVisibleDateDate—

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

visibleDateDate—

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

onVisibleDateChangefunction—

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

isDateUnavailablefunction—

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

maxDateDate—

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

minDateDate—

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

monthPageSizenumber1

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

referenceDateDate'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. It can be used to:

set a desired time on the selected date;

set a desired default year or month;
Type: Date | undefined
Default: 'The closest valid date using the validation props.'

timezonestring'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.'

disabledbooleanfalse

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

readOnlybooleanfalse

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

invalidbooleanfalse

Name: invalid
Description: Whether the calendar is forcefully marked as invalid. A calendar can be invalid when the selected date fails validation (that is, is outside of the allowed minDate and maxDate range).
Type: boolean | undefined
Default: false

children

| React.ReactNode 
|  ((parameters: CalendarContext) => React.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) => React.ReactNode) | undefined

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

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 (fails validation).

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 (fails validation).
`data-empty`	Present when the current value is empty.
`data-navigation-direction`	Indicates the direction of the navigation (based on the month navigating to).

Calendar.Root.PropsHide

Re-Export of Root props as CalendarRootProps

Calendar.Root.StateHide

type CalendarRootState = {
  /** Whether the current value is empty. */
  empty: boolean;
  /** Whether the current value is invalid. */
  invalid: boolean;
  /** Whether the calendar is disabled. */
  disabled: boolean;
  /** Whether the calendar is readonly. */
  readOnly?: boolean;
  /** The direction of the navigation (based on the month navigating to). */
  navigationDirection: CalendarNavigationDirection;
}

Calendar.Root.ChangeEventReasonHide

type CalendarRootChangeEventReason =
  | 'month-change'
  | 'value-prop-change'
  | 'day-press'
  | 'keyboard'

Calendar.Root.NavigationDirectionHide

type CalendarRootNavigationDirection = 'previous' | 'next' | 'none'

Calendar.Root.ValueChangeEventDetailsHide

type CalendarRootValueChangeEventDetails = (
  | { reason: 'month-change'; event: Event }
  | { reason: 'value-prop-change'; event: Event }
  | { reason: 'day-press'; event: Event }
  | { reason: 'keyboard'; event: KeyboardEvent }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** The validation error associated to the new value. */
  getValidationError: () => ValidateDateReturnValue;
}

Calendar.Root.ValueChangeHandlerContextHide

type CalendarRootValueChangeHandlerContext = {
  /** The validation error associated to the new value. */
  getValidationError: () => ValidateDateReturnValue;
}

Calendar.Root.VisibleDateChangeEventDetailsHide

type CalendarRootVisibleDateChangeEventDetails = (
  | { reason: 'month-change'; event: Event }
  | { reason: 'value-prop-change'; event: Event }
  | { reason: 'day-press'; event: Event }
  | { reason: 'keyboard'; event: KeyboardEvent }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

DayGrid

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

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGrid.PropsHide

Re-Export of DayGrid props as CalendarDayGridProps

Calendar.DayGrid.StateHide

type CalendarDayGridState = {}

DayGridHeader

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

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGridHeader.PropsHide

Re-Export of DayGridHeader props as CalendarDayGridHeaderProps

Calendar.DayGridHeader.StateHide

type CalendarDayGridHeaderState = {}

DayGridHeaderCell

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

value^*

Date

—

Name: value
Type: Date

formatterfunction(date) => adapter.format(date, 'EEE').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, 'EEE').charAt(0).toUpperCase()

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGridHeaderCell.PropsHide

Re-Export of DayGridHeaderCell props as CalendarDayGridHeaderCellProps

Calendar.DayGridHeaderCell.StateHide

type CalendarDayGridHeaderCellState = {}

DayGridBody

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

fixedWeekNumbernumber—

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 number of weeks.
Type: number | undefined

offsetnumber0

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

children

| React.ReactNode 
|  ((week: Date, index: number, weeks: Date[]) => React.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[], ) => React.ReactNode) | undefined

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGridBody.PropsHide

Re-Export of DayGridBody props as CalendarDayGridBodyProps

Calendar.DayGridBody.StateHide

type CalendarDayGridBodyState = {}

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

children

| React.ReactNode 
|  ((day: Date, index: number, days: Date[]) => React.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[], ) => React.ReactNode) | undefined

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGridRow.PropsHide

Re-Export of DayGridRow props as CalendarDayGridRowProps

Calendar.DayGridRow.StateHide

type CalendarDayGridRowState = {}

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

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

Calendar.DayGridCell.PropsHide

Re-Export of DayGridCell props as CalendarDayGridCellProps

Calendar.DayGridCell.StateHide

type CalendarDayGridCellState = {}

DayButton

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

focusableWhenDisabledbooleanfalse

Name: focusableWhenDisabled
Description: When true the item remains focusable when disabled.
Type: boolean | undefined
Default: false

nativeButtonbooleantrue

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 (for example, <div>).
Type: boolean | undefined
Default: true

formatstringadapter.formats.dayOfMonth

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

classNamestring | 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) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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) | undefined

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.

Calendar.DayButton.PropsHide

Re-Export of DayButton props as CalendarDayButtonProps

Calendar.DayButton.StateHide

type CalendarDayButtonState = {
  /** Whether the day is selected. */
  selected: boolean;
  /** Whether the day is disabled. */
  disabled: boolean;
  /** Whether the day is not available. */
  unavailable: boolean;
  /** Whether the day contains the current date. */
  current: boolean;
  /** Whether the day is outside the month rendered by the day grid wrapping it. */
  outsideMonth: boolean;
}

DecrementMonth

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

nativeButtonbooleantrue

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 (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | 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.DecrementMonth.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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.DecrementMonth.State, ) => ReactElement) | undefined

data-disabled

Present when the button is disabled.

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

Calendar.DecrementMonth.PropsHide

Re-Export of DecrementMonth props as CalendarDecrementMonthProps

Calendar.DecrementMonth.StateHide

type CalendarDecrementMonthState = {
  /** Whether the button is disabled. */
  disabled: boolean;
}

IncrementMonth

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

nativeButtonbooleantrue

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 (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | 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.IncrementMonth.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

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

renderReactElement | 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.IncrementMonth.State, ) => ReactElement) | undefined

data-disabled

Present when the button is disabled.

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

Calendar.IncrementMonth.PropsHide

Re-Export of IncrementMonth props as CalendarIncrementMonthProps

Calendar.IncrementMonth.StateHide

type CalendarIncrementMonthState = {
  /** Whether the button is disabled. */
  disabled: boolean;
}

Viewport

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.

Calendar.Viewport.PropsHide

Re-Export of Viewport props as CalendarViewportProps

Calendar.Viewport.StateHide

type CalendarViewportState = {
  /** Indicates the direction of the navigation (based on the month navigating to). */
  navigationDirection: CalendarNavigationDirection;
}

Calendar

Animating with motion/react

Calendar.Root.PropsHide

Calendar.Root.StateHide

Calendar.Root.ChangeEventReasonHide

Calendar.Root.NavigationDirectionHide

Calendar.Root.ValueChangeEventDetailsHide

Calendar.Root.ValueChangeHandlerContextHide

Calendar.Root.VisibleDateChangeEventDetailsHide

Calendar.DayGrid.PropsHide

Calendar.DayGrid.StateHide

Calendar.DayGridHeader.PropsHide

Calendar.DayGridHeader.StateHide

Calendar.DayGridHeaderCell.PropsHide

Calendar.DayGridHeaderCell.StateHide

Calendar.DayGridBody.PropsHide

Calendar.DayGridBody.StateHide

Calendar.DayGridRow.PropsHide

Calendar.DayGridRow.StateHide

Calendar.DayGridCell.PropsHide

Calendar.DayGridCell.StateHide

Calendar.DayButton.PropsHide

Calendar.DayButton.StateHide

Calendar.DecrementMonth.PropsHide

Calendar.DecrementMonth.StateHide

Calendar.IncrementMonth.PropsHide

Calendar.IncrementMonth.StateHide

Calendar.Viewport.PropsHide

Calendar.Viewport.StateHide

Animating with `motion/react`