vue-full-calendar的简单使用

工作需要一个日历插件来记录相应的任务内容，寻找了很多插件之后找到了一个相对来说能完成大部分操作要求的插件：vue-full-calendar。下面就记录下大概一个使用心得，当然因为时间太短了，所以使用的还是比较粗暴，如果谁有比较好的使用方式还请指教。

• 引入vue-full-calendar插件

npm install vue-full-calendar

• 引入该日历插件使用到的时间工具类 === moment

npm install moment

• vue_fullcalendar.vue

<template>
  <div class="fullcalendar">
    <el-date-picker
      size="mini"
      style="width: 144px"
      v-model="selectDate"
      type="date"
      placeholder="选择时间"
      @change="changeDate"
    >
    </el-date-picker>
    <FullCalendar ref="fullCalendar" :events="events" :config="config" />
  </div>
</template>

<script>
import { FullCalendar } from "vue-full-calendar";
import "fullcalendar/dist/fullcalendar.css"; //注入样式
// import moment from "moment";
//也可以在main.js脚本中，进行全局引入，不过本示例是局部引入的
// Vue.use(FullCalendar)
export default {
  name: "fullcalendar",
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      selectDate: "",
      events: [
        {
          title: "event1",
          start: "2021-11-01 08:30:00",
          end: "2021-11-01 11:30:00",
          color: "black",
        },
        {
          title: "oK",
          start: "2021-11-01 12:30:00",
          end: "2021-11-01 14:30:00",
          color: "green",
        },
        {
          title: "event2",
          start: "2021-11-05",
          end: "2021-11-20",
          color: "tomato",
        },
        {
          title: "event3",
          start: "2021-11-09T12:30:00",
          end: "2021-11-09T17:30:00",
          allDay: false,
          color: "gray",
        },
      ], //事件集合
      config: {
        firstDay: "0", //每周的第一天
        buttonText: { today: "今天", month: "月", week: "周", day: "日" },
        weekends: true, //是否显示周末
        locale: "zh-cn", //语言
        height: "auto",
        slotLabelFormat: "H:mm", // axisFormat 'H(:mm)'
        views: {
          month: {
            titleFormat: "YYYY年MMM",
          },
          day: {
            titleFormat: "YYYY年MMMDD日 dddd",
          },
        },
        monthNames: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        monthNamesShort: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        dayNames: [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ],
        dayNamesShort: [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ],
        slotDuration: "00:30:00",
        minTime: "00:00",
        maxTime: "24:00",
        fixedWeekCount: false, //是否固定显示六周
        // weekMode: "liquid", //周数不定，每周的高度可变，整个日历高度不变
        allDaySlot: false, //是否显示allDay
        // allDay: true,
        header: {
          left: "prev , next, today",
          center: "title",
          // right: "custom",
        },
        editable: true, //是否允许修改事件
        selectable: false, //是否允许用户单击或者拖拽日历中的天和时间隙
        eventLimit: false, // 限制一天中显示的事件数，默认false
        displayEventEnd: true, //是否显示结束时间
        allDayText: "全天",
        navLinks: true, //允许天/周名称是否可点击
        defaultView: "month", //显示默认视图 agendaDay以天为单位 agendaWeek以周为单位 month以月份为单位
        eventClick: this.eventClick, //点击事件
        dayClick: this.dayClick, //点击日程表上面某一天
      }, //配置属性值
    };
  },
  created() {},
  methods: {
    changeDate() {
      // 选择想查看的日期，以及该日期下的任务。
      this.$refs.fullCalendar.fireMethod(
        "gotoDate",
        this.selectDate || new Date()
      );
    },
    // 点击事件
    eventClick(event) {
      alert(
        "eventClick：" +
          JSON.stringify({
            title: event.title,
            start: event.start && event.start.format("YYYY-MM-DD HH:mm:ss"), //因为使用了moment类来规范插件中的时间，所以都可以使用moment类的format方法来时间转换成相应的字符串
            end: event.end && event.end.format("YYYY-MM-DD HH:mm:ss"),
          })
      ); //弹窗内容来改变当前任务的内容
    },
    // 点击当天
    dayClick(day) {
      alert(
        "dayClick" +
          JSON.stringify({
            day: day.format("YYYY-MM-DD HH:mm:ss"),
          })
      ); //弹窗内容来改变当前日期的任务数据
    },
  },
};
</script>
<style lang="scss" scoped>
.fullcalendar {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}
</style>

• 效果图如下：