@san.devv/sandev-react-calendar
Version:
A **highly customizable React calendar component** designed for productivity apps, attendance tracking, and event management. It features **dynamic day/week views**, time overlays, and modal integrations — all built using **React, TypeScript, Bootstrap**,
133 lines (116 loc) • 4.63 kB
Markdown
# 📅 sandev-react-calendar
A **highly customizable React calendar component** designed for productivity apps, attendance tracking, and event management. It features **dynamic day/week views**, time overlays, and modal integrations — all built using **React, TypeScript, Bootstrap**, and **date-fns**.
---
## ✨ Features
- 🗓️ **Day/Week View Switching**
Toggle between detailed daily and weekly timelines.
- 🎯 **Time-Slot Overlay Support**
Highlight time ranges with customizable overlays (great for meetings/schedules).
- 🎨 **Attendance Color Coding**
Apply background color per day to represent status (present, absent, etc.).
- 💬 **Modal Integration**
Easily connect modals for event details, attendance notes, or editing.
- 🔧 **Developer-Friendly & Reusable**
Modular design, TypeScript types, and Bootstrap support for quick integration.
- 🚀 **How to use?**
Pass the your data from events(props).
```bash
<Calendar
events={attendance}
setSelectedEvent={setSelectedEvent}
setShowEventModal={setShowEventModal}
/>
- 📌 **Events JSON example**
```bash
[{
id: "1",
title: "Hackathon",
date: "2025-07-11",
endDate: "2025-07-13",
startTime: "10:00",
endTime: "17:00",
badgeColor: "bg-danger",
description: "3-day coding challenge",
},...]
- 📅 **Attendance JSON example**
```bash
[{
id: "1",
date: "2025-07-01",
dayColor: "#ecfda3ff",
type: "attendance",
inTime: "10:00",
outTime: "17:23",
totalHrs: "8:50",
description: "Full",
},...]
- 💬 **Sample Modal Code**
You can customize "View Event Details Modal" as you want.
```bash
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
const [showEventModal, setShowEventModal] = useState(false);
return (
{/* Modal (example) */}
{showEventModal && selectedEvent && (
<>
<div
className="modal fade show d-block"
id="kt_modal_add_user"
role="dialog"
tabIndex={-1}
aria-modal="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header py-3">
<div className="fw-bolder">
<h2>{selectedEvent.title || "Attendance"}</h2>
</div>
<div
className="btn btn-icon btn-sm btn-active-icon-primary"
data-kt-users-modal-action="close"
onClick={() => setShowEventModal(false)}
style={{ cursor: "pointer" }}
>
<KTIcon iconName="cross" className="fs-1" />
</div>
</div>
<div className="modal-body">
<p>
<strong>Date:</strong>{" "}
{format(parseISO(selectedEvent.date), "MMMM d, yyyy")}
</p>
{selectedEvent.startTime && (
<p>
<strong>Time:</strong> {selectedEvent.startTime} -{" "}
{selectedEvent.endTime}
</p>
)}
{selectedEvent.description && (
<p>
<strong>Description:</strong>{" "}
{selectedEvent.description}
</p>
)}
</div>
<div className="modal-footer py-3">
<button
type="button"
className="btn btn-sm btn-secondary"
onClick={() => setShowEventModal(false)}
>
Close
</button>
</div>
</div>
</div>
</div>
<div className="modal-backdrop fade show"></div>
</>
)}
)
---
## 📦 Installation
```bash
npm install "@san.devv/sandev-react-calendar"