Static Calendar

If you want to display the calendar directly on the page without a popup, use StaticNepaliCalendar.

Basic Usage

import { useState } from 'react'
import { StaticNepaliCalendar } from 'nepali-bs-calendar-react'
 
export default function MyComponent() {
  const [date, setDate] = useState<string | null>(null)
 
  return (
    <StaticNepaliCalendar
      value={date}
      onChange={(value) => setDate(value)}
    />
  )
}

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

Custom Calendar Component

If you want to display the calendar directly on the page without a popup, use StaticNepaliCalendar.

You can also use calendarComponent with StaticNepaliCalendar to customize the static calendar UI.

import { useState } from 'react'
import {
  StaticNepaliCalendar,
  NepaliCalendarViewRenderProps,
} from 'nepali-bs-calendar-react'
 
function CustomCalendar({
  viewYear,
  viewMonth,
  calendarCells,
  handleDayChange,
  isDisabled,
  BS_MONTHS,
  toNepaliNumber,
}: NepaliCalendarViewRenderProps) {
  return (
    <div>
      <h3>{BS_MONTHS[viewMonth - 1]} {viewYear}</h3>
 
      {calendarCells.map((date, index) => (
        <button
          key={date ? `${date.year}-${date.month}-${date.day}` : `empty-${index}`}
          type="button"
          disabled={!date || isDisabled(date)}
          onClick={() => date && handleDayChange(date.day)}
        >
          {date ? toNepaliNumber(date.day) : ''}
        </button>
      ))}
    </div>
  )
}
 
export default function MyComponent() {
  const [date, setDate] = useState<string | null>(null)
 
  return (
    <StaticNepaliCalendar
      value={date}
      onChange={(value) => setDate(value)}
      calendarComponent={CustomCalendar}
    />
  )
}

Dynamic Calendar Data

You can provide your own calendar data if you need to support more years or custom month lengths.

import { NepaliCalendarProvider, CalendarData } from 'nepali-bs-calendar-react'
 
const customData: CalendarData = {
  ref_ad: '2019-12-17',
  ref_bs: '2076-09-01',
  years: {
    2076: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 30],
    // ... add more years
  },
}
 
function App() {
  return (
    <NepaliCalendarProvider data={customData}>
      <NepaliCalendar />
    </NepaliCalendarProvider>
  )
}