Grid Content

This is kinda a crazy example but I think it illustrates the solution pretty well. You might want to have different content in the grid. maybe its a different color that denotes a more desireable date or maybe there are prices in each cell allowing the reserver to know how much is being payed for each day/hour. either way you want to control what appears inside.

In this example I select a random cell and insert a random number with a random color.

;

import React, { useState } from 'react'
import Reserver, {
  Bar,
  useReserver,
  reserverReducer,
  createBar,
  getPosition,
  resizeBars,
  Peg
} from 'react-reserver'
import styles from './basicexamples.module.css'
import { getRandomColor, getRandomInt } from './helpers'
import { useInterval } from './hooks'
export default function Content(props) {
  const { bars, isEditing, setIsEditing, addBar, setBars } = useReserver(
    reserverReducer,
    []
  )

  const [content, setContent] = useState({})

  useInterval(() => {
    const c = { ...content }
    c[`r${getRandomInt(0, 25)}c${getRandomInt(0, 25)}`] = (
      <Peg style={{ background: getRandomColor() }}>{getRandomInt(0, 250)}</Peg>
    )

    setContent(c)
  }, 150)

  return (
    <Reserver
      cellClassName={styles.row_cell}
      content={content}
      mouseDownCell={(props) => {
        const newbar = createBar(props.dimension, props.cell)
        addBar(newbar)
        setIsEditing(true)
      }}
      mouseEnterCell={(props) => {
        if (isEditing) {
          const nBars = resizeBars(bars, props)
          setBars(nBars)
        }
      }}
      mouseUpCell={() => {
        const dBars = bars.map((bar) => {
          if (bar.editing) {
            return {
              ...bar,
              editing: false,
              style: { ...bar.style, pointerEvents: 'auto' }
            }
          }
          return bar
        })

        setBars(dBars)
        setIsEditing(false)
      }}
    >
      {() => {
        return bars.map((bar) => {
          return (
            <Bar
              key={bar.id}
              {...bar}
              style={{
                ...bar.style,
                ...getPosition(bar.row, bar.column, bar.dimension)
              }}
            />
          )
        })
      }}
    </Reserver>
  )
}