Description (Demo)
React Timetable Events - flexible timetable component. Ideal for school timetables.
# with yarn yarn add react-timetable-events # with npm npm install react-timetable-eventsimport * as React from 'react' import Timetable from 'react-timetable-events' export const Example () => <Timetable events={{ monday: [ { id: 1, name: "Custom Event 1", type: "custom", startTime: new Date("2018-02-23T11:30:00"), endTime: new Date("2018-02-23T13:30:00"), }, ], tuesday: [], wednesday: [], thursday: [], friday: [], }} style={{ height: '500px' }} />TimeTable.propTypes = { events: PropTypes.object.isRequired, // events object prepared with days and list of events hoursInterval: PropTypes.shape({ from: PropTypes.number.isRequired, to: PropTypes.number.isRequired, }), // displayed hours renderDayHeader: PropTypes.func, // table header preview component renderHour: PropTypes.func, // hour preview component renderEvent: PropTypes.func, // event preview component getDayLabel: PropTypes.func, // change weekday label timeLabel: PropTypes.string, // Time label style: React.CSSProperties, // pass custom wrapper styles like height and width headerAttributes: PropTypes.object, // table header attributes - HTML attrs can be passed bodyAttributes: PropTypes.object, // table body attributes - HTML attrs can be passed };Check Storybook for more details about customization.
export interface Event { id: number | string; name: string; startTime: Date; endTime: Date; type?: string; [key: string]: unknown; } export interface Events { [day: string]: Event[]; } const events: Events = { events: { monday: [ { id: 1, name: "Custom Event 1", type: "custom", startTime: new Date("2018-02-23T11:30:00"), endTime: new Date("2018-02-23T13:30:00"), }, ], tuesday: [ { id: 2, name: "Custom Event 2", type: "custom", startTime: new Date("2018-02-22T12:30:00"), endTime: new Date("2018-02-22T14:30:00"), }, { id: 3, name: "Custom Event 3", type: "custom", startTime: new Date("2018-02-22T16:30:00"), endTime: new Date("2018-02-22T18:45:00"), }, ], wednesday: [], thursday: [], friday: [], }, };MIT © Nikola Spalevic & Filip Furtula