How to use fullcalendar calendar plugin in Vue3

npm install @fullcalendar/core
npm install @fullcalendar/vue3
vueReferences in the file
import FullCalendar from "@fullcalendar/vue3"
One must be installed：
npm install @fullcalendar/daygrid
npm install @fullcalendar/multimonth
npm install @fullcalendar/timegrid

<FullCalendar
            v-if="calendarOptions"
            style="margin-top: 30px"
            class="calenderCon"
            ref="fullCalendar"
            :options="calendarOptions"
          >
</FullCalendar>

import resourceTimelinePlugin from "@fullcalendar/resource-timeline";// Introduce the required views    let calendarOptions = ref();
// Use resourceTimelineMonth to installonMounted(() => {
     = {
      plugins: [dayGridPlugin, timeGridPlugin, resourceTimelinePlugin],
      initialView: "resourceTimelineMonth", // Default is that view (month: dayGridMonth, week: timeGridWeek, day: timeGridDay)      headerToolbar: {
        left: "prev",
        center: "title",
        right: "today,next",
      },
      locale: "zh-cn", // Switch language, currently in Chinese      eventColor: "#ffffff", // All calendar date background colors initialDate: proxy.$dayjs().format("YYYY-MM-DD"), // When customizing the background color, you must initialize the date and time      allDaySlot: false,
      height: "422px",
      buttonText: {
        today: "Current month",
        day: "day",
      },
      // Schedule      businessHours: {
        daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
        startTime: "10:00", // a start time (10am in this example)
        endTime: "18:00", // an end time (6pm in this example)
      },
      // Emphasize specific time periods on the calendar.  The default is Monday to Friday, from 9 a.m. to 5 p.m.      selectConstraint: {
        daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
        startTime: "10:00", // a start time (10am in this example)
        endTime: "18:00", // an end time (6pm in this example)
      },
      // Restrict users to select specific time windows.      // event      // eventClick: eventClick, // Click on calendar event      // eventDrop: eventDrop, // Drag calendar event      // eventResize: eventResize, // Modify calendar schedule size event      // select: handleDateSelect, // Select the calendar grid event      // eventDidMount: , // Installation prompt event      // loading: loading, // The view data is loading and loading is triggered (used to show/hide load indicators.)      // selectAllow: selectAllow, // Programming controls where users can choose. Returning true means selectable, false means unselectable.      // eventMouseEnter: eventMouseEnter, // Swipe the mouse over      editable: true, // Is it possible to modify (drag, zoom)      eventStartEditable: true, // Event schedule start time can be changed, default true. If it is false, it actually means that the schedule block cannot be dragged at will, and can only be stretched up and down to change its endTime      eventDurationEditable: true, // Is the start and end time distance of the Event schedule change? The default is true. If it is false, it means that the start and end time range cannot be stretched, and can only be dragged and dragged.      selectable: true, // Can you select a calendar grid      selectMinDistance: 0, // Select the minimum distance of the calendar grid      dayMaxEvents: true,
      weekends: true, // Whether to include Saturday/Sunday columns in any calendar view.      navLinks: false, // Determine whether the day and weekly names can be clicked      schedulerLicenseKey: "GPL-My-Project-Is-Open-Source", // This configuration is to eliminate copyright prompts in the lower right corner      slotEventOverlap: false, // Whether overlap is allowed visually by multiple schedules in the same time period, the default true allows      resourceAreaColumns: [
        {
          headerContent: "Car Model",
          field: "room_name",
        },
        {
          headerContent: "Life plate",
          field: "car_code",
        },
      ],
      resourceAreaWidth: "15%",
      resources: ,  // The data rendered to the background      events: ,// The data rendered to the background    };
})
Data format（According to actual situation,All are backends）：
  
    {
      id: ,
      room_name: item.car_type,
      car_code: item.car_code,
    }

{
      id: ,
      resourceId: ,
      title:
        "Car user:" +
        item.use_person_name +
        "Car use time:" +
        item.start_time +
        "~" +
        item.end_time +
        "use:" +
        ,
      start: item.start_time,
      end: item.end_time,
      color: "yellow",
      textColor: "black",
    }