fullcalender Custom View to show past data

Question

I am using a custom view ,I want to view the past data in one screen as shown in the attached image.

I am currently not able to view it on the same screen. I should use the prev icon to see it in a single screen.

Output I get:

Expected Output:

I do not want to use the header Toolbar to navigate.

The custom view with valid range works fine when the range is present or future dates.

 <FullCalendar
          plugins={[dayGridPlugin]}
          firstDay={1}
          initialView="dayGridFiveWeek"
          views={{
            dayGridFiveWeek: {
              type: "dayGrid",
              duration: { weeks: 5 },
            },
          }}
          validRange={{
            start: "2023-01-15",
            end: "2023-02-08",
          }}
          headerToolbar={{
            left: "",
            center: "title",
            right: "prev,next",
          }}
          eventSources={eventsSource}
          datesSet={(dateInfo) => {
            formatDate(dateInfo.view.currentStart);
          }}
          eventDidMount={(info) => toolTipContent(info)}
        />

Answer 1

If you set

initialDate="2023-01-15"

so it starts in the right place, you shouldn't have a problem.

Demo (using vanilla JS, since I don't use react): https://codepen.io/ADyson82/pen/zYMoKQR