HP Calendar SDK

A modern Svelte calendar component library supporting both Gregorian and Bikram Sambat (Nepali) calendars.

Features

• 📅 Dual calendar support (Gregorian & Bikram Sambat)
• 🎨 Modern, customizable UI with Tailwind CSS
• 🚫 Flexible date restrictions (past dates, specific days, weekdays)
• 📱 Responsive design
• 🔧 TypeScript support
• ⚡ Built with SvelteKit

Installation

npm install hp-calendar

Prerequisites

This package requires Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Usage

1. Import CSS in your main layout (Recommended)

Import the CSS in your main layout file (e.g., +layout.svelte or app.html):

<script>
  // Import the CSS
  import 'hp-calendar/styles.css';
  
  // Import the component
  import { SelectionCalendar } from 'hp-calendar';
  
  let selectedDate = new Date();
  
  function handleDateSelect(event) {
    selectedDate = event.detail.date;
    console.log('Selected date:', selectedDate);
  }
</script>

<SelectionCalendar 
  bind:selectedDate
  on:dateSelect={handleDateSelect}
  disablePastDates={true}
  disabledDays={{
    past: true,
    days: [],
    weekDays: [],
    yearSwitch: true
  }}
/>

2. Alternative: Import CSS in your main CSS file

You can also import the CSS in your main stylesheet:

/* In your main CSS file (e.g., app.css) */
@import 'hp-calendar/styles.css';

Props

• selectedDate - Currently selected date (Date object)
• disablePastDates - Boolean to disable past dates
• disabledDays - Object with disabled date configurations
• compact - Boolean for compact view
• styles - Custom styling object

Development

To develop this library:

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Package for publishing
npm run package

Local Development with npm link (HMR Support)

For local development with Hot Module Reload when testing in store-web-front project:

1. In this package directory (hp-calendar-sdk):

# Link this package globally
npm link

# Start the development watcher (auto-rebuilds on changes)
npm run dev:package

2. In your store-web-front project directory (../):

# Link to this package
npm link hp-calendar-sdk

# Update your vite.config.js to:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
	plugins: [sveltekit()],
	server: {
		fs: {
			allow: ['..', '../..']
		}
	},
	resolve: {
		alias: {
			'hp-calendar-sdk': resolve(__dirname, '../hp-calendar-sdk/src/lib')
		}
	},
	optimizeDeps: {
		exclude: ['hp-calendar-sdk']
	}
});

3. Start your store-web-front dev server:

npm run dev

Now when you make changes to the HP Calendar SDK, it will automatically rebuild and your store-web-front project will hot reload with the changes!

Styling Requirements

Important: This package does not bundle CSS to avoid path resolution issues. You need to have Tailwind CSS configured in your consuming project.

Add this to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/hp-calendar/**/*.{html,js,svelte,ts}'
  ],
  // ... rest of your config
}

License

MIT