react-timetable-events

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