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>