AsyncFullCalender

描述(DEPRECATED)

对 fullcalendar@5 Standard 的二次封装，使之可以简单方便的实现异步导入

开始使用

安装依赖

npm install @cailiao/async-fullcalender-vue@latest --save-dev

引用并注册成为全局异步组件

import AsyncFullcalendar from '@cailiao/async-fullcalender-vue'

Vue.use(AsyncFullcalendar)

Vue template 中使用

<AsyncFullcalendar :options="options" :day-grid-plugin="true" />

在@vue/cli中使用

vue 脚手架中默认开启prefetch，如果不针对此组件关闭prefetch功能，在组件的所有 plugin（无论是否使用）都会被预加载，将造成不必要的流量浪费。如果不需要预加载这些插件，请按以下设置脚手架的chainWebpack配置。

chainWebpack: config => {
  config.plugin('prefetch').tap(options => {
    options[0].fileBlacklist = options[0].fileBlacklist || []
    // 禁止noprefetch-开头的js块进行prefetch，项目内的所有插件的chunk名称都有noprefetch-前缀
    options[0].fileBlacklist.push(/noprefetch-.*\.js$/)
    return options
  })
}

传参

• options Object

options 传递的属性同 fullcalendar 的官方文档：

options:
{
  // options传入的 plugins 属性无效，plugins 被替换为 day-grid-plugin time-grid-plugin list-plugin interaction-plugin scroll-grid-plugin 的 v-bind 传参，启用对应plugin，只需传入true
  // plugins: [
  //   dayGridPlugin,
  //   timeGridPlugin,
  //   interactionPlugin // needed for dateClick
  // ],
  // options传入的 locales 属性无效，locales 被替换为 locales 的 v-bind 传参，启用对应locale，只需传入对应列表
  // locales: allLocales,
  locale: 'zh-cn' // the initial locale
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialView: 'dayGridMonth',
  initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  select: this.handleDateSelect,
  eventClick: this.handleEventClick,
  eventsSet: this.handleEvents
  /* you can update a remote database when these fire:
  eventAdd:
  eventChange:
  eventRemove:
  */
}

以下开关开启会自动异步加载对应插件，关闭则不会下载对应的 js 文件

• day-grid-plugin Boolean defalut: true

  是否开启 dayGridPlugin(@fullcalendar/daygrid) 插件，默认开启

• interaction-plugin Boolean defalut: false

  是否开启 interactionPlugin(@fullcalendar/interaction) 插件，默认关闭

• list-plugin Boolean defalut: false

  是否开启 listPlugin(@fullcalendar/list) 插件，默认关闭

• scroll-grid-plugin Boolean defalut: false

  是否开启 scrollGridPlugin(@fullcalendar/scrollgrid) 插件，默认关闭

• time-grid-plugin Boolean defalut: false

  是否开启 timeGridPlugin(@fullcalendar/timegrid) 插件，默认关闭

• localesArray|String defalut: ['zh-cn']

  选择开启哪些语言插件，原fullcalendar支持数十种语言，如果只需要加载其中几种，传入对应语言名称列表即可，默认只加载简体中文。

  其中可选值为：

  // 所有语言
  'locales-all'
    
  // 可选语言
  [
      'af',
      'ar-dz',
      'ar-kw',
      'ar-ly',
      'ar-ma',
      'ar-sa',
      'ar-tn',
      'ar',
      'az',
      'bg',
      'bn',
      'bs',
      'ca',
      'cs',
      'cy',
      'da',
      'de-at',
      'de',
      'el',
      'en',
      'en-au',
      'en-gb',
      'en-nz',
      'eo',
      'es',
      'es-us',
      'et',
      'eu',
      'fa',
      'fi',
      'fi-ca',
      'fr-ch',
      'fr',
      'gl',
      'he',
      'eo',
      'hi',
      'hr',
      'hu',
      'hy-am',
      'id',
      'is',
      'it',
      'ja',
      'ka',
      'kk',
      'km',
      'ko',
      'ku',
      'lb',
      'lt',
      'lv',
      'mk',
      'ms',
      'nb',
      'ne',
      'nl',
      'nn',
      'pl',
      'pt',
      'pt-br',
      'ro',
      'ru',
      'si-lk',
      'sk',
      'sl',
      'sm',
      'sq',
      'sr',
      'sr-cyrl',
      'sv',
      'ta-in',
      'th',
      'tr',
      'ug',
      'uk',
      'uz',
      'vi',
      'zh-cn', // 简体中文
      'zh-tw',
  ]