Calendar
A date picker component with Neo-Brutalism styling. Built on top of react-day-picker.
Installation
pnpm dlx brutx@latest add calendarBasic Calendar
A simple calendar for selecting a single date.
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: 12/4/2025
Range Selection
Select a range of dates with visual feedback.
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Week Numbers
Display week numbers alongside the calendar.
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa | |
|---|---|---|---|---|---|---|---|
49 | |||||||
50 | |||||||
51 | |||||||
52 | |||||||
01 |
Disabled Dates
Disable specific dates or date ranges.
December 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Weekends and past dates are disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "multiple" | "single" | Selection mode |
| selected | Date | DateRange | Date[] | - | Selected date(s) |
| onSelect | function | - | Callback when date is selected |
| numberOfMonths | number | 1 | Number of months to display |
| showWeekNumber | boolean | false | Show week numbers |
| showOutsideDays | boolean | true | Show days outside current month |
| disabled | Matcher | Matcher[] | - | Dates to disable |