vue3使用fullcalendar V6日历插件，基础使用！

官网链接：FullCalendar - JavaScript Event Calendar

一、安装组件

npm install @fullcalendar/core --save //必须插件
npm install @fullcalendar/vue3 --save //必须插件
npm install @fullcalendar/daygrid --save //月视图插件(按需安装)
npm install @fullcalendar/multimonth --save //多月视图(按需安装)
npm install @fullcalendar/timegrid --save //周视图和日视图插件(按需安装)
npm install @fullcalendar/list  --save //周视图和日视图插件(按需安装)
...更多查看官网

二、插件的简单使用

<FullCalendar ref="fullCalendar":options="calendarOptions">
    <template #eventContent="arg">
       {{'自定义事件插槽'}}
    </template>
</FullCalendar>

<script setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
const calendarOptions = reactive({
    height: '100%',
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
    initialView: "dayGridMonth",// 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
})
</script>

三、日历的配置项

 更多配置项查看官网：Documentation | FullCalendar

const calendarOptions = reactive({
    height: '100%',
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
    initialView: "dayGridMonth",// 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
    weekends: true, // 显示周末  
    headerToolbar: true,//是否隐藏默认工具栏
    navLinks: true,//日期是否可以被点击
    dayMaxEvents: 1,// 最大事件数
    firstDay: 0, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推  new Date().getDay()当前天
    locale: 'zh-cn',// 切换语言，当前为中文
    unselectAuto: false,//当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
    selectable: true, //是否可以选中日历格
    dayCellClassNames: 'month-day-cell',//单元格类名
    nowIndicator: true,//是否显示时间线
    slotLabelFormat: {//格式化小时的 -view 时间格式
        hour: '2-digit',
        minute: '2-digit',
        omitZeroMinute: false,
        omitZeroMinute: false,
        meridiem: false,
        hour12: false // 设置时间为24小时
    },
    eventOverlap: false, // 允许事件叠堆
    events: (info, successCallback) => {//主要数据来源事件
                successCallback([])
            })
    },
    //事件排序
    eventOrder: function (a, b) {
    },
    //主要数据源
    eventClick: (info) => {//点击单独时间触发
    },
    eventTimeFormat: {//改变的是日历中展示的日期格式
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
        omitZeroMinute: false,
        meridiem: false
    },
    allDaySlot: true, // 确定“全天”插槽是否显示在日历顶部。
    eventMinHeight: 25,//在 timeGrid 视图中，允许事件的最小高度。
    eventShortHeight: 20,//在 timeGrid 视图中，当事件具有“短”样式时的高度阈值。
    slotEventOverlap: false,//确定 TimeGrid 视图中的定时事件是否应在视觉上重叠。
    scrollTime: '00:00:00',//确定滚动窗格最初向前滚动的距离。
    allDayText: '',//全天事件文字提示
    progressiveEventRendering: true,//是否渐进式渲染
    moreLinkContent: (jsEvent) => {//更多事件显示数字修改回调
    }, // "更多"
    // 自定义事件的显示内容
    dayCellContent: function (e) {
    },
    //头部格式化
    dayHeaderContent: function (e) {
    },
    //点击更多触发
    moreLinkClick: (info) => {
    },
    //数据渲染  切换视图出发
    eventsSet: (events) => {
    },
    datesSet: (dateInfo) => {
    },
    //事件内容追加
    dayPopoverFormat: function (e) {
    },
    //点击日期数字触发
    navLinkDayClick: function (date, jsEvent) {
    },
    //点击日历块事件(和下面的select同时触发)
    dateClick: function (info) {
    },
    eventConstraint: { // 事件的约束条件  
        start: '2023-12-23 08:00', // 事件的起始时间约束条件  
        end: '2023-12-23 18:00' // 事件的结束时间约束条件  
    },
    //给更多添加类名
    moreLinkClassNames: (info) => {
    },
    //给events添加类名
    eventClassNames: (info) => {
    },
})

四、组件实例上的一些方法

const fullCalendar = ref(null)
onMounted(() => {
  let calendarApi = fullCalendar.value.getApi()
  calendarApi.render();//刷新日历
  //立即切换到不同的视图,这个功能实现的是点击月或者周视图的时候，跳转到这一天的日视图
  calendarApi.changeView('timeGridDay', '2024-04-18');
  calendarApi.gotoDate('2024-04-18')//跳转到指定日期
  calendarApi.unselect(); // 取消所有选中日期  
  calendarApi.select('2024-04-18'); // 高亮选中选中日期
  calendarApi.prev();//跳转上一月、周、日，取决于视图  
  calendarApi.today();//回到今天
  calendarApi.next();//跳转下一月、周、日，取决于视图 
  calendarApi.changeView('timeGridDay'); //切换视图
  calendarApi.refetchEvents()//事件刷新，会触发events等方法
})