The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A customizable calendar component for date selection.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
The Calendar
component is built on top of the React DayPicker library.
Import the Calendar
component from @bun-ui/react
and use it in your project:
import { Calendar } from "@bun-ui/react"
<Calendar />
Use the mode
prop to enable range selection.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Each mode require different type of onSelect and selected props
mode="single"
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Selected 07/30/2025
mode="range"
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Selected from 07/30/2025 to 07/30/2025
mode="multiple"
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
No dates selected
Use startMonth
and endMonth
props to restrict the calendar's navigation range. Dates outside this range will have disabled navigation buttons.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Prop | Type | Default | Description |
---|---|---|---|
classes | CalendarClasses | - | Override or extend the styles applied to the component and its subcomponents. |
disableViewChange | boolean | false | If |
yearRange | number | 12 | Number of years to display in the "years" view. |
Prop | Type | Default | Description |
---|---|---|---|
buttonNext | string | - | Styles applied to the next month/year navigation button. Controls the styling of the right arrow button for navigation. |
buttonPrevious | string | - | Styles applied to the previous month/year navigation button. Controls the styling of the left arrow button for navigation. |
captionLabel | string | - | Styles applied to the month/year caption label. Controls the styling of the clickable month/year text that allows view switching. |
day | string | - | Styles applied to individual day cells. Controls the styling of each day cell container. |
dayButton | string | - | Styles applied to day buttons. Controls the styling of the clickable day buttons. |
disabled | string | - | Styles applied to disabled days. Controls the styling of days that are not selectable. |
hidden | string | - | Styles applied to hidden day cells. Controls the styling of placeholder cells used for layout consistency. |
month | string | - | Styles applied to the month container. Controls the styling of the entire month view container. |
monthCaption | string | - | Styles applied to the month caption container. Controls the styling of the month/year display area with navigation buttons. |
monthGrid | string | - | Styles applied to the month grid container. Controls the styling of the days grid layout. |
months | string | - | Styles applied to the calendar months container. Controls the layout and styling of the months wrapper. |
nav | string | - | Styles applied to the navigation container. Controls the layout and styling of the navigation buttons wrapper. |
outside | string | - | Styles applied to days outside the current month. Controls the styling of days from adjacent months that are visible. |
rangeEnd | string | - | Styles applied to the end day of a date range. Controls the styling of the last day when a range is selected. |
rangeMiddle | string | - | Styles applied to days in the middle of a date range. Controls the styling of days between the start and end of a selected range. |
rangeStart | string | - | Styles applied to the start day of a date range. Controls the styling of the first day when a range is selected. |
selected | string | - | Styles applied to selected days. Controls the styling of days that are currently selected. |
today | string | - | Styles applied to today's date. Controls the styling of the current day indicator. |
week | string | - | Styles applied to individual week rows. Controls the styling of each row of days in the calendar. |
weekday | string | - | Styles applied to individual weekday labels. Controls the styling of each weekday header cell. |
weekdays | string | - | Styles applied to the weekdays header row. Controls the layout and styling of the weekday labels (Mon, Tue, etc.). |