Render react-big-calendar

Question

i want to render the calendar with a new defaultDate, i use the defaultDate with a useState and update with a onClick function with a new date, but the filter don't render the new date, this is the code:

const [defaultDate, setDefaultDate] = useState(new Date());

  function filterDate(date, hour){
    setDefaultDate(new Date(date+'T'+hour))
  }

<Calendar
        defaultDate={defaultDate}
        events={myEvents}
        localizer={localizer}
        startAccessor="start"
        endAccessor="end"
        today
        style={{ height: '80vh' }}
        onSelectEvent={handleSelectEvent}
        selectable
      />

already tried to use an useEffect but had the same problem.

score 1 · Accepted Answer · answered Sep 06 '22 at 13:06

This is because defaultDate probably only controls the initial date, and not the current one. Typically props that begin with default or initial work this way (but dont have to, its just a common naming convention).

It means its in "uncontrolled" mode which is where the state of what the current date is is managed internally. You want "controlled" mode which is where you hold the date state -- this way you can alter it as you please. Its up to you to then pass this date to the lib, and also respond to events the lib might fire.

You can do this by using date prop instead. Since you now manage the state, you also need to bind onNavigate so that user events in the calendar like changing the date in the UI are set back up into your new state.

const [date, setDate] = useState(new Date());

  function filterDate(date, hour){
    setDate(new Date(date+'T'+hour))
  }



<Calendar
        date={date}
        onNavigate={date => setDate(date)}
        events={myEvents}
        localizer={localizer}
        startAccessor="start"
        endAccessor="end"
        today
        style={{ height: '80vh' }}
        onSelectEvent={handleSelectEvent}
        selectable
      />

Render react-big-calendar

1 Answers1