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.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: 5/28/2026
Range Selection
Select a range of dates with visual feedback.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Week Numbers
Display week numbers alongside the calendar.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa | |
|---|---|---|---|---|---|---|---|
18 | |||||||
19 | |||||||
20 | |||||||
21 | |||||||
22 | |||||||
23 |
Disabled Dates
Disable specific dates or date ranges.
May 2026
| 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 |