vue2 fullcalendar timeGridWeek 周视图+时间段 跨天显示

在Vue 2中，使用FullCalendar库创建时间网格周视图（timeGridWeek）并支持跨天显示时间段，你需要做以下几个步骤：

1. **安装依赖**：
首先，在项目中安装fullcalendar-vue库：

   npm install @fullcalendar/vue --save

2. **引入组件**：
在你的Vue组件文件中导入FullCalendar组件和相关的样式：

   <script src="node_modules/@fullcalendar/core/main.js"></script>
   <link rel="stylesheet" href="node_modules/@fullcalendar/daygrid/main.css" />
   <link rel="stylesheet" href="node_modules/@fullcalendar/timegrid/main.css" />
   <script src="node_modules/@fullcalendar/vue/main.js"></script>

3. **配置options**：
在`<template>`中添加 FullCalendar 的元素，并在`<script>`里设置事件模型、主题和其他选项，比如跨天显示：

   <full-calendar :events="events" :options="calendarOptions" />

   export default {
     data() {
       return {
         events: [], // 从API获取或本地存储的数据
         calendarOptions: {
           plugins: ['dayGrid', 'timeGrid'],
           views: {
             week: { // 时间网格周视图
               dayCount: 7, // 显示完整的7天
               eventOverlap: false, // 默认不允许事件重叠
               allDaySlot: false, // 关闭全日整天格子
               slotDuration: { days: 1 }, // 设置每个时段是一整天
               header: {
                 left: 'prev,next today',
                 center: 'title',
                 right: 'dayGridMonth,timeGridWeek'
               }
             }
           },
         };
       },
     },
     // ...其他生命周期函数和方法
   }

4. **处理数据**：
确保`events`数组中的每个事件都有开始时间和结束时间，格式如ISO 8601 (`YYYY-MM-DDTHH:mm:ss`），以便FullCalendar正确渲染跨天事件。