react-scheduler-table

Install

npm install --save react-scheduler-table

Usage

import React, { Component } from 'react'
 
import Timetable from 'react-scheduler-table'
 
const settings = {
    startDay: "09:00",
    endDay: "16:00",
    is12hours: false,
    hourSplit: 0.25, // 1 hour / 0.25 = 15 min - each row
    columnCnt: 4
};
 
class Example extends Component {
  render () {
    return (
      <Timetable settings={settings} />
    )
  }
}

Props

Property	Type	Default	Example	Description
settings	object	undefined	{ cellHeight: 40, startDay: "09:00", endDay: "16:00", is12hours: false, hourSplit: 0.25, columnCnt: 4 }	Initial settings for timetable: cellHeight - height for cells (needed for proper render SavedTime); startDay - starting time for the table; endDay - ending time for the table; is12hours - 12 or 24 hours format; hourSplit - how hour should be divided (or row count for one hour). 0.5 for 30 min hour split (or 2 rows for one hour); columnCnt - how many columns in the timetable;
className	string	''	'MyTable'	Class for main component table.
classNameSavedTime	string	''	'MySavedTime'	Class for SavedTime component.
reserved	Array	[]	[ { id: uniqueID, start: 10, end: 12, column: 1 } ]	Default data.
savedTimeContent	React Component	undefined	savedTime => <h5>My Saved Time: <br /> {${savedTime.parsedStart} - ${savedTime.parsedEnd}}</h5>	Content inside SavedTime component.

Methods

Method	Type	Example	Param	Description
onAddTime	function	onAddTime={time => console.log(time)}	{ activeColumn: number, newStartTime: number, newEndTime: number, reserved: Array }	Callback to choose any time (cell) in the timetable.
onSaveTime	function	onSaveTime={time => console.log(time)}	{ activeColumn: number, newStartTime: number, newEndTime: number, reserved: Array }	Callback to save time in the timetable.

License

MIT © SergeyDragunov