Im trying to use the react-big-calendar package. http://intljusticemission.github.io/react-big-calendar/examples/index.html
I have the calendar displaying on the page. The pagination is working and I have no errors in my console. However none of my events are showing. Do I have a syntax / format error somewhere?
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>
)
}
Must add height for calendar container element. If you do not add height for calendar container, calendar won't be visible.
Must read the doc for 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>