有没有办法每天在react-big-calendar中渲染多列？

Question

我可以在各个列中使用多个资源来呈现react-big-calendar的“ day”视图，但是我想对“ week”视图进行相同的操作。

我已经将资源，resourceId和resourceAccessor添加到了日历道具。从2017年开始，无数的Google搜索产生了几个github线程，指出如果不更改源代码是不可能的。 [此官方演示]似乎支持这一点。我是否需要派生并编辑源代码才能做到这一点？

// Format start and end dates/times to JS object to work with React-big-calendar
const FormatToRBC = e => Object.assign({}, e, {
    key: e.id + e.start,
    start: new Date(e.start),
    end: new Date(e.end),
    resourceId: e.teacher.id
})

// Format teacher data for use as 'resources'
const FormatTeachers = e => Object.assign({}, e, {
    key: e.teacher.id + e.teacher.name,
    resourceId: e.teacher.id,
    resourceTitle: e.teacher.name
})

// Define a six day week class
class SixDayWeek extends Component {
    render() {
        let { date } = this.props
        let range = SixDayWeek.range(date)

        return <TimeGrid {...this.props} range={range} eventOffset={15} />
    }
}

SixDayWeek.range = date => {
    // Set start date to the current work week's Monday
    let start = date
    let gotDate = date.getDate()
    // Check the current date's day as integer from 1(Mon) to 7(Sun)
    switch (date.getDay()) {
        case 2:
            date.setDate(gotDate - 1);
            break;

        case 3:
            date.setDate(gotDate - 2);
            break;

        case 4:
            date.setDate(gotDate - 3);
            break;

        case 5:
            date.setDate(gotDate - 4);
            break;

        case 6:
            date.setDate(gotDate - 5);
            break;

        case 7:
            date.setDate(gotDate - 6);
            break;

        default:
            break;
    }

    let end = dates.add(start, 5, 'day')
    let current = start
    let range = []

    while (dates.lte(current, end, 'day')) {
        range.push(current)
        current = dates.add(current, 1, 'day')
    }

    return range
}

// Set navigation button behavior
SixDayWeek.navigate = (date, action) => {
    switch (action) {
        case Navigate.PREVIOUS:
            return dates.subtract(date, 7, 'day')

        case Navigate.NEXT:
            return dates.add(date, 7, 'day')

        default:
            return date
    }
}

SixDayWeek.title = date => {
    return `${date.toLocaleDateString()}`
}

const Schedule = props => {
    const minTime = new Date();
    minTime.setHours(9,0,0);

    const maxTime = new Date();
    maxTime.setHours(21,0,0);
    console.log(props)

    return (
        <div>
            <Calendar
                style={{width: '95vw'}}
                localizer={localizer}
                views={{ week: SixDayWeek }}
                defaultView='week'
                events={props.data.map(FormatToRBC)}
                startAccessor='start'
                endAccessor='end'
                resources={props.data.map(FormatTeachers)}
                resourceIdAccessor='resourceId'
                resourceTitleAccessor='resourceTitle'
                selectable
                step={30}
                timeslots={2}
                min={minTime}
                max={maxTime}
            />
        </div>
    )
}

当我尝试时，每个资源在其下方都有整整一周的渲染时间；我希望情况相反：星期一-resourceA，resourceB，resourceC。