@nakarmi23/react-bs-ad-calendar

Introduction

@nakarmi23/react-bs-ad-calendar is a React component library that provides easy-to-use, customizable calendar and date picker components for the Bikram Sambat date system, with the ability to switch to the Gregorian calendar. Designed to address the lack of robust solutions for regional date systems, this library focuses on developer experience, flexibility, and accessibility, enabling seamless integration into modern web applications.

At its core, this library utilizes @nakarmi23/bikram-sambat, ensuring precise management and manipulation of Bikram Sambat dates. Inspired by Radix UI, it follows a compound component pattern for modularity and composability, allowing developers to customize and build calendar features with ease.

Installation

Package Manager

Using npm:

npm install @nakarmi23/bikram-sambat @nakarmi23/react-bs-ad-calendar

Using yarn:

yarn add @nakarmi23/bikram-sambat @nakarmi23/react-bs-ad-calendar

Using pnpm:

pnpm add @nakarmi23/bikram-sambat @nakarmi23/react-bs-ad-calendar

Anatomy

Import all parts and piece them together.

import {Calendar} from "@nakarmi23/react-bs-ad-calendar";

export default ()=>(
    <Calendar.Root>
      <Calendar.Header>
        <Calendar.Button slot='prev' />
        <Calendar.Heading />
        <Calendar.TypeButton />
        <Calendar.Button slot='next'/>
      </Calendar.Header>
      <Calendar.Grid>
        <Calendar.GridHeader>
          {(day) => <Calendar.GridHeaderCell />}
        </Calendar.GridHeader>
        <Calendar.GridBody>
          {(date) => <Calendar.Cell />}
        </Calendar.GridBody>
      </Calendar.Grid>
    </Calendar.Root>
)