React Generic Calendar

A complete and generic React calendar component with automatic time grid generation.

🎯 Smart Grid: Only shows time slots where events exist - no empty rows! 📅 Week View: Full 7-day week display by default 🏋️ Fitness Ready: Built-in fields for gyms, classes, and bookings

✨ Features

• 🗓️ Dynamic Grid: Time slots automatically generated based on registered events
• 📅 3 Views: Day, Week, and Month
• 🎨 Fully Customizable: Themes, colors, custom styles
• 🏋️ Fitness Ready: Specific fields (instructor, capacity, level)
• 📱 Responsive: Works on desktop, tablet, and mobile
• 🌍 i18n: Multi-language support
• ⚡ Performance: Optimized for large event volumes
• 🔧 TypeScript: Complete typing included
• 📦 Lightweight: Few dependencies (React and date-fns)

🚀 Installation

npm install react-generic-calendar

🎯 Dynamic Grid Technology

Smart Time Slots: Only displays time slots where events actually exist Performance Optimized: No empty rows = faster rendering Flexible Hours: Works with any time format (06:30, 14:45, 23:15, etc.)

📸 Visual Features

The screenshot above demonstrates:

✅ Dynamic Grid: Only 5 time rows displayed (06:00, 07:30, 18:00, 20:30) - no empty 08:00, 09:00, 10:00, etc. ✅ Multiple Events: Several appointments can occur simultaneously in the same time slot ✅ Color Coding: Different event types with distinct colors (meetings, projects, consultations, etc.) ✅ Complete Information: Shows participant count, responsible person, and event type ✅ Professional Layout: Clean, modern design suitable for any scheduling application

📖 Basic Usage

The component displays a full week (7 days) by default with dynamic grid based on events:

import React from "react";
import { GenericCalendar } from "react-generic-calendar";

function App() {
  const events = [
    {
      id: "1",
      title: "Meeting",
      day: "2025-01-14",
      hour: "09:00",
      hourEnd: "10:00"
    },
    {
      id: "2",
      title: "Presentation",
      day: "2025-01-14",
      hour: "14:30",
      hourEnd: "15:30"
    }
  ];

  return (
    <GenericCalendar
      events={events}
      // Default: view="week" (7 days)
      // Grid: only shows 09:00 and 14:30 time slots
    />
  );
}

🏋️ Fitness Example

import React from "react";
import { GenericCalendar } from "react-generic-calendar";

function GymSchedule() {
  const gymEvents = [
    {
      id: "pilates-1",
      title: "Pilates",
      day: "2025-01-14",
      hour: "08:00",
      hourEnd: "09:00",
      instructor: "Priscila Brito",
      capacity: "5/20",
      level: "beginner",
      color: "#ed8936"
    }
  ];

  return (
    <GenericCalendar
      events={gymEvents}
      callbacks={{
        onEventClick: (event) => {
          console.log("Class selected:", {
            title: event.title,
            instructor: event.instructor,
            capacity: event.capacity
          });
        }
      }}
    />
  );
}

📋 Event Properties

| Property | Type | Required | Description | | ------------ | -------- | -------- | ----------------------------------------------------- | | id | string | ✅ | Unique identifier | | title | string | ✅ | Event title | | day | string | ✅ | Date in 'YYYY-MM-DD' format | | hour | string | ✅ | Start time 'HH:mm' | | hourEnd | string | ❌ | End time 'HH:mm' | | color | string | ❌ | Event color (hex) | | instructor | string | ❌ | Instructor name | | capacity | string | ❌ | Capacity in '5/20' format | | level | string | ❌ | Level: 'beginner', 'intermediate', 'advanced' | | status | string | ❌ | Status: 'available', 'full', 'cancelled', 'confirmed' | | equipment | string[] | ❌ | Equipment list | | price | number | ❌ | Class price | | location | string | ❌ | Event location |

⚙️ Configuration

<GenericCalendar
  events={events}
  initialViewMode="week"
  theme={{
    primaryColor: "#667eea",
    backgroundColor: "#ffffff",
    textColor: "#2d3748"
  }}
  callbacks={{
    onEventClick: (event) => console.log(event),
    onEventEdit: (event) => console.log("Edit:", event),
    onEventDelete: (id) => console.log("Delete:", id)
  }}
/>

🎨 Key Visual Features

| Feature | Traditional Calendar | React Generic Calendar | | ------------------ | ----------------------------- | --------------------------------- | | Empty Rows | ❌ Shows all 24 hours | ✅ Only event hours | | Performance | ❌ Renders 168 cells/week | ✅ Renders only needed cells | | Visual Clarity | ❌ Cluttered with empty space | ✅ Clean, focused view | | Flexibility | ❌ Fixed hourly intervals | ✅ Any time format (06:30, 14:45) | | Responsiveness | ❌ Heavy DOM | ✅ Lightweight, fast |

🚀 Perfect For

• 🏋️ Gyms & Fitness Centers - Class schedules with instructors and capacity
• 🏥 Medical Clinics - Doctor appointments with rooms and specialties
• 📚 Educational Institutions - Course schedules with teachers and rooms
• 🏢 Corporate - Meeting rooms and conference bookings
• 🎯 Any Business - With time-based appointments or events

📄 License

MIT License