Reactjs 在时间段上的时间之间做出反应

我使用了React big calendar的资源调度程序，我想知道时间段的中间步骤是否也可以变得透明，但概述仍然存在

这是我目前的结果：

使用此代码：

import React , {useEffect} from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";


import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
import moment from 'moment';
import 'moment/locale/nl';
import Firebase from 'firebase';

moment.locale('nl');

const localizer = momentLocalizer(moment);

const newEvents = [];

export default function CalendarDesk() {

    const [eventDb, setEventDb] = useState([]);


    useEffect(() => {
      let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        snapshot.forEach((childSnap) => {
        let state = childSnap.val();
        console.log(state);
            //newEvents.push({title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)}); 
            setEventDb(eventDb => [...eventDb,{title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)}]);          
    });
  })

  console.log(newEvents);

  },[] );

      const resourceMap = [
        { resourceId: 1, resourceTitle: 'Robin Frissen' },
        { resourceId: 2, resourceTitle: 'Raoul Frissen' },
        { resourceId: 3, resourceTitle: 'Joppe Meijers' },

      ]

      let today = new Date();
      let formats ={
        timeGutterFormat: (date, culture, localizer) => 
              localizer.format(date, 'H:mm', culture),
      }

      const onSelectEvent = function(pEvent) {
        const r = window.confirm("Weet je zeker dat je de afspraak wilt verwijderen?'")
        if(r === true){
          //const idx = indexOf(pEvent)
          console.log(pEvent);
          var ref = Firebase.database().ref('events');
          ref.orderByChild('id').equalTo(pEvent.id).on('child_added', (snapshot) => {
          snapshot.ref.remove()
          });

          setEventDb(eventDb.filter(item => item.id !== pEvent.id));


        }
      }

  return (
    <div>
      <Container>
          <h3>Agenda</h3>
          <Row >
            <Col md={12} >


                <Calendar
                events={eventDb}
                localizer={localizer}
                defaultView={'day'}
                views ={['day', 'work_week']}
                timeslots={4}
                step={15}
                defaultDate={new Date()}
                formats={formats}
                onSelectEvent = {event => onSelectEvent(event)}
                min={new Date(today.getFullYear(),today.getMonth(), today.getDate(), 8)}
                max={new Date(today.getFullYear(), today.getMonth(), today.getDate(), 18)}
                resources={resourceMap}
                resourceIdAccessor="resourceId"
                resourceTitleAccessor="resourceTitle"
                culture={moment.locale('nl')}
                messages={{
                  today: "Vandaag",
                  previous: "<",
                  next: ">",
                  month: "Maand",
                  week: "Week",
                  day: "Dag"
                }}
                />

            </Col>
        </Row>

        </Container>
    </div>
  );

}

import React，{useffect}来自“React”；
从“react”导入{useState}；
从“@material ui/core/styles”导入{makeStyles}”；
从“assets/jss/material dashboard react/views/dashboardStyle.js”导入样式；
从“react bootstrap”导入{Container}；
从“react bootstrap”导入{Row}；
从“react bootstrap”导入{Col}；
导入'react big calendar/lib/css/react big calendar.css'
从“react big Calendar”导入{Calendar，momentLocalizer，Views}
从“力矩”中导入力矩；
导入'moment/locale/nl'；
从“Firebase”导入Firebase；
地点（'nl'）；
常数定位器=力矩定位器（力矩）；
const newEvents=[]；
导出默认函数CalendarDesk（）{
const[eventDb，setEventDb]=useState（[]）；
useffect（（）=>{
让ref=Firebase.database（）.ref（'/events'）；
参考on（'value'，快照=>{
snapshot.forEach（（childSnap）=>{
让state=childSnap.val（）；
console.log（状态）；
//newEvents.push（{title:state.title，id:state.id，resourceId:state.resourceId，start:new Date（state.yearStart，state.monthStart，state.dayStart，state.hourStart，state.minuteStart，state.secondStart），end:new Date（state.yearStart，state.monthStart，state.dayStart，state.hourEnd，state.secondEnd）}）；
setEventDb（eventDb=>[…eventDb，{title:state.title，id:state.id，resourceId:state.resourceId，start:new Date（state.yearStart，state.monthStart，state.dayStart，state.hourStart，state.minuteStart，state.secondStart），end:new Date（state.yearStart，state.monthStart，state.dayStart，state.hourEnd）}）；
});
})
console.log（newEvents）；
},[] );
常量资源映射=[
{resourceId:1，resourceTitle:'Robin Frissen'}，
{resourceId:2，resourceTitle:'Raoul Frissen'}，
{resourceId:3，resourceTitle:'Joppe Meijers'}，
]
让今天=新日期（）；
let格式={
timeGutterFormat：（日期、区域性、定位器）=>
localizer.format（日期'H:mm'，区域性），
}
const onSelectEvent=函数（pEvent）{
const r=窗口。确认（“您是否愿意在未来几天内继续工作？”）
如果（r==真）{
//常量idx=索引of（pEvent）
控制台日志（pEvent）；
var ref=Firebase.database（）.ref（'events'）；
ref.orderByChild（'id'）.equalTo（pEvent.id）.on（'child_added'，（快照）=>{
snapshot.ref.remove（）
});
setEventDb（eventDb.filter（item=>item.id！==pEvent.id））；
}
}
返回(
议程
onSelectEvent（事件）}
min={新日期（今天.getFullYear（），今天.getMonth（），今天.getDate（），8）}
max={new Date（today.getFullYear（），today.getMonth（），today.getDate（），18）}
资源={resourceMap}
resourceIdAccessor=“resourceId”
resourceTitleAccessor=“resourceTitle”
区域性={moment.locale（'nl'）}
信息={{
今天：“Vandaag”，
以前的：“，
月份：“Maand”，
周：“周”，
日：“达格”
}}
/>
);
}

这将是理想的结果：

我通过->

时隙={1}步骤={10}

我可以添加更多插槽，但这并不清楚，因为每个插槽的大小都相同