全网最全fullcalendar配置详解

        官网对配置案例比较少，下面介绍一下官方的配置，基于v6.1.16的版本。

基础配置

        基础的默认配置项，是否可编辑，是否可点击。

export const BASE_OPTION_DEFAULTS = {
  eventDisplay: 'auto', // 控制事件使用哪些预设渲染样式。可能的值 【auto,block，list-item，background，inverse-background。none】
  defaultRangeSeparator: ' - ', // 用于日期格式化的分隔符文本遍布整个 API
  titleRangeSeparator: ' \u2013 ', // 确定工具栏标题中日期范围的格式化时的分隔符文本
  defaultTimedEventDuration: '01:00:00', // 默认定时事件持续时间
  defaultAllDayEventDuration: { day: 1 }, // 未指定结束值的全天事件对象的后备持续时间
  forceEventDuration: false, // 是否持续强制事件
  nextDayThreshold: '00:00:00', // 第二天临界点
  dayHeaders: true, // 天标头显示
  initialView: '', // 初始视图
  aspectRatio: 1.35, // 长宽比
  headerToolbar: { // 定义日历顶部的按钮和标题
    start: 'title', // 正常情况下位于左侧。如果是 RTL，则位于右侧
    center: '',
    end: 'today prev,next', // 通常在右侧。如果是 RTL，则在左侧
  },
  weekends: true, // 是否显示周末
  weekNumbers: false, // 是否显示周数
  weekNumberCalculation: 'local' as WeekNumberCalculation, // 周数计算
  editable: false, // 确定日历上的事件是否可以修改
  nowIndicator: false, // 现在指标
  scrollTime: '06:00:00', // 滚动时间
  scrollTimeReset: true, // 是否滚动时间重置
  slotMinTime: '00:00:00', // 最小事件
  slotMaxTime: '24:00:00', // 最大事件
  showNonCurrentDates: true, // 显示非当前日期
  lazyFetching: true, // 懒加载
  startParam: 'start', // 开始参数
  endParam: 'end', // 结束参数
  timeZoneParam: 'timeZone', // 时区参数
  timeZone: 'local', // 时区
  locales: [], // 本地语言
  locale: '', // 本地语言
  themeSystem: 'standard', // 主题
  dragRevertDuration: 500, // 拖拽恢复持续时间
  dragScroll: true, // 是否拖拽滚动
  allDayMaintainDuration: false,// 是否全天维持时长
  unselectAuto: true, //自动取消选择
  dropAccept: '*', // 提供一种方法来过滤哪些外部元素可以放到日历上
  eventOrder: 'start,-duration,allDay,title', // 事件排序字段
  dayPopoverFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // 日程弹窗格式
  handleWindowResize: true, // 当浏览器窗口调整大小时是否自动调整日历大小
  windowResizeDelay: 100, // 窗口大小调整后日历等待调整其大小的时间（以毫秒为单位）
  longPressDelay: 1000, // 对于触摸设备，用户必须按住一段时间才能使事件变为可拖动或日期变为可选择
  eventDragMinDistance: 5, // 在事件拖动激活之前，用户的鼠标/触摸必须移动多少像素
  expandRows: false, // 如果给定视图的行没有占据整个高度，它们将扩展以适应
  navLinks: false, // 确定星期名称和星期名称是否可点击
  selectable: false, // 允许用户通过单击和拖动来突出显示多个日期或时间段
  eventMinHeight: 15, // 在 timeGrid 视图中，事件允许的最小高度
  eventMinWidth: 30,  // 在 timeGrid 视图中，事件允许的最小宽度
  eventShortHeight: 30, // 在 timeGrid 视图中，当事件具有“短”样式时的高度阈值
  monthStartFormat: { month: 'long', day: 'numeric' }, // 当 dayGrid 视图被编程为跨月时，每个月第一个单元格的文本格式
}

API使用

        CalendarApi,可以直接刷新事件，或者获取回到今天。

export interface CalendarApi {
  view: ViewApi // FullCalendar 提供与当前视图交互和切换的设置、方法和回调。
  updateSize(): void // 立即强制日历重新调整其大小

  // 配置
  // -----------------------------------------------------------------------------------------------------------------
  // 设置属性
  setOption<OptionName extends keyof CalendarOptions>(name: OptionName, val: CalendarOptions[OptionName]): void
  // 获取属性
  getOption<OptionName extends keyof CalendarOptions>(name: OptionName): CalendarOptions[OptionName]
  getAvailableLocaleCodes(): string[] // 获取可用区域代码

  // 触发事件
  // -----------------------------------------------------------------------------------------------------------------

  on<ListenerName extends keyof CalendarListeners>(handlerName: ListenerName, handler: CalendarListeners[ListenerName]): void
  off<ListenerName extends keyof CalendarListeners>(handlerName: ListenerName, handler: CalendarListeners[ListenerName]): void
  trigger<ListenerName extends keyof CalendarListeners>(handlerName: ListenerName, ...args: Parameters<CalendarListeners[ListenerName]>): void

  // 视图
  // -----------------------------------------------------------------------------------------------------------------

  // 切换视图类型
  changeView(viewType: string, dateOrRange?: DateRangeInput | DateInput): void
  // 缩放
  zoomTo(dateMarker: Date, viewType?: string): void

  // 当前日期
  // -----------------------------------------------------------------------------------------------------------------

  prev(): void // 上一个月/周
  next(): void // 下一个月/周
  prevYear(): void // 上一年
  nextYear(): void // 下一年
  today(): void // 回到今天
  gotoDate(zonedDateInput: DateInput): void // 跳转指定日期
  incrementDate(deltaInput: DurationInput): void // 将日历向前/向后移动任意时间。
  getDate(): Date // 获取日期当前日期

  // 日期格式化
  // -----------------------------------------------------------------------------------------------------------------

  formatDate(d: DateInput, formatter: FormatterInput): string // 将日期格式化为字符串的实用函数。
  formatRange(d0: DateInput, d1: DateInput, settings: any): string // 将两个日期（开始日期和结束日期）格式化为字符串
  formatIso(d: DateInput, omitTime?: boolean): string // 将日期格式化为 ISO8601 字符串。输出适合其调用日历的 UTC 偏移量

  // 日期/日程/天 事件
  // -----------------------------------------------------------------------------------------------------------------

  select(dateOrObj: DateInput | any, endDate?: DateInput): void // 日期选中
  unselect(): void // 日期取消选中

  // 公共api
  // -----------------------------------------------------------------------------------------------------------------

  addEvent(eventInput: EventInput, sourceInput?: EventSourceApi | string | boolean): EventApi | null // 添加日程
  getEventById(id: string): EventApi | null // 获取日程
  getEvents(): EventApi[] // 获取所有日程
  removeAllEvents(): void // 删除所有日程

  // 公共事件源 API
  // -----------------------------------------------------------------------------------------------------------------

  getEventSources(): EventSourceApi[] // 获取事件源
  getEventSourceById(id: string): EventSourceApi | null // 通过id获取事件源
  addEventSource(sourceInput: EventSourceInput): EventSourceApi // 添加事件源
  removeAllEventSources(): void // // 删除所有事件源
  refetchEvents(): void // 从所有来源重新获取事件并将其重新呈现在屏幕上

  // 滚动
  // -----------------------------------------------------------------------------------------------------------------

  scrollToTime(timeInput: DurationInput): void // 以编程方式将当前视图滚动到给定的时间
}