Calendar Component

The Calendar component is the core UI for rendering and selecting Bikram Sambat dates.

Basic Usage

import { Calendar } from 'nepali-bs-calendar-react'
 
export function Demo() {
  return <Calendar />
}

Preview

Interactive Demo

Sun

Mon

Tue

Wed

Thu

Fri

Sat

 TSXimport { Calendar } from 'nepali-bs-calendar-react'

export default function Demo() {
  return <Calendar onChange={(date) => console.log(date)} />
}

Props

Prop	Type	Default	Description
`value`	`NepaliDateValue`	`undefined`	Controlled selected date.
`defaultValue`	`NepaliDateValue`	`undefined`	Initial selected date.
`onChange`	`(value) => void`	`undefined`	Called when a user selects a date.
`className`	`string`	`undefined`	Custom wrapper class.
`disabled`	`boolean`	`false`	Disable interaction.
`minDate`	`string`	`undefined`	Minimum selectable BS date.
`maxDate`	`string`	`undefined`	Maximum selectable BS date.

Events

Use onChange to capture the selected date.

<Calendar onChange={(value) => console.log('Selected date:', value)} />

Examples

Controlled calendar

'use client'
 
import { useState } from 'react'
import { Calendar } from 'nepali-bs-calendar-react'
 
export function ControlledCalendar() {
  const [date, setDate] = useState('2083-02-14')
  return <Calendar value={date} onChange={setDate} />
}

Date range guard

<Calendar minDate="2083-01-01" maxDate="2083-12-30" />