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

You can customize the rendering of the static calendar by passing a custom component to the calendarComponent prop.

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 className="border p-4 rounded-xl">
      <h3 className="text-lg font-bold mb-4">
        {BS_MONTHS[viewMonth - 1]} {viewYear}
      </h3>
 
      <div className="grid grid-cols-7 gap-1">
        {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)}
            className="p-2 border rounded enabled:hover:bg-slate-100 disabled:opacity-50"
          >
            {date ? toNepaliNumber(date.day) : ''}
          </button>
        ))}
      </div>
    </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 using NepaliCalendarProvider.

import { NepaliCalendarProvider, CalendarData, NepaliCalendar } 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>
  )
}