# Calendar: Inside a sheet

> Inside a sheet, popover or dialog the calendar drops its own background and blends with the surface.

Example: https://hextaui.com/docs/calendar/examples/sheet
Component docs: https://hextaui.com/docs/calendar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/calendar-sheet.json
```

This adds `components/examples/calendar/sheet.tsx` with the Calendar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/calendar/sheet.tsx"
"use client"

import * as React from "react"
import { format } from "date-fns"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function CalendarSheet() {
  const [date, setDate] = React.useState<Date>()

  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        {date ? format(date, "PPP") : "Choose a date"}
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Schedule</SheetTitle>
          <SheetDescription>Pick a delivery day.</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <Calendar mode="single" selected={date} onSelect={setDate} />
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}
```

## Props in this example

### Calendar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "multiple" \| "range"` | – | Without a mode, days are not selectable. |
| `selected` | `Date \| Date[] \| DateRange` | – | Matches the mode. |
| `onSelect` | `(selected, triggerDate, modifiers, event) => void` | – |  |

## More Calendar examples

- [Range](https://hextaui.com/docs/calendar/examples/range.md)
- [Range limits](https://hextaui.com/docs/calendar/examples/range-limits.md)
- [Multiple](https://hextaui.com/docs/calendar/examples/multiple.md)
- [Month and year dropdowns](https://hextaui.com/docs/calendar/examples/dropdowns.md)
- [Bounded](https://hextaui.com/docs/calendar/examples/bounded.md)
- [Controlled month](https://hextaui.com/docs/calendar/examples/controlled.md)
- [Week numbers](https://hextaui.com/docs/calendar/examples/week-numbers.md)
- [Fixed today](https://hextaui.com/docs/calendar/examples/fixed-today.md)
- [Right to left](https://hextaui.com/docs/calendar/examples/rtl.md)