error "date[("get" + method)] is not a function" with Big Calendar with date-fns

Question

I am new at using this API and that I am not yet used to their documentation. I have problem with my calendar project, where I use react-big-calendar with date-fns and DateTimePicker https://www.npmjs.com/package/react-datetime-picker, I use the DateTimePicker to manually input title, start and end date and time and be saved into localstorage. Calendar Project

It would save successfully into localstorage, but the page will go blank when viewing it in week and day and when I try to check in the localstorage that to me there is nothing wrong with the data when I compare with existing date and the my test input. I dont know where it went wrong.

import format from "date-fns/format"
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import { dateFnsLocalizer } from "react-big-calendar"
import DateTimePicker from "react-datetime-picker/dist/DateTimePicker"
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'
import 'react-clock/dist/Clock.css'
import { Calendar } from "react-big-calendar"
import 'react-big-calendar/lib/css/react-big-calendar.css'
import events from "../data/events"

const locales ={
"en-US" : require("date-fns/locale/en-US")
}

const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales
})

function Body() {
const [ newEvent, setNewEvent ] = useState({ title: "", start: "", end: ""})
/const [ allEvents, setAllEvents ] = useState(events)/
/const [currentEvent, setCurrentEvent] = useState("")/

const [ allEvents, setAllEvents ] = useState(() => {

    const savedEvents = localStorage.getItem("events")

    if (savedEvents) {
        return JSON.parse(savedEvents)
    } else {
        return events
    }
})

useEffect(() => {
    localStorage.setItem("events", JSON.stringify(allEvents))
}, [allEvents])

function handleAddEvent(e){
    e.preventDefault()
    
    if (newEvent !== "") {
        setAllEvents([
            ...allEvents,
            newEvent
        ])
    }
    
    console.log(newEvent)
    setNewEvent({ title: "", start: "", end: "" })
}  

return (
    <div className="cal-body">
        <div className="picker">
            <input 
                type="text"
                value={newEvent.title} 
                onChange={(e) => setNewEvent({...newEvent, title: e.target.value})}
            />
            <DateTimePicker
                disableClock={true}
                disableCalendar={true}
                selected={newEvent.start}
                dayPlaceholder="dd"
                monthPlaceholder="mm"
                yearPlaceholder="yyyy"
                hourPlaceholder="hh"
                minutePlaceholder="mm"
                onChange={(start) => setNewEvent({...newEvent, start})}
            />
            <DateTimePicker
                disableClock={true}
                disableCalendar={true}
                style={{
                    background: "white"
                }}
                selected={newEvent.end}
                dayPlaceholder="dd"
                monthPlaceholder="mm"
                yearPlaceholder="yyyy"
                hourPlaceholder="hh"
                minutePlaceholder="mm"
                onChange={(end) => setNewEvent({...newEvent, end})}
            />
            <button className="button" onClick={handleAddEvent}>Add</button>
        </div>
        
        <div className="calendar">
            <Calendar
                selectable
                localizer={localizer}
                events={allEvents}
                startAccessor="start"
                endAccessor="end"
                popup="true"
                onSelectEvent={() => setOpenModal(true)}
                style={{ 
                    height: 500, 
                    margin:"50px", 
                    background: "white", 
                    color: "black",
                    border: "2px solid black" }}
            />
        </div>
    </div>
)
}

export default Body

Answer 1

This occurs when RBC is getting something other than a true js Date instance for one of the date type props (date, event start and end, etc). Getting those events from localStorage your events would have string values for the start and end dates. You would need some form of preprocessor method that would convert them from the UTC string values to true js Date objects.