反應大日曆與引導4.0阿爾法佈局醜陋

Question

我使用引導4.0阿爾法沒有其他樣式。佈局非常醜陋，日曆只顯示一列而不是表格。任何想法爲什麼和如何？

我注意到從網站下，但我不明白，我應該怎麼辦：

注意：默認樣式使用高度：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

我發現我錯過了這行：

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

感謝enter link description here

Answer 2

如果您仍然遇到任何問題，您複製的代碼段說包含BigCalendar的元素需要設置一個特定的高度，如420px或60%。這將使Flexbox算法避免貪婪地佔用空間。如果你不這樣做，你會發現日視圖一次渲染每個小時，而不是提供一個可滾動的窗口。