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>