vue3+FullCalendar+Element-plus修改的日程安排表

实现效果

安装Fullcalendar相关插件

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/interaction --save

• 代码中使用到了时间转换和element-plus，安装dayjs和element-plus

npm install element-plus @element-plus/icons-vue dayjs

• 样式sass

npm install sass sass-loader

实现代码

注意：月份中想要横向拖拽几天日期，配置项属性中必须allDaySlot为true，默认为true。同时，周页面中这个日期是全天才可以横向拖拽几天日期

<template>
  <div class="calender-container">
    <el-card>
      <!-- 自定义头部，切换视图类型和切换日期 -->
      <div class="calender-header mb2">
        <div class="header-left">
          <span class="time-title">{
   {
    currentDate }}</span>
          <el-button
            :icon="ArrowLeftBold"
            circle
            @click="
              Tcalendar.prev();
              dayTime();
            "
          />
          <el-button
            :icon="ArrowRightBold"
            circle
            @click="
              Tcalendar.next();
              dayTime();
            "
          />
        </div>
        <div class="header-right">
          <el-button
            class="btn-m2"
            type="primary"
            @click="
              Tcalendar.today();
              dayTime();
            "
            plain
            round
            >今天</el-button
          >
          <el-select
            v-model="type"
            placeholder="视图类型"
            style="width: 80px"
            @change="changeType"
          >
            <el-option label="月" value="dayGridMonth" />
            <el-option label="周" value="timeGridWeek" />
            <el-option label="天" value="timeGridDay" />
            <el-option label="列" value="listWeek" />
          </el-select>
          <!-- 选择月份的日期框 -->
          <el-date-picker
            v-if="type === 'dayGridMonth'"
            v-model="showMonth"
            type="month"
            :clearable="false"
            placeholder="请选择日期"
            style="margin-left: 10px; vertical-align: middle"
            @change="changeDate"
          />
          <el-button class="ml2" type="primary" :icon="Plus" plain
            >新增排班</el-button
          >
        </div>
      </div>
      <div ref="fullcalendar" class="card"></div>
    </el-card>

    <!-- 查看任务详情弹窗 -->
    <calendarDetailDialog
      v-model:dialogVisible="calendarDialogVisible"
      :detailInfo="detailInfo"
    />
    <!-- 新增任务弹窗 -->
    <drawerAddPlan v-model:drawerVisile="drawerVisile" />
  </div>
</template>

<script setup lang="ts">
import {
    ref, nextTick, onMounted } from "vue";
import {
    Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import dayjs from "dayjs";
import {
    ArrowLeftBold, ArrowRightBold, Plus } from "@element-plus/icons-vue";
import calendarDetailDialog from "./components/calendarDetailDialog.vue";
import drawerAddPlan from "./components/drawerAddPlan.vue";

const state = {
   
  infoList: [
    {
   
      id: "1",
      title: "老化实验",
      name: "张三",
      start: "2024-10-08",
      end: "2024-10-08",
      class: "tag_1",
      job: "产线员工",
      description: "XXXXXXXXX实验XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    },
    {
   
      id: "2",
      title: "第一个任务12312312312312312",
      name: "李四",
      start: "2024-10-10 13:30:00",
      end