The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

2

Calendar

Source

A customizable calendar component for date selection.

Usage

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 />

Examples

Range Selection

Use the mode prop to enable range selection.

Controlled

Each mode require different type of onSelect and selected props

mode="single"

Selected 11/02/2025

mode="range"

Selected from 11/02/2025 to 11/02/2025

mode="multiple"

No dates selected

Date Range Navigation

Use startMonth and endMonth props to restrict the calendar's navigation range. Dates outside this range will have disabled navigation buttons.

This calendar is restricted to Q1 2025 (January to March). Navigation buttons will be disabled outside this range.

Props

Calendar

PropTypeDefaultDescription
classes
CalendarClasses-

Override or extend the styles applied to the component and its subcomponents.

disableViewChange
booleanfalse

If true, disables the month and year views. If false, users can switch between day, month, and year views by clicking the month/day/year label.

yearRange
number12

Number of years to display in the "years" view.

CalendarClasses

PropTypeDefaultDescription
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.).

ButtonCard