react-timetable-events

Description (Demo)

React Timetable Events - flexible timetable component

Install

yarn add 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: [],
  }}
/>

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
  renderHour: PropTypes.func, // hour preview component
  renderEvent: PropTypes.func, // event preview component
  getDayLabel: PropTypes.func, // change weekday label
  timeLabel: PropTypes.string, // Time label
};

Default props

TimeTable.defaultProps = {
  hoursInterval: { from: 7, to: 24 },
  timeLabel: "Time",
  renderHour(hour, defaultAttributes, styles) {
    return (
      <div {...defaultAttributes} key={hour}>
        {hour}
      </div>
    );
  },
  renderEvent(event, defaultAttributes, styles) {
    return (
      <div {...defaultAttributes} title={event.name} key={event.id}>
        <span className={styles.event_info}>{event.name}</span>
        <span className={styles.event_info}>
          {event.startTime.format("HH:mm")} - {event.endTime.format("HH:mm")}
        </span>
      </div>
    );
  },
  getDayLabel: (day) => upperCase(day),
};

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