Mini Calendar
ミニカレンダー
A horizontal strip of a few consecutive days that pages forward and back, useful for picking a date without opening a full month. Date maths from date-fns↗↗ and Tailwind CSS.
Installation
Install the following dependencies:1
npm install date-fnsnpm install lucide-reactCopy and paste the following code into a new component file:2
How to use it3
Props
MiniCalendar
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode The navigation buttons and the day strip |
| days | 5 | number How many consecutive days to show |
| value | — | Date Selected date, makes the component controlled |
| defaultValue | — | Date Selected date on first render when uncontrolled |
| onValueChange | — | (date: Date | undefined) => void Called when a day is clicked |
| startDate | — | Date First day of the strip, makes the paging controlled |
| defaultStartDate | today | Date First day of the strip on first render, pass it to keep the output deterministic |
| onStartDateChange | — | (date: Date | undefined) => void Called when the strip is paged |
| className | — | string Additional classes on the container |
MiniCalendarNavigation
| Name | Default | Description |
|---|---|---|
| direction | — | "prev" | "next" Which way paging moves the strip, also picks the default chevron |
| asChild | false | boolean Clones the single child instead of rendering a button, merging the click handler |
| children | chevron icon | ReactNode Custom button content |
| onClick | — | (event) => void Called after the strip has been paged |
MiniCalendarDays
| Name | Default | Description |
|---|---|---|
| children | — | (date: Date) => ReactNode Renders one entry per day in the strip |
| className | — | string Additional classes on the day row |
MiniCalendarDay
| Name | Default | Description |
|---|---|---|
| date | — | Date Day to render, shown as a short month above the day number |
| className | — | string Additional classes on the day button |