react-big-calendar doesn't show events-CodePudding

I'm using react-big-calendar to create and update event times by dragging them. I'm using useState to handle the events, and the events themselves are static. The problem is, they're not loading at all.

And I'm getting the following message in the console: "Warning: Failed prop type: Invalid prop events[0] of type array supplied to Calendar, expected object."

If anyone could help, I'll appreciate it. Thanks in advance.

import { useEffect, useState } from 'react';
import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import moment from 'moment';
import { format, parse, startOfWeek, getDay } from 'date-fns';
import enUS from 'date-fns/locale/en-US';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";


const DnDCalendar = withDragAndDrop(Calendar);
const locales = {
    'en-US': enUS,
};
const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales
});

const initialEvents = [
    {
        id: 0,
        title: "All Day Event very long title",
        allDay: true,
        start: new Date(2015, 3, 0),
        end: new Date(2015, 3, 1)
    },
    {
        id: 1,
        title: "Long Event",
        start: new Date(2015, 3, 7),
        end: new Date(2015, 3, 10)
    },
];

const EventComponent = ({ start, end, title }) => {
    return (
      <>
        <p>{title}</p>
        <p>{start}</p>
        <p>{end}</p>
      </>
    );
};
  
const EventAgenda = ({ event }) => {
    return (
        <span>
        <em style={{ color: "magenta" }}>{event.title}</em>
        <p>{event.desc}</p>
        </span>
    );
};


const HomePage = () => {

    const [events, setEvents] = useState([initialEvents]);

    const onEventDrop = ({ event, start, end, allDay }) => {
        console.log("event clicked");
        console.log(start, event, end, allDay);
    };

    const addEvent = ({ event, start, end, allDay }) => {
        const newEvent = {
          id: events.length,
          title: "New event",
          start: new Date(new Date(start).setHours(new Date().getHours() - 3)),
          end: new Date(new Date(end).setHours(new Date().getHours()   3)),
          desc: "This is a new event"
        }
    
        setEvents(state => [ ...state, newEvent ]);
    };

    return (
        <DnDCalendar
            defaultView='week'
            selectable
            events={events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            min={new Date(2008, 0, 1, 1, 0)} // 8.00 AM
            max={new Date(2008, 0, 1, 23, 59)}
            localizer={localizer}
            toolbar
            resizable
            onEventDrop={onEventDrop}
            onSelectSlot={addEvent}
            onSelectEvent={event => alert(event.desc)}
            components={{
                event: EventComponent,
                agenda: {
                  event: EventAgenda
                }
            }}
        />
    )
}

export default HomePage

CodePudding user response：

as you mentioned "And I'm getting the following message in the console: "Warning: Failed prop type: Invalid prop events[0] of type array supplied to Calendar, expected object." you have to pass "initialEvents" directly to useState instead of "array of array"

const [events, setEvents] = useState(initialEvents);

CodePudding user response：

You need to change few things. First, since all your events are in 2015, replace this line of code :

defaultDate={moment().toDate()}

with :

defaultDate={new Date(2015, 3, 1)}

Second, as mentioned in previous answer, since your initialEvents is already array, you set to be initial state like this :

const [events, setEvents] = useState(initialEvents); // you don't need extra []

With these two correction, you shoud be able to see event with tittle 'All day Event very long tittle' on first page, and second event on next page in week view.