fullcalendar日历控件基础使用

fullcalendar日历控件基础使用

1.选择年份，根据年份生成月份数据列
2.点击月份，生成对应月份视图
3.选择日期，打开弹窗

<template>
  <div class="app-container" style=" height: 100% " ref="appContainer">
    <div style="display: flex; align-items: center;">
      <div>
        <el-date-picker type="year" v-model="year" placeholder="选择年" style="width: 140rem" format="yyyy" :clearable="false" value-format="yyyy"
          size="mini" @change="getYearInfo"></el-date-picker>
      </div>
      <div class="yearInfoBox">
        <div class="monthItemBox" v-for="(item,index) in dialogYearList" :key="index" @click="handelMonth(item)">{{item.date}
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryParams" :inline="true">
      <el-form-item>
        <el-button type="success" class="settingBtn" size="mini" @click="setUpFun">设置</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="parentform" label-position="right">
      <div class="fullCalendarBox">
        <full-calendar :events="eventObj" class="zh-cn" first-day='1' locale="zh" @changeMonth="changeMonth" @eventClick="eventClick"
          @dateClick="dayClick" @moreClick="moreClick" @eventMouseEnter="showInfo" :selectable="true" :defaultDate="defaultDate" :header="headerObj"
          lang="zh" :button-text="{ today: '今天' }" :editable="false" :unselectAuto="true" unselectCancel=".settingBtn,.settingWin"
          :plugins="calendarPlugins" @select="select" @unselect="unselect" ref="fullCalendarRef" :contentHeight='500' :fixedWeekCount='false'>
        </full-calendar>
      </div>
    </el-form>
    <!-- 设置 -->
    <el-dialog class="settingWin" title="设置" :close-on-click-modal="false" :visible.sync="dialogSettingOpen" width="80%" custom-class="abow_dialog"
      append-to-body>
      使用文档地址 ： https://www.cnblogs.com/huideng/p/4763949.html <br> <br> <br>
      *weekMode：在月视图里显示周的模式（不知道为什么不生效），改为fixedWeekCount：true-规定显示6周，false-不固定周数 <br>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="settingSureFun">确定</el-button>
        <el-button @click="unselect">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

js部分：

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlulgin from "@fullcalendar/timegrid";
import "@fullcalendar/core/locales/zh-cn"; // 支持中文
import interactionPlugin from "@fullcalendar/interaction";

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

import tippy from "tippy.js"; //引入 tippy.js
import "tippy.js/dist/tippy.css"; //引入 tippy.js
import "tippy.js/themes/light.css"; //引入主题
import "tippy.js/animations/scale.css";

export default {
  mixins: [],
  components: {
    FullCalendar,
  },
  name: "fullcalendarDialog",
  data() {
    let _this = this;
    return {
      year: "",
      dialogYearList: [],
      // 月视图配置
      queryParams: {},
      defaultDate: new Date().format("yyyy-MM-dd"),
      calendarPlugins: [dayGridPlugin, timeGridPlulgin, interactionPlugin],
      headerObj: {
        left: "prevYear,prev",
        center: "title",
        right: "today,next,nextYear",
      },
      eventObj: [],
      // 设置配置
      dialogSettingOpen: false,
      settingForm: {
        windowStartDate: "",
        windowEndDate: "",
        leaveNum: "",
      },
    };
  },
  filters: {},
  created() {},
  mounted() {
    this.year = this.$moment().format("YYYY");
    this.getYearInfo(this.year);
  },
  watch: {},
  methods: {
    // 获取年数据
    getYearInfo(year) {
      let _this = this;
      _this.dialogYearList = [];
      for (var i = 1; i < 13; i++) {
        let M = i < 10 ? "0" + i : i;
        _this.dialogYearList.push({
          year: year,
          month: i,
          date: `${year}-${i}`,
          windowDate: `${year}-${M}-01`,
        });
      }
    },
    // 选择月份
    handelMonth(info) {
      this.defaultDate = info.windowDate;
      this.$nextTick(() => {
        let calendarApi = this.$refs.fullCalendarRef.getApi();
        calendarApi.gotoDate(info.windowDate);
      });
    },

    /**
     * 月视图
     */
    closeMonthDialog() {
      this.getYearInfo(this.year);
    },
    // 选择月视图中某一日
    select(info) {
      var end = this.$moment(info.end).subtract(1, "days").format("YYYY-MM-DD");
      this.settingForm.windowStartDate = info.startStr;
      this.settingForm.windowEndDate = end;
    },
    // 清空选择
    unselect() {
      this.settingForm = {};
      this.dialogSettingOpen = false;
    },
    // 选择月份
    changeMonth(start, end, current) {},
    // 点击事件
    eventClick(event, jsEvent, pos) {},
    // 点击当天
    dayClick(day, jsEvent) {},
    // 查看更多
    moreClick(day, events, jsEvent) {},
    // 显示悬浮框
    showInfo(event, jsEvent, pos) {
      tippy(event.jsEvent.target, {
        content: event.event.title, //悬浮框展示的内容
        theme: "tomato", //自定义主题，颜色在style中设置
        allowHTML: true, //为true的时候，可以识别content中的html
      });
    },
    // 点击设置按钮
    setUpFun() {
      if (!this.settingForm.windowStartDate) {
        this.msgError("请先选择时间区间！");
        return;
      }
      this.dialogSettingOpen = true;
    },
    //设置确认
    settingSureFun() {
      this.unselect();
    },
  },
};
</script>

样式部分：

<style scoped>
div /deep/ .full-calendar-body .dates .dates-events .events-week .events-day {
  min-height: 100px !important;
}
div /deep/ .fc-title {
  pointer-events: none;
}
.yearInfoBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.monthItemBox {
  border: 1px solid #ddd;
  text-align: center;
  padding: 10rem 20rem;
  margin: 10rem 0;
}
.fullCalendarBox /deep/ .fc-button-primary {
  background: rgba(55, 136, 216, 1);
  border-color: rgba(55, 136, 216, 1);
}
</style>

效果展示：