reactjsfullcalendarfullcalendar-6

Initialize dayGridMonth with other month than current

I have a simple Fullcalendar in dayGridMonth view in ReactJs. I want to load a specific month initially set by the user instead of switching months with the provided buttons. In the documentation I could not find how to do that.

My code:

<div className='calendar'>
  <FullCalendar
    plugins={[dayGridPlugin]}
    initialView='dayGridMonth'
    events={calendarEvents}
    eventContent={renderEventContent}
    firstDay={1}
  />
</div>

I'm thinking about something like this:

<div className='calendar'>
  <FullCalendar
    ....
    month="2024-05"
  />
</div>
Solution

  • After more trying I found out, I can use the initialDate parameter. I can set it to any day of a month and it will display corresponding month.

     <FullCalendar
    plugins={[dayGridPlugin]}
    initialView='dayGridMonth'
    events={calendarEvents}
    eventContent={renderEventContent}
    firstDay={1}
    initialDate={new Date(2024, 1, 15)}
  />

    Reference: https://fullcalendar.io/docs/initialDate