前端Vue制作日历插件FullCalendar

前端Vue制作日历插件FullCalendar

官方文档：https://fullcalendar.io/

效果图

安装

Vue2：npm install --save @fullcalendar/vue @fullcalendar/core

FullCalendar不同的视图是不同的插件，用的时候需要npm安装一下
npm i - s @fullcalendar/daygrid 月视图
npm i - s @fullcalendar/list 列表视图listDay、listWeek、listMonth和listYear
npm i - s @fullcalendar/timegrid 时间线视图
npm i - s @fullcalendar/moment 时间格式化，但是要先npm i moment
由于@fullcalendar/moment插件自己就用到了moment插件，但是安装的时候并没有带进来，所以需要我们手动安装，不然用的时候就会报错（大无语事件）

import zhcn from "@fullcalendar/core/locales/zh-cn";//引入这个文件用来汉化

其他语言包可以在这里找一下，直接配置locale: "zh-cn"有问题，所以我选择用包然后配置locale:zhcn

完整代码

<template>
  <div class="main">
    <FullCalendar ref="funllCalendarRef" :options="calendarOptions" />
  </div>
</template>

<script>
import "@fullcalendar/core/vdom";
import FullCalendar from "@fullcalendar/vue";
import zhcn from "@fullcalendar/core/locales/zh-cn"; //中文
import dayGridPlugin from "@fullcalendar/daygrid"; //dayGridMonth、dayGridWeek、dayGridDay
import listPlugin from "@fullcalendar/list"; //列表视图listDay、listWeek、listMonth和listYear
import timeGridPlugin from "@fullcalendar/timegrid"; //时间线视图timeGridWeek、timeGridDay
import momentPlugin from "@fullcalendar/moment"; //时间格式化，但是要先npm i moment
export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      myCalendar: null,
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin], //视图插件
        initialView: "dayGridMonth",
        locale: zhcn, //中文包
        // locale: "zh-cn", // 切换语言为中文，有问题
        customButtons: { addButton: { text: "新建", click: this.handleAdd } }, //自定义按钮
        headerToolbar: {
          //按钮位置
          start: "addButton",
          center: "prev title next",
          right: "dayGridMonth,timeGridWeek,listMonth",
        },
        buttonText: {
          // 按钮文字修改
          dayGridMonth: "按月",
          timeGridWeek: "按周",
          listMonth: "列表",
        },
        slotLabelFormat: "HH:mm", //标签时间格式化
        eventTimeFormat: "HH:mm", //日程时间格式化
        allDaySlot: false, //不显示all-day（全天）
        firstDay: 0, //设置一周中显示的第一天是哪天，周日是o，周一是1，类推
        dayMaxEventRows: 3, //单元格最多显示日程数
        fixedWeekCount: false, //月视图显示周数,关闭显示正确周数
        // aspectRatio: 1.65, //日历单元格宽度与高度比，数值越大高度越小
        // displayEventTime: false, //是否显示日程时间，默认true
        // displayEventEnd: false, //是否显示日程结束时间，默认false
        // showNonCurrentDates: true, //在月视图中，是否应该呈现上个月或下个月的日期，默认true
        // weekends: true, //是否显示周末，默认true
        // hiddenDays: [], //隐藏某天 [2,4]:隐藏周二，周四
        events: [], //日程
        eventDidMount: function (info) {
          if (info.event.extendedProps.status === "done") {
            info.el.style.color = "#BEBFC3";
            info.el.style.textDecoration = "line-through";
          }
        }, //事件挂载
        eventClick: this.handleDelete, //事件点击
      },
    };
  },
  mounted() {
    this.myCalendar = this.$refs.funllCalendarRef.getApi(); //获取日历Api
    this.getEventList();
  },
  methods: {
    getEventList() {
      this.calendarOptions.events = [
        {
          id: 1,
          title: "日程1",
          start: new Date("2022-06-05T00:00:00"),
          end: new Date("2022-06-06T00:00:00"),
          extendedProps: {
            status: "done",
          },
        },
        {
          id: 2,
          title: "日程2",
          start: new Date("2022-06-08T14:14:00"),
          end: new Date("2022-06-08T15:15:00"),
        },
      ];
    },
    // 新增日程
    handleAdd() {
      console.log("新建事件");
      var dateStr = prompt("输入日期YYYY-MM-DD格式");
      var date = new Date(dateStr + "T00:00:00");
      if (!isNaN(date.valueOf())) {
        this.myCalendar.addEvent({
          title: "新增日程",
          start: date,
          allDay: true,
        });
      } else {
        alert("Invalid date.");
      }
    },
    // 点击日程删除
    handleDelete(info) {
      let event = this.myCalendar.getEventById(info.event.id);
      event.remove();
    },
  },
};
</script>

<style scoped>
.main {
  width: 700px;
  height: 700px;
  margin: 50px auto;
}
.main >>> .fc-toolbar-chunk {
  display: flex;
}
.main >>> .fc-next-button,
.main >>> .fc-prev-button {
  background: white !important;
  border: none;
  box-shadow: none !important;
}

.main >>> .fc-icon-chevron-right,
.main >>> .fc-icon-chevron-left {
  color: #2c3e50;
}
</style>