mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
129 lines
3.9 KiB
Plaintext
129 lines
3.9 KiB
Plaintext
---
|
|
title: Calendar
|
|
description: A date picker component with range and multi-select support.
|
|
|
|
links:
|
|
doc: https://daypicker.dev/
|
|
---
|
|
|
|
<ComponentPreview name="p-calendar-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/calendar
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install react-day-picker
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="calendar" title="components/ui/calendar.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
```
|
|
|
|
```tsx
|
|
<Calendar />
|
|
```
|
|
|
|
## API Reference
|
|
|
|
This component wraps [react-day-picker](https://daypicker.dev/) with custom styling.
|
|
|
|
### Calendar
|
|
|
|
A calendar component for date selection.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ----------------- | --------------------------------------------------- | ---------- | ------------------------------------------------ |
|
|
| `mode` | `"single" \| "multiple" \| "range"` | `"single"` | Selection mode for the calendar |
|
|
| `captionLayout` | `"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"` | `"label"` | Caption layout - use `"dropdown"` for month/year dropdowns |
|
|
| `selected` | `Date \| Date[] \| DateRange` | - | The selected date(s) |
|
|
| `onSelect` | `(date: Date \| Date[] \| DateRange) => void` | - | Callback when date selection changes |
|
|
| `showOutsideDays` | `boolean` | `true` | Show days from adjacent months |
|
|
| `startMonth` | `Date` | - | First month to show in dropdown navigation |
|
|
| `endMonth` | `Date` | - | Last month to show in dropdown navigation |
|
|
| `buttonVariant` | `"ghost" \| "outline" \| ...` | `"ghost"` | Button variant for navigation buttons |
|
|
| `classNames` | `object` | - | Custom class names for calendar parts |
|
|
| `components` | `object` | - | Custom components to override defaults |
|
|
|
|
For the full list of props, see the [react-day-picker documentation](https://daypicker.dev/).
|
|
|
|
### Customizing Cell Size
|
|
|
|
The calendar uses CSS custom properties for cell sizing. By default, the cell size is `--spacing(9)` on mobile and `--spacing(8)` on larger screens:
|
|
|
|
```css
|
|
[--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]
|
|
```
|
|
|
|
You can customize the cell size by passing a custom `className`:
|
|
|
|
```tsx
|
|
<Calendar className="[--cell-size:--spacing(11)]" />
|
|
```
|
|
|
|
Or use responsive values:
|
|
|
|
```tsx
|
|
<Calendar className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Single Date Selection
|
|
|
|
<ComponentPreview name="p-calendar-2" />
|
|
|
|
### Date Range Selection
|
|
|
|
<ComponentPreview name="p-calendar-3" />
|
|
|
|
### Dropdown Navigation
|
|
|
|
Use `captionLayout="dropdown"` with `startMonth` and `endMonth` to enable month/year dropdown navigation:
|
|
|
|
<ComponentPreview name="p-calendar-4" />
|
|
|
|
### Select Dropdown for Month/Year
|
|
|
|
Calendar with a custom Select component for month and year navigation:
|
|
|
|
<ComponentPreview name="p-calendar-5" />
|
|
|
|
### Combobox Dropdown for Month/Year
|
|
|
|
Calendar with a searchable Combobox for month and year navigation:
|
|
|
|
<ComponentPreview name="p-calendar-6" />
|