Getting started

A quick tutorial to get you up and running with the Calendar components.

Installation Steps

1

Install the package

Install both the Bikram Sambat and the component library from your command line:

npm i @nakarmi23/bikram-sambat @nakarmi23/react-bs-ad-calendar
2

Implement the Calendar

Import and structure the parts.

import { Calendar } from "@nakarmi23/react-bs-ad-calendar";
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";

export const SimpleCalendarDemo = (props) => {
  return (
    <Calendar.Root
      props={props.value}
      onChange={props.onChange}
    >
      <Calendar.Header>
        <Calendar.Button slot='prev'>
          <ChevronLeftIcon />
        </Calendar.Button>
        <Calendar.Heading />
        <Calendar.TypeButton />
        <Calendar.Button slot='next'>
          <ChevronRightIcon />
        </Calendar.Button>
      </Calendar.Header>
      <Calendar.Grid>
        <Calendar.GridHeader>
          {(day) => (
            <Calendar.GridHeaderCell>
              {day}
            </Calendar.GridHeaderCell>
          )}
        </Calendar.GridHeader>
        <Calendar.GridBody>
          {(date) => <Calendar.Cell date={date}/>}
        </Calendar.GridBody>
      </Calendar.Grid>
    </Calendar.Root>
  );
  };
3

Add your styles

Add styles where desired. The package provides a default style file, if you dont want to write your own styles.

import { Calendar } from "@nakarmi23/react-bs-ad-calendar";
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
import "@nakarmi23/react-bs-ad-calendar/calendar-style.css";

export const Datepicker = (props) => {
  return (

Note:

All the components are unstyled, and compatible with any styling solution, giving you complete control over the component's looks.

Demo

Here's a complete demo.

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8