npm package: @san.devv/sandev-react-calendar
Description: 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**,
Latest version: 1.0.5

# 📅 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**.

![sandev-react-calendar banner](https://gitlab.com/SandeshPatankar/reactdockerproj01/-/raw/main/calendar.jpg) 
---

## ✨ 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"