[JavaScript知识库]full-canlender

full-canlender

转载：
https://blog.csdn.net/qq_38543537/article/details/112003394

官方文档：

组件
FullCalendar 与Vue JavaScript 框架无缝集成。它提供了一个与 FullCalendar 的标准 API 的功能完全匹配的组件。

这个包是在 MIT 许可下发布的，与 FullCalendar 的标准版本使用的许可相同。有用的链接：

浏览 Github 存储库（请为它加注星标！）
错误报告说明
示例项目：
Vue 2 示例（使用Webpack和css-loader） -可运行
Vue 3 示例（使用TypeScript和Vite） -可运行
本指南不会深入探讨初始化 Vue 项目。请查阅上述示例/可运行项目。

第一步是安装Vue适配。如果使用Vue 2：

npm install --save @fullcalendar/vue @fullcalendar/core
如果使用Vue 3：

npm install --save @fullcalendar/vue3 @fullcalendar/core
然后安装任何其他 FullCalendar 插件，如 @fullcalendar/daygrid

然后，您可以开始编写利用该组件的父组件：

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

CSS
只要您的构建系统能够处理.css文件导入，所有 FullCalendar 的 CSS 都会自动加载。有关配置构建系统的更多信息，请参阅使用 ES6 构建系统初始化。

道具和发射事件
Vue 有“道具”（viav-bind或:）与“事件”（viav-on或@）的概念。对于 FullCalendar 连接器，道具和事件之间没有区别。一切都options作为键值对传递到主对象中。这是一个演示传入events数组和dateClick处理程序的示例：

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick,
        events: [
          { title: 'event 1', date: '2019-04-01' },
          { title: 'event 2', date: '2019-04-02' }
        ]
      }
    }
  },
  methods: {
    handleDateClick: function(arg) {
      alert('date click! ' + arg.dateStr)
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

修改选项
您可以在初始化后通过在选项对象中重新分配日历选项来修改日历选项。这是更改weekends选项的示例：

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        weekends: false // initial value
      }
    }
  },
  methods: {
    toggleWeekends: function() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // toggle the boolean!
    }
  }
}
</script>
<template>
  <button @click="toggleWeekends">toggle weekends</button>
  <FullCalendar :options="calendarOptions" />
</template>

FullCalendar 实用程序
通常可以通过 访问的所有 FullCalendar 实用程序功能@fullcalendar/core也可以通过 访问@fullcalendar/vue。该formatDate工具例如。这可以防止您需要向项目添加另一个依赖项。

import { formatDate } from '@fullcalendar/vue';

let str = formatDate(new Date(), {
  month: 'long',
  year: 'numeric',
  day: 'numeric'
});

console.log(str);

日历 API
希望您不需要经常这样做，但有时访问Calendar原始数据和方法的底层对象很有用。

这对于控制当前日期特别有用。该initialDate道具将设置初始日历的日期，但之后改变它，你需要依靠日期导航方法。

要执行这样的操作，您需要获得组件的 ref（“reference”的缩写）。在模板中：

let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.next()

标记中的烤肉串案例
有些人在编写标记时更喜欢在 kebab-case 中编写组件名称。这将正常工作：

<full-calendar :options="calendarOptions" />

但是，其中的属性calendarOptions必须具有相同的名称。

全日历高级版
你如何在Vue 中使用FullCalendar Premium 的插件？它们与任何其他插件没有什么不同。只需按照与dayGridPlugin上述示例相同的说明进行操作即可。另外，请确保包含您的schedulerLicenseKey：

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ resourceTimelinePlugin ],
        schedulerLicenseKey: 'XXX'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>