andreasrippl/react-timetable-events

Timetable events React component

react-timetable-events

Description (Demo)

React Timetable Events Component

Install

yarn add react-timetable-events

Usage

import React, { Component } from 'react'

import Timetable from 'react-timetable-events'

class Example extends Component {
  render () {
    return (
      <Timetable events={this.state.events}/>
    )
  }
}

Available props

TimeTable.propTypes = {
  events: PropTypes.object.isRequired, // events object prepared with days and list of events
  hoursInterval: PropTypes.array, // array with min and max hours
  renderEvent: PropTypes.func, // render event element in timetable
  getDayLabel: PropTypes.func, // change weekday label
  timeLabel: PropTypes.string // Time label
}

Default props

TimeTable.defaultProps = {
  hoursInterval: [ 7, 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 prop format

  this.state = {
    events: {
      monday: [
        {
          id: 1,
          name: 'Custom Event 1',
          type: 'custom',
          startTime: moment('2018-02-23T11:30:00'),
          endTime: moment('2018-02-23T13:30:00')
        }
      ],
      tuesday: [
        {
          id: 2,
          name: 'Custom Event 2',
          type: 'custom',
          startTime: moment('2018-02-22T12:30:00'),
          endTime: moment('2018-02-22T14:30:00')
        },
        {
          id: 3,
          name: 'Custom Event 3',
          type: 'custom',
          startTime: moment('2018-02-22T16:30:00'),
          endTime: moment('2018-02-22T18:45:00')
        }
      ],
      wednesday: [],
      thursday: [],
      friday: []
    }
  }

License

MIT © Nikola Spalevic & Filip Furtula