📅 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).

      <Calendar
          events={attendance}
          setSelectedEvent={setSelectedEvent}
          setShowEventModal={setShowEventModal}
      />
  

• 📌 Events JSON example

  [{
    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

  [{
    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.

  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

npm install "@san.devv/sandev-react-calendar"