vue日程/日历管理插件FullCalendar （模仿wps日程）

vue项目中使用fullcalendar插件 （官网地址 https://fullcalendar.io/)

1.npm下载

"@fullcalendar/core": "^4.3.1",
"@fullcalendar/daygrid": "^4.3.0",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/timegrid": "^4.3.0",
"@fullcalendar/vue": "^4.3.1",

2.页面引入

-script-

//引入
import FullCalendar from '@fullcalendar/vue';//日历
import dayGridPlugin from '@fullcalendar/daygrid';//日视图
import timeGridPlugin from '@fullcalendar/timegrid';//时间视图
import interactionPlugin from '@fullcalendar/interaction';//方法
//注册组件
components: {
    FullCalendar,
}

-css引入-

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
//其他样式根据自己需求更改

-html使用-

<FullCalendar></FullCalendar>

可以根据自己需求更改配置 参考官网和他人的中文文档https://blog.csdn.net/qq_39863107/article/details/105387879
我更改配置

我的具体代码如下：

<template>
    <div id="fullCalendar">
        <div class="dotGroup">
            <span>
                <i class="meetDot"></i>
                会议
            </span>
            <span>
                <i class="dayDot"></i>
                我的日程
            </span>
            <span>
                <i class="shareDot"></i>
                共享日程
            </span>
        </div>
        <div class="btnAdd">
            <el-button type="primary" class="addSch" @click="showAddDia(1)">新建日程</el-button>
        </div>
        <FullCalendar
            class="fcWrap"
            ref="fullCalendar"
            defaultView="dayGridMonth"
            locale="zh-cn"
            :header="{
                left: 'dayGridMonth,dayGridWeek,today',
                center: 'prev,title,next,',
                right: '',
            }"
            :buttonText="buttonText"
            :plugins="calendarPlugins"
            :weekends="calendarWeekends"
            :weekMode="liquid"
            :events="getCalendarEvents"
            :eventLimit="3"
            eventLimitText="更多 >"
            :firstDay="1"
            :fixedWeekCount="false"
            :aspectRatio="1.7"
            :defaultDate="defaultDateTime"
            :slotLabelFormat="slotLabelFormat"
            @dateClick="handleDateClick"
            @eventClick="handleEventClick"
            @datesRender="handleDatesRender"
            @eventRender="eventRender"
        ></FullCalendar>
        <!-- 新建 -->
        <addSchedule ref="addSchedule"></addSchedule>
        <drawerLog ref="drawerLog"></drawerLog>
    </div>
</template>
<script>
import { fcList } from '@a/scheduleManage.js';
import addSchedule from './addSchedule';
import drawerLog from './drawerLog';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
export default {
    components: {
        addSchedule,
        drawerLog,
        FullCalendar,
    },
    created() {
        // this.getFcList();
    },
    data() {
        return {
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '天',
                list: '列表',
            },
            calendarPlugins: [
                // 插件必须引入
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin, 
            ],
            calendarWeekends: true,
            calendarEvents: [
                // initial event data
            ],
            slotLabelFormat: {
                hour12: false,
            },

            calendarApi: null,
            firstTime: '',
            lastTime: '',
            defaultDateTime: Date.parse(new Date()),
        };
    },
    methods: {
        //拿数据
        async getCalendarEvents(info, successCallback, failureCallback) {
            if (this.$route.query.time) {
                this.defaultDateTime = this.$route.query.time;
                console.log(this.defaultDateTime);
            }
            this.firstTime = Date.parse(new Date(info.start)) / 1000;
            this.lastTime = Date.parse(new Date(info.end)) / 1000;
            console.log(this.firstTime, this.lastTime);
            await this.getFcList();
            // console.log(info);
            const events = [...this.calendarEvents];
            // console.log(events);
            successCallback(events);
        },
        //周
        toggleWeekends() {
            this.calendarWeekends = !this.calendarWeekends;
        },
        //侧滑
        handleDateClick(arg) {
            this.$refs.drawerLog.drawerOpen(arg.date);
            console.log(arg);
            this.calendarApi.refetchEvents(); //重新抓取数据渲染
        },
        handleEventClick(info) {
            console.log(info);
        },
        //新建
        showAddDia(type) {
            this.$refs.addSchedule.addDiaOpen(type);
        },
        //拿渲染数据
        async getFcList() {
            const params = {
                stime: this.firstTime,
                etime: this.lastTime,
            };
            await fcList(params).then((res) => {
                if (res.code == 1) {
                    this.calendarEvents = [];
                    res.data.map((item) => {
                        let obj = {
                            id: item.id,
                            // title: item.title,
                            title: this.getTitle(item),
                            start: Date.parse(new Date(item.start)),
                            end: Date.parse(new Date(item.end)),
                            color: item.color,
                            textColor: '#000',
                            importance: item.importance,
                            startHour: item.start_hour,
                        };
                        this.calendarEvents.push(obj);
                    });
                }
            });
        },
        //改变title
        getTitle(item) {
            var tag =
                item.importance == 1
                    ? '<span style="color:red;margin-right:5px;margin-left:5px;font-weight:bold">!</span>'
                    : item.importance == 2
                    ? '<span style="color:red;margin-right:5px;margin-left:5px;font-weight:bold">!!</span>'
                    : item.importance == 3
                    ? '<span style="color:red;margin-right:5px;margin-left:5px;font-weight:bold">!!</span>'
                    : '';
            var time = '<span style="margin-right:5px;">' + item.start_hour + '</span>';
            var content = item.title;
            return tag + time + content;
        },
        eventRender(info) {
            info.el.innerHTML = info.event.title;
            // console.log(info);
        },
        //渲染数据
        refreshPage() {
            // this.$router.go(0);
            this.calendarApi.refetchEvents(); //重新抓取数据渲染
        },
        //拿显示日期
        handleDatesRender(arg) {
            console.log(arg);
            console.log(arg.view.activeEnd);
            console.log(arg.view.activeStart);
            this.firstTime = Date.parse(new Date(arg.view.activeStart)) / 1000;
            this.lastTime = Date.parse(new Date(arg.view.activeEnd)) / 1000;
            this.getFcList();
        },
    },
    created() {
        if (this.$route.query.time) {
            this.defaultDateTime = Number(this.$route.query.time);
        } else {
            this.defaultDateTime = Date.parse(new Date());
        }
    },
    mounted() {
        this.calendarApi = this.$refs.fullCalendar.getApi();
        console.log(this.calendarApi);
    },
    //消息跳转
    watch: {
        // 利用watch方法检测路由变化：
        $route: function (to, from) {
            // 拿到目标参数 to.query.id 去再次请求数据接口
            if (to.query.time) {
                this.defaultDateTime = Number(to.query.time);
                this.$router.go(0);
            } else {
                this.defaultDateTime = Date.parse(new Date());
            }
        },
    },
};
</script>
<style lang="scss" scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
#fullCalendar {
    position: relative;
    padding: 20px;
    // height: 100%;
    .btnAdd {
        position: absolute;
        right: 20px;
        top: 20px;
        .addSch {
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
        }
    }
    .dotGroup {
        position: absolute;
        left: 250px;
        top: 23px;
        display: flex;
        align-items: center;
        span {
            margin-right: 20px;
            display: flex;
            align-items: center;
            i {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 8px;
            }
            .meetDot {
                background: #acccfb;
            }
            .dayDot {
                background: #aedea1;
            }
            .shareDot {
                background: #fce2a0;
            }
        }
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-center > div {
        display: flex;
        align-items: center;
    }
}
</style>