📅 Appointment Calendar

A customizable React calendar component for booking appointments, built on top of react-big-calendar. Supports admin-defined availability, restricted time slots, and user-friendly appointment booking.

💾 Installation

npm install appointment-calendar react-big-calendar date-fns

or

yarn add appointment-calendar react-big-calendar date-fns

🎨 Styles

You will need to import both react-big-calendar's default styles and this package's custom styles:

import "react-big-calendar/lib/css/react-big-calendar.css";
import "appointment-calendar/dist/index.css";

💻 Usage

import React, { useState } from "react";
import { AppointmentCalendar } from "appointment-calendar";

const MyApp = () => {
  const [events, setEvents] = useState([
    {
      title: "Booked Appointment",
      start: new Date(2025, 7, 24, 10, 0),
      end: new Date(2025, 7, 24, 11, 0),
    },
  ]);

  return (
    <div style={{ height: "600px" }}>
      <AppointmentCalendar
        events={events}
        onSelectSlot={(slotInfo) => {
          // Example: user books a new appointment
          const newEvent = {
            title: "New Appointment",
            start: slotInfo.start,
            end: slotInfo.end,
          };
          setEvents([...events, newEvent]);
        }}
        onSelectEvent={(event) => alert(event.title)}
      />
    </div>
  );
};

export default MyApp;

🛠️ Props

| Prop | Type | Description | | --------------- | ---------------------------- | -------------------------------------------------------------------------- | | events | Array<Event> | List of events/appointments. Each event needs title, start, and end. | | onSelectSlot | (slotInfo) => void | Callback when a user clicks/drag-selects an available time slot. | | onSelectEvent | (event) => void | Callback when a user clicks an existing event. | | eventColors | Partial<Record<SlotType, string>> | Map of event type → CSS color (background). If provided, overrides internal color logic. | customEventRenderer | React.ComponentType<any> | Custom React node for event content. Replaces the default text label inside each event. | view | "month" \| "week" \| "day" | Initial calendar view (default: "week"). | | ...rest | - | All other props from react-big-calendar. |

🔥 Types

export type SlotType = "open" | "restricted" | "booked";

export interface CalendarEvent {
    id: string,
    title: string,
    start: Date,
    end: Date,
    type: SlotType, // Used by eventColors & internal styling
    meta?: any // Additional metadata if needed
}

🌍 Roadmap

• Dark Mode
• Reoccuring Availability
• Better Mobile accessibility

📝 Liscense

MIT © 2025 Jalen Evans