> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar

> Calendar component for date selection with single and range modes

export const CalendarWithFooterPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CalendarWithFooter" frameBorder="0" width="100%" height="400"></iframe>;

export const CalendarRangePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CalendarRange" frameBorder="0" width="100%" height="400"></iframe>;

export const CalendarBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CalendarBasic" frameBorder="0" width="100%" height="400"></iframe>;

## Overview

The Calendar component provides date selection with support for single date and date range selection modes.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Calendar } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CalendarBasic() {
      const [date, setDate] = useState<Date>();

      return (
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CalendarBasicPreview />
  </Tab>
</Tabs>

## Date Range

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Calendar } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CalendarRange() {
      const [range, setRange] = useState<{ from?: Date; to?: Date }>();

      return (
        <Calendar
          mode="range"
          selected={range}
          onSelect={setRange}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CalendarRangePreview />
  </Tab>
</Tabs>

## With Footer

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Calendar } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CalendarWithFooter() {
      const [date, setDate] = useState<Date>();

      return (
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          showFooter={true}
          onCancel={() => console.log('Cancelled')}
          onApply={() => console.log('Applied')}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CalendarWithFooterPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop       | Type                                                 | Default    | Description              |
  | :--------- | :--------------------------------------------------- | :--------- | :----------------------- |
  | mode       | `"single" \| "range"`                                | `"single"` | Selection mode           |
  | selected   | `Date \| { from?: Date; to?: Date }`                 | -          | Selected date(s)         |
  | onSelect   | `(date: Date \| { from?: Date; to?: Date }) => void` | -          | Selection handler        |
  | showFooter | `boolean`                                            | `false`    | Show footer with buttons |
  | onCancel   | `() => void`                                         | -          | Cancel button handler    |
  | onApply    | `() => void`                                         | -          | Apply button handler     |
  | disabled   | `boolean`                                            | `false`    | Disabled state           |
  | className  | `string`                                             | -          | Additional CSS classes   |
</PropsTable>