export const title = "Calendar components"
export const description = "Powerful and customizable React calendar components built for modern applications and websites. These calendars are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/calendar/calendar.story.tsx";

<PreviewAndCode title="Calendar example" isPublic={false}>
    <ResizablePreview id="preview" className="">
        <Demos.CalendarMonthViewDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode components={[
            { name: "calendar.demo.tsx", path: "calendar/CalendarMonthViewDemo" }, 
            { name: "components/application/calendar/config.ts", path: "calendar/config.ts" }
        ]} />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this calendar component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add calendar
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our calendar component is built with [Internationalized Date](https://www.npmjs.com/package/@internationalized/date) and [React Aria](https://www.npmjs.com/package/@react-aria/i18n), you'll need to install the dependencies:
                ```bash
                npm install @internationalized/date @react-aria/i18n
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/calendar" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the calendar components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Calendar examples

Below are examples and variations of this calendar component:

### Calendar month view {{ tocOnly:true }}

<PreviewAndCode title="Calendar month view" isPublic={false}>
    <ResizablePreview id="preview" className="">
        <Demos.CalendarMonthViewDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode components={[
            { name: "calendar.demo.tsx", path: "calendar/CalendarMonthViewDemo" }, 
            { name: "components/application/calendar/config.ts", path: "calendar/config.ts" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Calendar week view {{ tocOnly:true }}

<PreviewAndCode title="Calendar week view" isPublic={false}>
    <ResizablePreview id="preview" className="">
        <Demos.CalendarWeekViewDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode components={[
            { name: "calendar.demo.tsx", path: "calendar/CalendarWeekViewDemo" }, 
            { name: "components/application/calendar/config.ts", path: "calendar/config.ts" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Calendar day view {{ tocOnly:true }}

<PreviewAndCode title="Calendar day view" isPublic={false}>
    <ResizablePreview id="preview" className="">
        <Demos.CalendarDayViewDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode components={[
            { name: "calendar.demo.tsx", path: "calendar/CalendarDayViewDemo" }, 
            { name: "components/application/calendar/config.ts", path: "calendar/config.ts" }
        ]} />
    </TabPanel>
</PreviewAndCode>