react-big-calendar-timeslots.jsx

import React, { Component } from 'react';
import BigCalendar from 'react-big-calendar';

class BigCalendarTimeslotsTest extends Component {
  constructor(props) {
    super(props);
    this.state = { timeslots: 2 };
  }

  render() {
    const { timeslots } = this.state;
    const step = 60 / timeslots;

    return (
      <div>
        <div>
          <p style={{ fontSize: '24pt' }}>
            <input
              style={{ width: '3em', textAlign: 'center' }}
              type="number"
              value={timeslots}
              min={1} max={20}
              onChange={e => this.setState({ timeslots: parseInt(e.target.value) })} />
            <span>step = {step}</span>
          </p>
        </div>

        <div style={{ height: '400px' }}>
          <BigCalendar defaultView="week" events={[]} timeslots={timeslots} step={step} />
        </div>
      </div>
    );
  }
}
export default BigCalendarTimeslotsTest;