react-timetable-events

 

Description (Demo)

> React Timetable Events - flexible timetable component. Ideal for school timetables.

Installation

``bash


with yarn

yarn add react-timetable-events

with npm

npm install react-timetable-events
`

Usage

`tsx
import * as React from 'react'
import Timetable from 'react-timetable-events'

export const Example () => 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' }}
/>
`

Available props

`js
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.

Events - the only required prop

`ts
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: [],
},
};
``

License

MIT © Nikola Spalevic & Filip Furtula