# Calendar

**📖 Live documentation:** https://cds.coinbase.com/components/other/Calendar/?platform=mobile

Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.

## Import

```tsx
import { Calendar } from '@coinbase/cds-mobile/dates/Calendar'
```

## Examples

Calendar is a date grid for selecting dates and powers the picker in [DatePicker](/components/other/DatePicker). It can be used standalone or inside a [Tray](/components/overlay/Tray) with a confirm action.

### Basic usage

A basic Calendar with date selection functionality. The Calendar component is used within the DatePicker and can also be used independently.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
}
```

### No selection

A Calendar without an initially selected date.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(null);

  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
}
```

### Seeding the calendar

The `seedDate` prop controls which month the Calendar opens to when there is no selected date value. Defaults to today when undefined.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(null);

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const seedDate = new Date(today.getFullYear(), today.getMonth() + 1, 15);

  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} seedDate={seedDate} />;
}
```

### Minimum and maximum dates

Use `minDate` and `maxDate` to restrict the selectable date range. Navigation to dates before the `minDate` and after the `maxDate` is disabled. Make sure to provide the `disabledDateError` prop.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
  const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      minDate={lastMonth15th}
      maxDate={nextMonth15th}
      disabledDateError="Date is outside allowed range"
    />
  );
}
```

### Future dates only

Restrict selection to future dates by setting `minDate` to today.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(null);

  const today = new Date(new Date().setHours(0, 0, 0, 0));

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      minDate={today}
      disabledDateError="Past dates are not available"
    />
  );
}
```

### Highlighted dates

Use `highlightedDates` to visually emphasize specific dates or date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
  const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      highlightedDates={[yesterday, today, nextWeek]}
    />
  );
}
```

### Disabled dates

Use `disabledDates` to prevent selection of specific dates or date ranges. Make sure to provide the `disabledDateError` prop.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(null);

  const today = new Date(new Date().setHours(0, 0, 0, 0));

  // Disable weekends for demonstration
  const getNextWeekendDates = (centerDate) => {
    const weekends = [];
    const currentDate = new Date(centerDate);

    // Find next 4 weekends
    for (let i = 0; i < 4; i++) {
      // Find next Saturday
      const daysUntilSaturday = (6 - currentDate.getDay() + 7) % 7 || 7;
      currentDate.setDate(currentDate.getDate() + daysUntilSaturday);

      const saturday = new Date(currentDate);
      const sunday = new Date(currentDate);
      sunday.setDate(sunday.getDate() + 1);

      weekends.push([saturday, sunday]);

      // Move to next week
      currentDate.setDate(currentDate.getDate() + 7);
    }

    return weekends;
  };

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      disabledDates={getNextWeekendDates(today)}
      disabledDateError="Weekends are not available"
    />
  );
}
```

### Date ranges

Highlight a date range using a tuple `[startDate, endDate]`.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
  const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      highlightedDates={[[yesterday, nextWeek]]}
    />
  );
}
```

### Hidden controls

Hide the navigation arrows with `hideControls`. This is typically used when `minDate` and `maxDate` are set to the first and last days of the same month.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      minDate={firstDayOfMonth}
      maxDate={lastDayOfMonth}
      hideControls
    />
  );
}
```

### Disabled

Disable the entire Calendar with the `disabled` prop.

```jsx
function Example() {
  const selectedDate = new Date();

  return <Calendar selectedDate={selectedDate} disabled />;
}
```

### Slot styling

Use the `styles` prop to target: **`root`** (outer container), **`header`** (month row), **`title`** (month/year text), **`navigation`** (both arrow buttons’ container), **`content`** (weekday row + date grid), and **`day`** (each date cell pressable — single `ViewStyle`).

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      styles={{
        root: {
          backgroundColor: 'lightgray',
          borderColor: '#ccc',
          borderRadius: 16,
          borderWidth: 1,
          padding: 12,
        },
        header: {
          backgroundColor: 'rgba(0, 120, 0, 0.1)',
          borderRadius: 16,
          paddingBottom: 0,
        },
        title: { opacity: 0.9 },
        navigation: {
          borderColor: '#888',
          borderRadius: 8,
          borderStyle: 'dashed',
          borderWidth: 1,
          padding: 4,
        },
        content: { paddingVertical: 8 },
        day: { borderRadius: 8 },
      }}
    />
  );
}
```

### Accessibility

Always provide accessibility labels for the navigation controls and error messages for disabled dates.

```jsx
function Example() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());

  return (
    <Calendar
      selectedDate={selectedDate}
      onPressDate={setSelectedDate}
      maxDate={nextMonth}
      disabledDateError="Date is not available for selection"
      nextArrowAccessibilityLabel="Go to next month"
      previousArrowAccessibilityLabel="Go to previous month"
      todayAccessibilityHint="Today"
      highlightedDateAccessibilityHint="Highlighted"
    />
  );
}
```

### Date selection with Chip trigger

When you need a compact trigger instead of the full [DateInput](/components/other/DateInput/) used in [DatePicker](/components/other/DatePicker/), you can use a [Chip](/components/inputs/Chip) (or similar control) to open a Tray with a Calendar and a confirm button.

```jsx
function Example() {
  const { locale } = useLocale();
  const [date, setDate] = useState(null);
  const [showPicker, setShowPicker] = useState(false);
  const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
  const calendarRef = useRef(null);

  const formatDateLabel = useCallback(
    (date, locale) =>
      date
        ? date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' })
        : 'Select date',
    [],
  );

  const handleOpenPicker = useCallback(() => {
    setCalendarSelectedDate(date);
    setShowPicker(true);
  }, [date]);

  const handleClosePicker = useCallback(() => setShowPicker(false), []);

  const handleCancelPicker = useCallback(() => {
    setCalendarSelectedDate(null);
    handleClosePicker();
  }, [handleClosePicker]);

  const handleCalendarDatePress = useCallback((selectedDate) => {
    setCalendarSelectedDate(selectedDate);
  }, []);

  const handleModalShow = useCallback(() => {
    calendarRef.current?.focusInitialDate();
  }, []);

  const handleConfirmCalendar = useCallback(() => {
    if (calendarSelectedDate) {
      setDate(calendarSelectedDate);
      handleClosePicker();
    }
  }, [calendarSelectedDate, handleClosePicker]);

  const formattedLabel = formatDateLabel(date, locale);

  const trayFooter = useMemo(
    () => (
      <Box paddingTop={3} paddingX={3}>
        <Button
          block
          compact
          accessibilityHint={!calendarSelectedDate ? 'Select a date first' : undefined}
          accessibilityLabel="Confirm date selection"
          disabled={!calendarSelectedDate}
          onPress={handleConfirmCalendar}
        >
          Confirm
        </Button>
      </Box>
    ),
    [calendarSelectedDate, handleConfirmCalendar],
  );

  return (
    <>
      <Box alignSelf="flex-start">
        <Chip
          compact
          accessibilityLabel={formattedLabel}
          end={<AnimatedCaret active color="fg" rotate={showPicker ? 0 : 180} size="xs" />}
          onPress={handleOpenPicker}
        >
          {formattedLabel}
        </Chip>
      </Box>
      {showPicker && (
        <Tray
          accessibilityRole="none"
          footer={trayFooter}
          handleBarAccessibilityLabel="Close calendar"
          handleBarVariant="inside"
          onCloseComplete={handleCancelPicker}
          onOpenComplete={handleModalShow}
        >
          <Calendar
            ref={calendarRef}
            onPressDate={handleCalendarDatePress}
            paddingBottom={2}
            paddingX={2}
            selectedDate={calendarSelectedDate}
          />
        </Tray>
      )}
    </>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
| `animated` | `boolean` | No | `-` | - |
| `aspectRatio` | `string \| number` | No | `-` | - |
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `disabled` | `boolean` | No | `-` | Disables user interaction. |
| `disabledDateError` | `string` | No | `'Date unavailable'` | Tooltip content shown when hovering or focusing a disabled date, including dates before the minDate or after the maxDate. |
| `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
| `display` | `flex \| none \| contents` | No | `-` | - |
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
| `flexGrow` | `number` | No | `-` | - |
| `flexShrink` | `number` | No | `-` | - |
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
| `font` | `inherit \| FontFamily` | No | `-` | - |
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `hideControls` | `boolean` | No | `-` | Hides the Calendar next and previous month arrows. This probably only makes sense to be used when minDate and maxDate are set to the first and last days of the same month. |
| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
| `highlightedDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of highlighted dates, and date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
| `key` | `Key \| null` | No | `-` | - |
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
| `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `nextArrowAccessibilityLabel` | `string` | No | `'Go to next month'` | Accessibility label describing the Calendar next month arrow. |
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPressDate` | `((date: Date) => void)` | No | `-` | Callback function fired when pressing a Calendar date. |
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `absolute \| relative \| static` | No | `-` | - |
| `previousArrowAccessibilityLabel` | `string` | No | `'Go to previous month'` | Accessibility label describing the Calendar previous month arrow. |
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
| `seedDate` | `Date` | No | `-` | Date used to generate the Calendar month when there is no value for the selectedDate prop, defaults to today. |
| `selectedDate` | `Date \| null` | No | `-` | Currently selected Calendar date. Date used to generate the Calendar month. Will be rendered with active styles. |
| `style` | `false \|  \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
| `styles` | `{ root?: StyleProp<ViewStyle>; header?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; navigation?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; day?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Calendar component. |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests. |
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
| `todayAccessibilityHint` | `string` | No | `'Today'` | Accessibility hint for the current day when it is not disabled. Omit or leave default for non-localized usage. |
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
| `zIndex` | `number` | No | `-` | - |


## Styles

| Selector | Static class name | Description |
| --- | --- | --- |
| `root` | `-` | Root container element |
| `header` | `-` | Header row containing month label and navigation arrows |
| `title` | `-` | Month and year title text element |
| `navigation` | `-` | Navigation controls element |
| `content` | `-` | Container for the days-of-week header and the date grid |
| `day` | `-` | Individual date cell element, basic ViewStyle applied to the pressable wrapper |


