@svpkg/calendarly

🚧 Package Under Progress 🚧

📅 @svpkg/calendarly – A Simple & Flexible React Calendar Component

@svpkg/calendarly is a lightweight, customizable calendar component built with React, Day.js, and CSS. It provides both single-date and date-range selection with an intuitive UI.

✨ Features

✅ Single and multiple-month view
✅ Quick selection options (Today, Yesterday, This Week, etc.)
✅ Single-date and date-range selection
✅ Minimal dependencies (React + Day.js)
✅ Fully customizable

---

🚀 Installation

npm install @svpkg/calendarly

or

yarn add @svpkg/calendarly

---

🛠️ Usage

Basic Example

import { Calendarly } from "@svpkg/calendarly";

<Calendarly 
    type="single" 
    isRange={false} 
    quickSelection={true} 
    onSelect={(date) => console.log("Selected date:", date)}
/>

Props

Prop	Type	Description
type	"single" | "multiple"	"single" shows one month, "multiple" shows two months side by side.
isRange	boolean	If true, enables date range selection. If false, allows single date selection.
quickSelection	boolean	If true, displays quick selection options like Today, This Week, etc.
onSelect	(date: string | [string, string]) => void	Callback function triggered on date selection. Returns either a single date or a date range.

---

📌 Example Use Cases

1️⃣ Single-Date Picker

<Calendarly 
    type="single"
    isRange={false}
    quickSelection={false}
    onSelect={(date) => console.log("Selected:", date)}
/>

📆 Date-Range Picker

<Calendarly 
    type="multiple"
    isRange={true}
    quickSelection={true}
    onSelect={(range) => console.log("Selected Range:", range)}
/>

🔥 Why Use @svpkg/calendarly?

✔ No external calendar packages – pure React & Day.js
✔ Simple, minimal UI with easy customization
✔ Quick date selection options for faster input

---

📜 License

MIT License. Feel free to use

---

Enjoy using @svpkg/calendarly? 🌟 Star the repo on github and share your feedback! 🚀