nepali-calendar-vue

v1.2.1

Published

19 days ago

Customizable Nepali Calendar (नेपाली पात्रो) Vue 3 component and standalone embeddable widget with Bikram Sambat dates, holidays, festivals, tithi, and offline support.

0High
0Medium
0Low

rajibjel

nepali-calendar patro nepali-patro vue vue3 calendar widget bikram-sambat bs-calendar offline-calendar nepal

Nepali Calendar (नेपाली पात्रो) for Vue 3 & Web

A customizable, lightweight, and interactive Nepali Calendar (नेपाली पात्रो) Vue 3 component and standalone embeddable widget. Built with Bikram Sambat (BS) date conversion, festivals, tithi, public holidays, event modals, next/previous navigation, offline support, and themes.

🌐 Live Interactive Demo

🚀 Explore the interactive demo hosted at:
👉 https://democalendar.bhujelrajib.com.np

🌟 What's in the Demo:

🖥️ Master Interactive Sandbox: Test all props, themes, numerals (Devanagari vs English), toggles, and date cell inspectors in real time.
📱 Compact Sidebar Widget & Live Event Stream: See the compact widget inside a mock dashboard and inspect @date-click, @month-change, @event-click reactive event payloads live.
⚡ 100% Offline & Custom Events Playground: Test the zero-dependency offline calculation engine and add custom organization/personal holidays dynamically.
🔄 Two-Way BS ⇄ AD Date Converter: Convert dates between Bikram Sambat and Gregorian with full Panchang, seasons, and quick calendar jump.
🎨 Themes & Custom Slots Lab: Live gallery of all 4 built-in themes and scoped slot customization examples (#brand, #cell, #modal).
🛠️ Embed & Code Builder: Generate production-ready copy-paste code snippets for Vue 3 SFC, Vanilla HTML CDN script, Auto-init HTML, and React.

✨ Features

📅 Complete Bikram Sambat (BS) Calendar: Accurately maps Nepali dates, months (बैशाख - चैत), and English Gregorian equivalents.
🎯 Auto-detects Today: Real-time highlighting of today's Nepali date with Devanagari numerals.
🎪 Festivals & Public Holidays: Built-in support for holidays (highlighted in red) and special events/festivals.
📌 Tithi & Event Modals: Click on any date to open an interactive modal with event details, tithi, and a share button.
🔌 Dynamic API & Offline Fallback: Fetches government holidays & events via configurable API (apiUrl), or operates 100% offline (offline) with local date calculations and custom events support!
📱 Compact / Sidebar Widget Mode: Scaled compact view for dashboard widgets, sidebars, or embed cards.
🎨 Multiple Themes: Built-in gradient, light, dark, and minimal themes + customizable CSS variables.
🌐 Dual Usage: Use as a Vue 3 Component / Plugin OR as a Standalone Embeddable Widget in plain HTML, PHP, WordPress, React, etc., via a <script> tag.
⚡ TypeScript Support: Full TypeScript definitions included (index.d.ts).

📦 Installation

npm install nepali-calendar-vue
# or
yarn add nepali-calendar-vue
# or
pnpm add nepali-calendar-vue

🚀 Quick Start (Vue 3)

1. Local Component Usage (Recommended)

<template>
  <NepaliCalendar
    theme="gradient"
    :compact="false"
    :show-header="true"
    :show-today-bar="true"
    @date-click="onDateClick"
    @month-change="onMonthChange"
  />
</template>

<script setup>
import { NepaliCalendar } from 'nepali-calendar-vue';
import 'nepali-calendar-vue/dist/style.css';

const onDateClick = (data) => {
  console.log('Date clicked:', data);
};

const onMonthChange = (data) => {
  console.log('Month changed:', data);
};
</script>

2. Offline Mode with Custom Events

You can use the calendar completely offline without connecting to any backend API:

<template>
  <NepaliCalendar
    :offline="true"
    :custom-events="myEvents"
  />
</template>

<script setup>
import { NepaliCalendar } from 'nepali-calendar-vue';
import 'nepali-calendar-vue/dist/style.css';

const myEvents = [
  { date: '2081-05-15', event: 'Company Annual Meeting', holiday: false },
  { gate: 10, event: 'Special Festival', holiday: true, tithi: 'दशमी' }
];
</script>

🌐 Standalone Widget (Vanilla HTML / CDN / WordPress / PHP)

You can embed the calendar as a widget into any non-Vue website using a single CDN <script> tag.

Option A: Manual JavaScript Initialization

<!DOCTYPE html>
<html lang="ne">
<head>
  <meta charset="UTF-8">
  <!-- 1. Include Stylesheet -->
  <link rel="stylesheet" href="https://unpkg.com/nepali-calendar-vue/dist/style.css">
</head>
<body>

  <!-- 2. Container Element -->
  <div id="nepali-calendar-widget" style="max-width: 400px;"></div>

  <!-- 3. Include Standalone Widget Script -->
  <script src="https://unpkg.com/nepali-calendar-vue/dist/nepali-calendar-widget.iife.js"></script>

  <!-- 4. Initialize Widget -->
  <script>
    NepaliCalendarWidget.init('#nepali-calendar-widget', {
      compact: true,            // Compact widget mode
      theme: 'gradient',        // 'gradient' | 'light' | 'dark' | 'minimal'
      onDateClick: function(dateInfo) {
        console.log('Clicked on date:', dateInfo);
      }
    });
  </script>
</body>
</html>

Option B: Auto-initialization via HTML Data Attributes

Simply add data-nepali-calendar-widget to any <div>:

<link rel="stylesheet" href="https://unpkg.com/nepali-calendar-vue/dist/style.css">
<script src="https://unpkg.com/nepali-calendar-vue/dist/nepali-calendar-widget.iife.js"></script>

<!-- Full Calendar -->
<div data-nepali-calendar-widget data-theme="gradient"></div>

<!-- Compact Sidebar Widget -->
<div data-nepali-calendar-widget data-compact="true" data-theme="light"></div>

<!-- Custom API Endpoint -->
<div data-nepali-calendar-widget data-api-url="https://your-domain.com/api"></div>

⚙️ Props Reference

📡 Events Reference

| Event | Payload | Description | | :--- | :--- | :--- | | @date-click | { cell, year, month, gate } | Fired when any date cell is clicked | | @month-change | { year, month, monthName } | Fired when month or year is changed | | @event-click | { event, cell } | Fired when a cell containing an event is clicked | | @loaded | { calendars, mahina, year, month } | Fired after calendar data is loaded | | @error | error | Fired if the API request fails (graceful offline fallback triggered) |

🎨 Themes

gradient: Vibrant purple-indigo gradient header with colorful accents (Default).
light: Crisp, modern card with subtle shadows and clean slate accents.
dark: High-contrast dark mode design for dark-themed applications and dashboards.
minimal: Flat border-based design that seamlessly blends into any container.

🏗️ Building & Hosting the Live Demo

To build the standalone interactive demo for hosting at https://democalendar.bhujelrajib.com.np:

# 1. Install dependencies
npm install

# 2. Run local development server
npm run dev

# 3. Build demo production bundle (outputs to dist-demo)
npm run build:demo

# 4. Preview the production build locally
npm run preview

Deploy the generated dist-demo directory to your web server / Nginx / Apache pointing to your domain https://democalendar.bhujelrajib.com.np.