mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-20 13:30:41 +00:00
108 lines
1.8 KiB
Markdown
108 lines
1.8 KiB
Markdown
# Calendar Component API
|
|
|
|
A calendar component for date selection and display.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-calendar = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_calendar::Calendar;
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Calendar
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `Signal<Option<NaiveDate>>` | **Required** | Selected date |
|
|
| `on_change` | `Option<Callback<Option<NaiveDate>>>` | `None` | Change handler |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable calendar |
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Calendar
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_calendar::Calendar;
|
|
use chrono::NaiveDate;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (date, set_date) = signal(None);
|
|
|
|
view! {
|
|
<Calendar
|
|
value=date.into()
|
|
on_change=Some(Callback::new(move |d| set_date.set(d)))
|
|
/>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.calendar {
|
|
p-3 space-y-4
|
|
}
|
|
|
|
.calendar-day {
|
|
p-2 text-center hover:bg-accent rounded-md cursor-pointer
|
|
}
|
|
|
|
.calendar-day-selected {
|
|
bg-primary text-primary-foreground
|
|
}
|
|
|
|
.calendar-day-disabled {
|
|
opacity-50 cursor-not-allowed
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Arrow Keys** | Navigate dates |
|
|
| **Page Up/Down** | Navigate months |
|
|
| **Enter** | Select date |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface CalendarProps {
|
|
value?: Date | null;
|
|
onChange?: (date: Date | null) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const Calendar: React.FC<CalendarProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/calendar/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/calendar/src/default.rs)*
|