fullcalendar-vue3插件实现时间资源图

用的vue3+最新版本：官网链接：https://fullcalendar.io/demos

效果如图：x轴为人员，y轴为当日的时间段：

 

 1. 安装 引入

npm install --save @fullcalendar/core @fullcalendar/resource @fullcalendar/resource-timegrid

 package.json

 2. 附上代码

<script>
import { defineComponent } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";

export default defineComponent({
  components: {
    FullCalendar,
  },
  data() {
    return {
      currentEvents: [
        {
          resourceId: "a",
          title: "事件标题1",
          start: "2024-05-20T12:00:00+00:00",
          end: "2024-05-21T06:00:00+00:00",
        },
        {
          resourceId: "b",
          title: "事件标题2",
          start: "2024-05-20T12:00:00+00:00",
          end: "2024-05-21T06:00:00+00:00",
        },
      ],

      calendarOptions: {
        plugins: [resourceTimeGridPlugin],
        initialView: "resourceTimeGridDay",
        locale: "zh",
        resources: [
          { id: "a", title: "张三" },
          { id: "b", title: "李四" },
          { id: "c", title: "张三" },
          { id: "d", title: "张三" },
          { id: "e", title: "张三" },
          { id: "f", title: "李四" },
          { id: "g", title: "张三" },
          { id: "h", title: "张三" },
          { id: "a1", title: "张三" },
          { id: "b1", title: "李四" },
          { id: "c1", title: "张三" },
        ],
        events: [
          {
            resourceId: "a", // 事件的唯一标识符
            title: "标题1", // 事件的标题
            start: "2024-05-20T10:00:00", // 事件的开始时间（ISO 8601 格式）
            end: "2024-05-20T11:30:00", // 事件的结束时间（ISO 8601 格式）
          },
          {
            resourceId: "c", // 事件的唯一标识符
            title: "事件标题3", // 事件的标题
            start: "2024-05-20T12:00:00", // 事件的开始时间（ISO 8601 格式）
            end: "2024-05-20T13:00:00", // 事件的结束时间（ISO 8601 格式）
          },
          {
            resourceId: "b",
            title: "事件标题2",
            start: "2024-05-20T12:00:00", // 事件的开始时间（ISO 8601 格式）
            end: "2024-05-20T14:30:00", // 事件的结束时间（ISO 8601 格式）
          },
        ],
        // 时间轴间距
        slotMinTime: "09:00:00", // 最小时间
        slotMaxTime: "21:00:00", // 最大时间
        // 原来的
        //  slotDuration: '01:00:00',
        //  slotDuration: '00:30:00',
        slotLabelFormat: {
          hour: "numeric",
          minute: "2-digit",
          hour12: false,
        },
        eventTimeFormat: {
          hour: "numeric",
          minute: "2-digit",
          hour12: false,
        },
        datesSet: this.handleEvents,
      },
    };
  },
  methods: {
    handleEvents(events) {
      console.log(events);
    },
  },
});
</script>

<template>
  <div class="demo-app">
    <div class="demo-app-main">
      <FullCalendar class="demo-app-calendar" :options="calendarOptions">
      </FullCalendar>
    </div>
  </div>
</template>

<style lang="css">
h2 {
  margin: 0;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}

li {
  margin: 1.5em 0;
  padding: 0;
}

b {
  /* used for event dates/times */
  margin-right: 3px;
}

.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-sidebar {
  width: 300px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}

.demo-app-sidebar-section {
  padding: 2em;
}

.demo-app-main {
  flex-grow: 1;
  padding: 3em;
}

.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}
</style>