Nepali Calendar (नेपाली पात्रो)

A fully themable Bikram Sambat (BS) / Gregorian (AD) calendar built with React + TypeScript + Tailwind CSS. Supports year/month views, BS↔AD toggle, resizable panel, events and reminders with date ranges.

Customization

Pass a config object to the <App> component (or <NepaliCalendar>). Every option is optional — omitted options fall back to defaults.

import App from './App';

<App
  config={{
    // ——— Colors ———
    primaryColor: '#0041e8',        // brand/accent
    primaryHoverColor: '#0034ba',   // hover state
    primarySoftColor: '#eef2fd',    // soft tint backgrounds
    primaryBorderColor: '#c6d6ff',  // light borders/rings
    pageBackground: '#f1f5f9',      // app background
    surfaceColor: '#ffffff',        // cards/panels
    textColor: '#0f172a',           // main text
    mutedTextColor: '#64748b',      // secondary text
    faintTextColor: '#94a3b8',      // tertiary text (secondary dates)
    borderColor: '#e2e8f0',         // cell/card borders
    todayColor: '#0041e8',          // today highlight
    saturdayColor: '#0041e8',       // weekend text
    selectedBackground: '#eef2fd',  // selected day background

    // ——— Typography ———
    fontFamily: "-apple-system, 'Segoe UI', 'Noto Sans Devanagari', sans-serif",
    dayFontSize: '1.125rem',        // day number in month view
    cardDayFontSize: '0.8125rem',   // day number in year cards
    secondaryFontSize: '0.625rem',  // secondary (opposite calendar) date
    weekdayFontSize: '0.875rem',    // weekday header
    titleFontSize: '1.25rem',       // month title
    cardTitleFontSize: '1rem',      // year card month title

    // ——— Sizing / resizable panel ———
    minWidth: 640,      // min panel width (px)
    minHeight: 480,     // min panel height (px)
    defaultWidth: 1200, // initial panel width
    defaultHeight: 760  // initial panel height
  }}
/>

CSS variables

All options are also exposed as CSS custom properties (--nc-*) on the root element, so you can override them in plain CSS without touching JSX:

.nc-calendar-root {
  --nc-primary: #10b981;
  --nc-day-size: 1.5rem;
}

Development

npm install
npm run dev      # local dev server
npm run build    # typecheck + production build

Requires Node >= 18 (uses Node 24 recommended).