vue FullCalendar (日历插件)

1、npm安装：

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

2、import 引入组件：

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

3、export default 引入组件：

components: {
　　FullCalendar,
},

4、template 引入：

<full-calendar class="calendar" ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>

5、data 放置数据：

calendarOptions: {
    headerToolbar: true,// 不显示头部
    height: 650,
    plugins: [dayGridPlugin, interactionPlugin],
    editable: false,
    selectable: false,
    navLinks: false,
    handleWindowResize: true,//是否随窗口大小变化
    initialView: "dayGridMonth", // 设置默认显示月，可选周、日
    eventClick: this.handleEventClick,
    select: this.handleDateSelect,
    timeZone: 'local',
    // 设置日程
    events: [
        { title: 'event 1', date: '2021-04-01' },
        { title: 'event 2', date: '2021-04-02' }
    ],
    locale: "zh", // 设置语言
    customButtons: {
        prev: {
            text: "PREV",
            click: () => {
                this.prev();
            }
        },
        next: {
            text: "PREV",
            click: () => {
                this.next();
            }
        },
        today: {
            text: "今天",
            click: () => {
                this.today();
            }
        }
    }
},
year: null,//年份
month: null,//月份

5、mounted 初始化日历：

this.calendarApi = this.$refs.fullCalendar.getApi();

6、自定义年月份查询：

<el-select class="bgg" v-model="year">
　　<el-option
　　　　v-for="item in options"
　　　　:key="item.value"
　　　　:label="item.label"
　　　　:value="item.value">
　　</el-option>
</el-select>
<el-select class="bgg" v-model="month" @change="change_mon">
　　<el-option
　　　　v-for="item in options2"
　　　　:key="item.value"
　　　　:label="item.label"
　　　　:value="item.value">
　　</el-option>
</el-select>

7、data 设置年月份查询数据：

// 当前时间
const nowDate = new Date();
const date = {
    year: nowDate.getFullYear(), //年
    month: nowDate.getMonth() + 1, //月
    date: nowDate.getDate(), //日
}
const newmonth = date.month > 10 ? date.month: '0' + date.month;//月份不足补0
this.year = date.year;
this.month = newmonth + '',
this.options.push({
    'value': this.year,
    'label': this.year
})
// 切换月份
change_mon(type) {
　　let resDate = this.year + '-' + type;//年+月
　　this.calendarApi.gotoDate(resDate); //日期份跳转
},
options2 () {
　　return [
　　　　{value: '01',label: this.$t('month.Jan')},
　　　　{value: '02',label: this.$t('month.Feb')},
　　　　{value: '03',label: this.$t('month.Mar')},
　　　　{value: '04',label: this.$t('month.Apr')},
　　　　{value: '05',label: this.$t('month.May')},
　　　　{value: '06',label: this.$t('month.Jun')},
　　　　{value: '07',label: this.$t('month.Jul')},
　　　　{value: '08',label: this.$t('month.Aug')},
　　　　{value: '09',label: this.$t('month.Sept')},
　　　　{value: '10',label: this.$t('month.Oct')},
　　　　{value: '11',label: this.$t('month.Nov')},
　　　　{value: '12',label: this.$t('month.Dec')}
　　]
},

8、头部的上、下月和今天的查询：

// 上个月
prev() {
    this.calendarApi.prev();
},
// 下个月
next() {
    this.calendarApi.next();
},
// 今天
today() {
    this.calendarApi.today();
},

 8、日程点击事件：

handleEventClick(calEvent) {
    console.log(calEvent, '日程事件');
},

成果展示：

 

 

FullCalendar中文文档api(主H5)：

https://blog.csdn.net/qq_39863107/article/details/105387879

vue的部分api：

 

https://fullcalendar.io/docs/headerToolbar