Skip to content

nikolasp/react-timetable-events

Repository files navigation

react-timetable-events

NPM JavaScript Style Guide

Description (Demo)

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

Installation

# with yarn yarn add react-timetable-events # with npm npm install react-timetable-events

Usage

import * 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' }} />

Available props

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

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

About

Timetable Events React component

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •