react-big-calendar 事件的基本设置未显示答案

【问题标题】：Basic setup of react-big-calendar events not showingreact-big-calendar 事件的基本设置未显示
【发布时间】：2018-05-22 10:55:45
【问题描述】：

我正在尝试使用 react-big-calendar 包。 http://intljusticemission.github.io/react-big-calendar/examples/index.html

我在页面上显示了日历。分页正在工作，我的控制台中没有错误。但是，我的任何事件都没有显示。我在某处有语法/格式错误吗？

import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

BigCalendar.momentLocalizer(moment); // or globalizeLocalizer


const Calendar = props => {
  const dummyEvents = [
    {
      allDay: false,
      end: new Date('December 10, 2017 11:13:00'),
      start: new Date('December 09, 2017 11:13:00'),
      title: 'hi',
    },
    {
      allDay: true,
      end: new Date('December 09, 2017 11:13:00'),
      start: new Date('December 09, 2017 11:13:00'),
      title: 'All Day Event',
    },
  ];
  return (
     <div>
         <BigCalendar
          events={dummyEvents}
          startAccessor="startDate"
          endAccessor="endDate"
        />
     </div>
  )
}

【问题讨论】：

标签： react-big-calendar

【解决方案1】：

必须为日历容器元素添加高度。如果不为日历容器添加高度，日历将不可见。

必须阅读 react-big-calendar 的文档：https://github.com/intljusticemission/react-big-calendar

.rbc-calendar {
  min-height: 500px ;
}

<div className="rbc-calendar">
     <BigCalendar
      events={dummyEvents}
      startAccessor="startDate"
      endAccessor="endDate"
    />
 </div>

【讨论】：

【解决方案2】：

您需要在日历上设置一个高度或最小高度：

.rbc-calendar {
  min-height: 600px;
}



const dummyEvents = [
    {
      allDay: false,
      end: new Date('December 09, 2017 20:00:00'),
      start: new Date('December 09, 2017 06:00:00'),
      title: 'hi',
    }
]

【讨论】：

【解决方案3】：

当您创建 BigCalendar 组件时，您指定

startAccessor="startDate"
endAccessor="endDate"

这告诉 BigCalendar 在您的事件对象中寻找 startDate= 和 endDate= 而不是 start= 和 end=。将您的事件数组更改为此，它应该可以正常工作：

const dummyEvents = [
{
  allDay: false,
  endDate: new Date('December 10, 2017 11:13:00'),
  startDate: new Date('December 09, 2017 11:13:00'),
  title: 'hi',
},
{
  allDay: true,
  endDate: new Date('December 09, 2017 11:13:00'),
  startDate: new Date('December 09, 2017 11:13:00'),
  title: 'All Day Event',
},
];

【讨论】：

【解决方案4】：

您已在 dummydata 中设置了开始和结束键，但您正在访问 startDate 和 endDate。

<BigCalendar
      events={dummyEvents}
      startAccessor='start'
      endAccessor='end' />

【讨论】：