Import
import { Calendar } from "@sugarcoat/ui-nxt";Usage
<Calendar />Examples#
Basic Calendar#
Default Calendar
With Initial Date#
Set a default selected date using the date prop.
Pre-selected Date
With Date String#
You can also pass a date string.
Date from String
Date Change Handler#
Handle date selection with the onDateChange callback.
With Callback
Animated#
Control the animation of day transitions with the animated prop (enabled by default).
Animated Calendar
No Animation
Custom Date Format#
Customize the date format for the dateTime attribute.
Custom Format
Practical Examples#
Event Scheduler
Booking Widget
Features#
- Month Navigation: Navigate between months using the arrow buttons
- Today Button: Quickly jump back to the current month with the center dot button
- Today Highlighting: Current date is visually highlighted
- Selected State: Selected date is clearly indicated
- Keyboard Accessible: Full keyboard navigation support
- Date-fns Integration: Uses date-fns for robust date handling
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| date | Date | string | - | The initially selected date |
| format | string | "yyyy-MM-dd" | The date format for the dateTime attribute |
| animated | boolean | true | Whether to animate day transitions |
| activeColor | string | "primary" | The color for the active/selected state |
| onDateChange | (date: Date) => void | - | Callback fired when a date is selected |
| children | ReactNode | - | Additional content to render inside the calendar |