AD BS Calendar React (ad-bs-calendar-react)

A comprehensive AD BS Calendar and DatePicker for React. Supports both AD and BS dates, custom event banners, localized formatting, and more.

Click here for Live Demo

Features

• Dual Calendar Support: seamless switching between AD (Gregorian) and BS (Bikram Sambat) calendars.
• Localized: Full English and Nepali language support.
• Customizable: Multiple visual variants ('default', 'clean', 'glass') and theming options.
• Event Management: Built-in support for displaying events and holidays.
• DatePicker: A popover-based date picker component.
• Date Converter: Utility component and functions for date conversion.
• Responsive: Mobile-friendly design.
• Type-Safe: Written in TypeScript with full type definitions.

Installation

Install the package via npm:

npm install ad-bs-calendar-react

Setup

Import the base styles in your entry file (e.g., main.tsx, App.tsx, or _app.tsx):

import 'ad-bs-calendar-react/dist/styles.css';

Usage

1. Calendar Component

The main component that renders a full-featured calendar.

import { useState } from 'react';
import { Calendar, CalendarType, Language } from 'ad-bs-calendar-react';
import type { CalendarDateChange } from 'ad-bs-calendar-react';

const MyCalendar = () => {
  const events = [
    { id: '1', title: 'Bijaya Dashami', startDate: '2082-06-23', endDate: '2082-06-27', color: '#ef4444' },
    { id: '2', title: 'Meeting', startDate: '2026-01-10', color: '#3b82f6' }
  ];

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <Calendar 
        calendarType={CalendarType.BS}
        language={Language.NE}
        variant="default"
        events={events}
        onDateChange={(data: CalendarDateChange) => {
          console.log("Calendar state changed:", data);
        }}
      />
    </div>
  );
};

export default MyCalendar;

2. DatePicker Component

A convenient popover-based date picker.

import { useState } from 'react';
import { DatePicker, CalendarType, Language } from 'ad-bs-calendar-react';

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState<string>('');

  return (
    <div style={{ maxWidth: '300px' }}>
      <label>Select Date:</label>
      <DatePicker 
        calendarType={CalendarType.AD}
        language={Language.EN}
        variant="clean"
        value={selectedDate}
        onDateSelect={(date: string) => setSelectedDate(date)}
      />
      <p>Selected: {selectedDate}</p>
    </div>
  );
};

export default MyDatePicker;

3. Date Converter Component

A standalone widget for converting between AD and BS dates.

import { DateConverter, Language } from 'ad-bs-calendar-react';

const MyConverter = () => {
  return (
    <div style={{ maxWidth: '500px' }}>
      <DateConverter 
        language={Language.EN}
        onDateChange={(date, type) => console.log("Converted:", date, type)}
      />
    </div>
  );
};

export default MyConverter;

API Reference

Calendar Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | calendarType | CalendarType | 'AD' | Initial calendar system to display ('AD' or 'BS'). | | language | Language | Language.EN | Language for names and numbers ('en-US' or 'ne-NP'). | | variant | 'default' \| 'clean' \| 'glass' | 'default' | Visual style variant. | | weekendDays | number[] | [0, 6] | Array of day indices to mark as weekends (0=Sun, 6=Sat). | | events | CalendarEvent[] | [] | Array of event objects to display on the calendar. | | onDateChange | (data: CalendarDateChange) => void | - | Callback fired when the calendar navigation changes (month/year change). |

DatePicker Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | value | string | '' | The currently selected date string (YYYY-MM-DD). | | onDateSelect | (date: string) => void | - | Callback fired when a date is selected. | | calendarType | CalendarType | 'AD' | Calendar system to use. | | language | Language | Language.EN | Language for the UI. | | variant | 'default' \| 'clean' \| 'glass' | 'default' | Visual style variant. |

License

MIT © Pradip Parajuli