Calendar

A powerful and headless calendar component for seamlessly integrating Bikram Sambat and Gregorian dates into your React applications.

25
26
27
28
29
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
31
1
2
3
4
5
6

Installation

Install the component from your command line.

npm i @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 () => {
  return (
    <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>
  );
};

API Reference

Root

Contains all parts of the calendar.

PropTypeDefault
mode
enum
BS
onModeChange
function
-
defaultValue
BikramSambat | nullnull
value
BikramSambat | null-
onChange
function
-
focusedValue
BikramSambat-
onFocusChange
function
-
isDisabled
boolean-
isDateUnavailable
function
-

The header of the calendar. Wraps the Calendar.Button, Calendar.Heading, and Calendar.TypeButton components.

Button

Changes the focused date of the Calendar.

PropTypeDefault
slot*
enum
-

Heading

Displays the current focused date in the MMMM, YYYY format (e.g., "Ashwin, 2081").

PropTypeDefault
children
function
-

TypeButton

Toggels the mode of the Calendar between Bikram Sambat and Gregorian.

Grid

Wraps the GridHeader and GridBody components of the Calendar.

GridHeader

Displayes the weekday names at the top of the CalendarGrid.Wraps the list of GridHeaderCell component.

PropTypeDefault
dayOfWeekNameFormat
enum
min
children*
function
-

GridHeaderCell

Represents each individual weekday name cell in the CalendarHeader.

GridBody

Contents the main body of the Calendar grid, where each cell represents a specific day in the currently displayed month.

PropTypeDefault
children*
function
-

Cell

Represents each individual day cell within the GridBody.

PropTypeDefault
date
BikramSambat-
children
function
-
Data attributeValues
data-disabledPresent when disabled, unavailable, or outside the range of the current month
data-unavailablePresent when unavailable
data-outside-monthPresent when date is outside the range of the current focued month
data-todayPresent when date is the current date
data-selectedPresent when selected