Question

我正在使用bootstrap 4.0 alpha而没有其他样式。布局非常难看，日历只显示一列而不是表格。知道原因和方法吗？

我从网站上注意到以下内容，但我不明白应该怎么做：

注意：默认样式使用高度：100％，这意味着您的容器必须设置明确的高度（随意调整样式以满足您的特定需求）。

这是我的渲染代码：

    render() {
    return (
        <div className="container">
            <TaskSearchBar
                search={this.onSearch}
            />
            <BigCalendar
                selectable
                events={[]}
                defaultView='week'
                scrollToTime={new Date(1970, 1, 1, 6)}
                defaultDate={new Date(2015, 3, 12)}
                onSelectEvent={event => alert(event.title)}
                onSelectSlot={(slotInfo) => alert(
                    `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                    `\nend: ${slotInfo.end.toLocaleString()}`
                )}
            />
            <TaskList
                queryUrl={this.state.queryUrl}
            />
        </div>
    );
}

这是布局结果

Answer 1

如果您仍然遇到任何问题，您复制的代码段表示包含BigCalendar的元素需要在其上设置特定的高度，例如420px或60%。这将使得flexbox算法不会贪吃空间。如果你不这样做，你会发现日视图一次渲染每一个小时，而不是提供一个可滚动的窗口。

Answer 2

我发现我错过了这一行：

require('react-big-calendar/lib/css/react-big-calendar.css');

感谢enter link description here

React-big-calendar与bootstrap 4.0 alpha布局丑陋

2 个答案: