1、先安装依赖包，根据自己的需求安装，建议使用cnpm安装，不然会很慢有时候会出现安装不上的情况。

npm i @fullcalendar/vue --save
npm i @fullcalendar/core --save 
// 在月视图或日视图中操作事件
npm i @fullcalendar/daygrid --save
// 在时间段视图中操作事件
npm i @fullcalendar/timegrid --save
// 以列表的形式查看事件
npm i @fullcalendar/list --save
// 提供事件操作的功能
npm i @fullcalendar/interaction --save
// bootstrap 4 的主题
npm i @fullcalendar/bootstrap --save

// 时间格式化道具
npm install moment

​

2、在哪里用就直接copy过去就行了，具体的配置到官网就可以查到

     Documentation | FullCalendar

<template>
    <div class="fullCalendar">
        <FullCalendar ref="fullCalendar" :options="calendarOptions" :weekNumbers='true' />
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import moment from 'moment';

export default {
    name: "fullCalendar",
    components: {
        FullCalendar
    },
    data() {
        return {
            calendarOptions: {
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
                initialView: 'dayGridMonth',
                locale: 'zh',
                firstDay: 1,
                buttonText: {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '日',
                    list: '周列表',
                },
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek',
                },
                height: 600,
                validRange: this.validRange,  //总日期范围
                events: [
                    {
                        id: 0000001,
                        title: '任务0000001',
                        start: '2024-07-21',
                        end: '2024-08-11',
                        color: 'rgb(255, 127, 249)',
                        editable: true, //允许拖动缩放
                        overlap: true, 
                        display: 'background', //添加相同时间的背景色时颜色会重叠
                        backgroundColor: 'rgb(127, 206, 255)',
                        textColor: '#000000', //文字颜色
                        // className: 'custom-class', //自定义class

                    },
                    {
                        id: 0000002,
                        title: '任务0000002',
                        start: '2024-08-01',
                        end: '2024-10-11',
                        color: '#99ccff',
                        editable: true,
                        overlap: true,
                    },
                    {
                        id: 0000003,
                        title: '任务0000003',
                        start: '2024-09-01',
                        end: '2024-09-11',
                        color: 'rgb(129, 242, 114)',
                        editable: true,
                        overlap: true,
                    }
                ],
            },
            validRange: {
                start: '2023-01-01',
                end: moment().add(10, 'months').format('YYYY-MM-DD'),
            }
        }
    }
}
</script>

<style scoped>
</style>