1

我正在使用没有其他样式的 bootstrap 4.0 alpha。布局非常难看，日历只显示一列而不是表格。任何想法为什么以及如何？

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

注意：默认样式使用 height: 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>
    );
}

这是布局结果 布局结果

4

2 回答 2

1

我发现我错过了这一行：

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

感谢在此处输入链接描述

于 2017-09-03T06:19:09.507 回答
1

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

于 2017-09-03T09:00:46.313 回答