react-big-calendarイベントの基本設定が表示されない

Question

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> 
) 
} 

Answer 1

あなたはカレンダー上の高さや最小の高さを設定する必要があります：あなたはBigCalendarコンポーネントを作成する場合

.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', 
    } 
] 

Answer 2

あなたは

を指定

startAccessor="startDate" 
endAccessor="endDate" 

これはstartDate=を探すためにBigCalendarを伝えますイベントオブジェクトにstart=とend=の代わりにendDate=が含まれています。これにあなたのイベントの配列を変更し、それが正常に動作する必要があります：

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', 
}, 
]; 

Answer 3

あなたはダミーデータでの開始と終了キーを設定していますが、たstartDateとendDateににアクセスしています。

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