FullCalendar - 使用记录

FullCalendar是一款日历开发插件，可根据官网提供的API快速开发日历。以下是我开发日程安排的记录，仅供参考。

(示例图)

1、创建实例

<script setup lang="ts">
import { CalendarOptions } from '@fullcalendar/core'
import cnLocale from '@fullcalendar/core/locales/zh-cn'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import momentPlugin from '@fullcalendar/moment';

const fullOptions = {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          momentPlugin,
          interactionPlugin // needed for dateClick
        ],
        allDaySlot: false,
        events: [{ 
            title: 'The Title', 
            groupId: 'blueEvents',
            daysOfWeek: [3],
            startTime: '10:00:00',
            endTime: '11:00:00' 
        }],
        slotEventOverlap: false,
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev,next today'
        },
        height: 750,
        locale: cnLocale,
        slotMinTime: "07:00:00",
        slotMaxTime: "22:00:00",
        slotLabelFormat: "H:mm",
        initialView: 'timeGridWeek',
        views: {
        },
        initialEvents: [],
        editable: false,
        selectable: true,
        selectMirror: false,
        dayMaxEvents: true,
        weekends: true,
        windowResize:(view)=>{},
      } as CalendarOptions
</script>
<template>
    <div style="display: flex; ">
        <FullCalendar :options='fullOptions' style="width:100%;"/>
    </div>
</template>

2、属性说明

属性	描述
allDaySlot	是否显示全天
editable	是否编辑
events	设置数据源
slotEventOverlap	是否叠加
headerToolbar	顶部工具栏设置
height	设置FullCalendar高度
initialView	设置初始化视图
locale	设置插件语言
slotMinTime	设置最小时间
slotMaxTime	设置最大时间
slotLabelFormat	左侧时间轴格式化，如："H:mm"格式类型，需要引入@fullcalendar/moment插件
windowResize	视图更新