vue-fullcalendar在实际VUE项目中的应用场景

Fullcalendar是一种用来管理日程安排，工作计划的日历工具，其功能非常强大而且非常实用

安装Fullcalendar

首先第一步当然是安装FullCalendar相关的依赖。我们需要安装Vue适配、核心包以及任何你想添加的功能插件。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

FullCalendar v4以核心代码和插件形式提供给用户安装，因此我们需要哪些功能，就直接安装对应的插件即可。使用时可以参照：功能插件列表。

如何使用

首先创建一个VUE文件（Tuicalendar.vue：自己的功能文件）在模板中编写：

  <div>
    <FullCalendar
      defaultView="dayGridMonth"
      locale="zh-cn"
      timeZone="UTC"
      firstDay="1"
      weekNumberCalculation="ISO"
      editable="true"
      droppable="true"
      ref="FullCalendar"
      displayEventEnd="true"
      :eventTimeFormat="config.evnetTime"
      :header="config.header"
      :plugins="calendarPlugins"
      :config="config"
      :events="calendarEvents"
      @dateClick="handleDateClick"
      @eventClick="handleEventClick"
      @eventDrop="dropEvent"
      @datesRender="getEventsList"
    />
    <!--  -->
    <el-dialog
      center
      :title="optTitle"
      width="660px"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" class="form_dialog">
        <el-form-item label="事件名称:" label-width="80px">
          <el-input
            v-model="form.title"
            auto-complete="off"
            placeholder="请输入事件名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" label-width="80px">
          <el-date-picker
            v-model="form.start"
            type="datetime"
            placeholder="选择日期时间"
            :default-time="['00:00:00']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" label-width="80px">
          <el-date-picker
            v-model="form.end"
            type="datetime"
            placeholder="选择日期时间"
            :default-time="['24:00:00']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="颜色选择:" label-width="80px">
          <el-select v-model="form.color" placeholder="请选择">
            <el-option
              v-for="item in ColorAll"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="版本选择:"
          label-width="80px"
          v-if="optTitle !== '修改计划'"
        >
          <el-select v-model="form.versionId" placeholder="请选择">
            <el-option
              v-for="item in Version"
              :key="item.id"
              :label="item.version"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          @click="delEvent"
          v-if="form.id"
          style="float: left;"
          >删 除</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEvent">确 定</el-button>
      </div>
    </el-dialog>
  </div>

然后在JS部分倒入插件

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

接着，将数据定义好，包括接口、事件内容等等，以及方法调用。注意:需要使用Fullcalendar功能插件，必须在calendarPlugins定义好。

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      config: {
        header: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        },
        // slotLabelFormat: "hh:mm:ss", // axisFormat 'H(:mm)'
        // slotLabelInterval: 1,
        // slotMinTime: "00:00:00", //周视图、日视图最小显示时间
        // slotMaxTime: "24:00:00", //周视图、日视图最大显示时间
        // minTime: "00:00:00",
        // maxTime: "24:00:00",
        formLabelWidth: "120px",
        evnetTime: {
          hour: "numeric",
          minute: "2-digit",
          omitZeroMinute: true,
          meridiem: "short",
          hour12: false,
          firstHour: 0
        }
      },
      /* 设置按钮文字 */
      buttonText: {
        today: "今天"
      },
      ColorAll: [
        {
          value: "#67C23A",
          label: "green"
        },
        {
          value: "#409EFF",
          label: "blue"
        },
        {
          value: "#E6A23C",
          label: "yellow"
        },
        {
          value: "#F56C6C",
          label: "red"
        },
        {
          value: "#909399",
          label: "ash"
        }
      ],
      calendarEvents: [],

      dialogFormVisible: false,
      form: {
        title: null,
        start: null,
        end: null,
        allDay: false,
        color: null,
        version: null
      },
      optTitle: "新增计划",
      ThisArg: null
    };
  },
  created() {
    this.getEventsList()
  },
  computed: {
    ...mapState({
      AppData: state => state.app.appdata,
      Version: state => state.editions.version
    })
  },
  methods: {
    handleDatesRender: () => {},
    //获取事件列表
    getEventsList() {
      const params = {
        appId: this.AppData.appId
      };
      return new Promise(() => {
        API.GetPlanData(params)
          .then(res => {
            if (res.code === 200) {
              this.calendarEvents = [];
              res.data.map(item => {
                this.calendarEvents.push({
                  id: item.id,
                  title: item.title,
                  start: DateTime.TZDateTime(item.start),
                  end: DateTime.TZDateTime(item.end),
                  businessHours: {
                    startTime: "00:00",
                    endTime: "24:00"
                  },
                  color: item.color,
                  allDay: parseInt(item.allDay) === 1 ? true : false,
                  startEditable:
                    parseInt(item.startEditAble) === 1 ? true : false,
                  durationEditable: true,
                  extendedProps: item
                });
              });
            }
          })
          .catch(() => {});
      });
    },
    handleDateClick(arg) {
      this.dialogFormVisible = true;
      this.optTitle = "新增计划";
      this.form = {
        id: "",
        title: "",
        start: DateTime.FDateTime(arg.date),
        end: DateTime.FDateTime(arg.date),
        color: this.form.color,
        allDay: false,
        appId: this.AppData.appId,
        versionId: this.form.versionId,
        startEditable: arg.startEditable,
        extendedProps: arg.extendedProps
      };
    },
    handleEventClick(info) {
      this.dialogFormVisible = true;
      this.optTitle = "修改计划";
      this.form = {
        id: info.event.extendedProps.id,
        title: info.event.title,
        start: info.event.extendedProps.start,
        end: info.event.extendedProps.end,
        color: info.event.extendedProps.color,
        appId: this.AppData.appId,
        allDay: parseInt(info.event.extendedProps.allDay) === 1 ? true : false,
        versionId: this.form.versionId,
        startEditable: info.event.extendedProps.startEditable,
        extendedProps: info.event.extendedProps
      };
    },
    //保存事件
    saveEvent() {
      if (this.form.id === undefined || this.form.id == "") {
        const params = this.form;
        params.start = DateTime.FDateTime(this.form.start, 0);
        params.end = DateTime.FDateTime(this.form.end, 0);
        params.allDay = this.form.allDay ? 1 : 0;
        return new Promise(() => {
          API.AddPlanData(params)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  message: "新增成功！",
                  type: "success"
                });
                this.dialogFormVisible = false;
                this.getEventsList();
              }
            })
            .catch(() => {});
        });
      } else {
        console.log(this.form);
        const params = this.form;
        params.start = DateTime.FDateTime(this.form.start, 1);
        params.end = DateTime.FDateTime(this.form.end, 1);
        params.allDay = this.form.allDay ? 1 : 0;
        return new Promise(() => {
          API.UpPlanData(params)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  message: "修改成功！",
                  type: "success"
                });
                this.dialogFormVisible = false;
                this.getEventsList();
              }
            })
            .catch(() => {});
        });
      }
    },
    //删除事件
    delEvent() {
      const params = {
        id: this.form.extendedProps.id
      };
      return new Promise(() => {
        API.DeletePlanData(params)
          .then(res => {
            if (res.code === 200) {
              this.$message({
                message: "删除成功！",
                type: "success"
              });
              this.getEventsList();
              this.dialogFormVisible = false;
            }
          })
          .catch(() => {});
      });
    },
    //拖动事件
    dropEvent(info) {
      this.form = {
        id: info.event.id,
        title: info.event.title,
        start: info.event.start,
        end: info.event.end,
        color: info.event.color,
        startEditable: info.event.startEditable,
        extendedProps: info.event.extendedProps
      };
      this.saveEvent();
    }
  }
};
</script>

样式部分

@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";

写到这里其实大部分的功能已经可以了，但是需要注意的是：

1.插件的时间格式和数据格式如果不一样的化需要单独处理下；

2. 中国时间的上班时间为早上八点， 这里创建任务的时候需要单独处理下时间

   
   成品