Quick Start

This page shows the minimum setup needed to render a calendar.

Required Wrapper

'use client'
 
import { NepaliCalendarProvider, defaultCalendarData } from 'nepali-bs-calendar-react'
 
function App() {
  return (
    <NepaliCalendarProvider data={defaultCalendarData}>
      {/* Your components */}
    </NepaliCalendarProvider>
  )
}

Basic setup

'use client'
 
import { Calendar } from 'nepali-bs-calendar-react'
 
export default function Page() {
  return (
    <main>
      <Calendar onChange={(date) => console.log(date)} />
    </main>
  )
}

Recommended wrapper

For production apps, create a small wrapper component. This gives you a stable place to manage value, formatting, validation, and styling.

'use client'
 
import { useState } from 'react'
import { Calendar } from 'nepali-bs-calendar-react'
 
export function NepaliCalendarField() {
  const [value, setValue] = useState<unknown>(null)
 
  return (
    <Calendar
      value={value}
      onChange={setValue}
      className="rounded-xl border"
    />
  )
}

Live example

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