Basic setup of react-big-calendar events not showi

Question

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

Answer 1

You need to set a height or min height on the calendar:

.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

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>

Answer 3

When you create the BigCalendar component you specify

startAccessor="startDate"
endAccessor="endDate"

This tells BigCalendar to look for startDate= and endDate= instead of start= and end= in your event objects. Change your event array to this and it should work fine:

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 4

You've set start and end key in dummydata but you're accessing startDate and endDate.

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