React Timetable Component

A beautiful and modern React timetable component built with Material-UI and react-big-calendar.

Installation

npm install react-timetable-component

Dependencies

This package has the following peer dependencies:

{
  "react": "^18.0.0",
  "@mui/material": "^5.0.0",
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0",
  "date-fns": "^2.0.0",
  "prop-types": "^15.0.0",
  "react-big-calendar": "^1.0.0"
}

Make sure to install these dependencies if you haven't already.

Usage

import { TimeTable } from "react-timetable-component";

const MyComponent = () => {
  const schedules = [
    {
      classModule: "Mathematics",
      classRoom: "Room 101",
      startHour: "8",
      endHour: "10",
      day: "Monday",
      color: "#E6F3FF",
    },
    // Add more schedule items as needed
  ];

  return (
    <div style={{ height: "600px" }}>
      <TimeTable schedules={schedules} />
    </div>
  );
};

Props

TimeTable Component

Prop	Type	Required	Description
schedules	array	Yes	Array of schedule objects

Schedule Object Structure

Property	Type	Required	Description
classModule	string	Yes	Name of the class/module
classRoom	string	Yes	Room number or location
startHour	string	Yes	Start time (24-hour format)
endHour	string	Yes	End time (24-hour format)
day	string	Yes	Day of the week (Monday-Friday)
color	string	Yes	Background color for the schedule block

Features

• Beautiful Material-UI styling
• Responsive design
• Week and day views
• Interactive schedule blocks with popover details
• Customizable colors for different classes
• Modern hover effects and animations

License

MIT