How set number of days displayed in dayGridMonth mode (full-calendar, vue3)

Question

The problem is I was trying to set custom number of days in dayGridMonth mode via using visibleRange property but it only works in custom views. I am wondering if there are any other ways to accomplish that in dayGridMonth mode. I am using @fullcalendar/vue3 - v6.

Here is my code:

<script setup>
import { onMounted, onUnmounted, ref } from "vue";

import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import CalendarEvent from "@/views/calendar/components/CalendarEvent.vue";
import CalendarDay from "@/views/calendar/components/CalendarDay.vue";

import MaterialSearch from "@/components/MaterialSearch.vue";
import MaterialTypography from "@/components/MaterialTypography.vue";
import MaterialDivider from "@/components/MaterialDivider.vue";
import { useGeneralStore } from "@/stores/general";
import { getMonth } from "../../helpers/dates";

const general = useGeneralStore();

const fullCalendarRef = ref(null);

const CALENDER_EVENT_BG = "#141414";
const PLUGINS = [dayGridPlugin, interactionPlugin, timeGridPlugin];

const startDate = ref("");
const selectedDate = ref("");

const toggleCalendarMode = (type) => {
  if (!fullCalendarRef.value) return "";

  const calendarApi = fullCalendarRef.value.getApi();
  calendarApi[type]();
};

const onDateChange = (payload) => {
  startDate.value = payload.startStr;
};

const calendarOptions = {
  navLinks: true,
  dayHeaders: false,
  dayMaxEvents: 2,
  editable: true,
  selectable: true,
  weekends: true,
  allDay: true,
  plugins: PLUGINS,
  initialView: "dayGridMonth",
  visibleRange: {
    start: "2020-03-22",
    end: "2020-03-25",
  },
  datesSet: onDateChange,
  headerToolbar: {
    start: "",
    center: "",
    end: "",
  },
  events: [
  {
    title: "Lorem ipsum dolor sit amet consectetur.",
    start: "2024-02-06",
    backgroundColor: CALENDER_EVENT_BG,
    extendedProps: {
      eventType: "Calendar notes",
    },
  },
  {
    title: "Lorem ipsum dolor sit amet consectetur.",
    start: "2024-02-06",
    backgroundColor: CALENDER_EVENT_BG,
    extendedProps: {
      eventType: "Calendar notes",
    },
  },
  {
    title: "Lorem ipsum dolor sit amet consectetur.",
    start: "2024-02-06",
    backgroundColor: CALENDER_EVENT_BG,
    extendedProps: {
      eventType: "Calendar notes",
    },
  },
]
};
</script>

<template>
  <div>
    <div class="full-calendar-wrapper">
      <div class="d-flex align-items-center gap-2">
        <button
          class="text-white bg-black-80 border-0 px-2 py-1 rounded-3 font-weight-bold text-sm"
        >
          Day
        </button>
        <button
          class="text-white bg-black-80 border-0 px-2 py-1 rounded-3 font-weight-bold text-sm"
        >
          Week
        </button>

        <material-search class="mx-auto" />

        <button
          class="text-white bg-black-80 border-0 px-2 py-1 rounded-3 font-weight-bold text-sm"
          @click="toggleCalendarMode('today')"
        >
          Today
        </button>

        <span class="text-lg text-white font-weight-bold ps-4">
          {{ getMonth(startDate) }}
        </span>

        <button
          class="text-white bg-transparent border-0"
          @click="toggleCalendarMode('prev')"
        >
          <i class="fas fa-solid fa-chevron-left"></i>
        </button>
        <button
          class="text-white bg-transparent border-0"
          @click="toggleCalendarMode('next')"
        >
          <i class="fas fa-solid fa-chevron-right"></i>
        </button>
      </div>

      <div class="full-calendar-inner">
        <full-calendar
          ref="fullCalendarRef"
          :options="calendarOptions"
        >
          <template v-slot:eventContent="arg">
            <calendar-event :arg="arg" />
          </template>

          <template v-slot:dayCellContent="arg">
            <calendar-day :arg="arg" />
          </template>
        </full-calendar>
      </div>
    </div>
  </div>
</template>

<style>

</style>

I have already tried visibleRange, validRange, dayCount properties but as i mentioned before it works in all other views except dayGridMonth one.