说明:这是一款专门用来写日历的插件,接下来我们以官方文档来解析怎么使用,首先我们来一起看一下它的文档:Vue Component - Docs | FullCalendar。

这是用翻译软件翻译的,不是很准确,但是任然能从中知道些。

一.Vue Component

FullCalendar seamlessly integrates with the Vue JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API.

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

This package is released under an MIT license, the same license the standard version of FullCalendar uses. Useful links:

此包在MIT许可证下发布，与FullCalendar的标准版本使用的许可证相同。有用的链接:Browse the Github repo (please star it!) 

浏览Github回购(请星号!)

Bug report instructions

错误报告说明

Example projects:

示例项目

Vue 2 example (uses Webpack and css-loader) - runnable

Vue 2的例子(使用Webpack和css加载器)-可运行的

Vue 3 example (uses TypeScript and Vite) - runnable

Vue 3的例子(使用TypeScript和Vite) -可运行的

This guide does not go into depth about initializing a Vue project. Please consult the aforementioned example/runnable projects for that.

本指南没有深入介绍Vue项目的初始化。请参考前面提到的示例/可运行项目。

The first step is to install the Vue adapted. If using Vue 2:

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

npm install --save @fullcalendar/vue @fullcalendar/core

If using Vue 3:

如果使用Vue 3:

npm install --save @fullcalendar/vue3 @fullcalendar/core

Then install any additional FullCalendar plugins like @fullcalendar/daygrid

然后安装任何额外的全日历插件，如@fullcalendar/daygrid

You may then begin to write a parent component that leverages the <FullCalendar> component:

然后你可以开始编写一个父组件，利用<FullCalendar>组件:

<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>

建议在其他导入之前先导入@fullcalendar/core/vdom。这对Vite的HMR工作尤为重要。欲了解更多信息，请参阅票#152。

二.CSS

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

三.Props and Emitted Events 道具和触发事件

Vue has the concept of “props” (via v-bind or :) versus “events” (via v-on or @). For the FullCalendar connector, there is no distinction between props and events. Everything is passed into the master options object as key-value pairs. Here is an example that demonstrates passing in an events array and a dateClick handler:

Vue有“道具”的概念(通过v-bind或:)与“事件”的概念(通过v-on或@)。对于FullCalendar连接器，道具和事件之间没有区别。所有内容都作为键值对传递到主选项对象。下面的例子演示了传递一个事件数组和一个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>

四.Modifying Options修改选项

You can modify your calendar’s options after initialization by reassigning them within the options object. This is an example of changing the weekends options:

您可以在初始化后修改日历的选项，方法是在选项对象中重新分配它们。这是一个改变周末选择的例子:

<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 Utilities 

FullCalendar公用事业

All of FullCalendar’s utility functions that would normally be accessible via @fullcalendar/core will also be accessible via @fullcalendar/vue. The formatDate utility for example. This prevents you from needing to add another dependency to your project.

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

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

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

console.log(str);

六.Calendar API 日历APi

Hopefully you won’t need to do it often, but sometimes it’s useful to access the underlying Calendar object for raw data and methods.

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

This is especially useful for controlling the current date. The initialDate prop will set the initial date of the calendar, but to change it after that, you’ll need to rely on the date navigation methods.

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

To do something like this, you’ll need to get ahold of the component’s ref (short for “reference”). In the template:

要做这样的事情，您需要获取组件的ref(简称“reference”)。在模板:

<FullCalendar ref="fullCalendar" :options="calendarOptions" />

Once you have the ref, you can get the underlying Calendar object via the getApi method:

一旦你有了ref，你就可以通过getApi方法获取底层的Calendar对象:

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

七.Kebab-case in Markup 

Kebab-case在标记

Some people prefer to write component names in kebab-case when writing markup. This will work fine:

有些人在写标记时更喜欢把组件名写在kebab-case中。这将很好地工作:

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

However, the properties within calendarOptions must have the same names.

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

八.FullCalendar Premium

How do you use FullCalendar Premium’s plugins with Vue? They are no different than any other plugin. Just follow the same instructions as you did dayGridPlugin in the above example. Also, make sure to include your schedulerLicenseKey:

如何在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>

九.TypeScript

For @fullcalendar/vue3, nothing special is needed for TypeScript integration

对于@fullcalendar/vue3来说，TypeScript集成不需要什么特别的东西。

For @fullcalendar/vue (Vue 2), it is recommended to use class-based components. See an example TypeScript project

对于@fullcalendar/vue (vue 2)，建议使用基于类的组件。查看一个TypeScript项目示例

十.关于demos页面

这里是关于项目的展示。

十一.Docs--------说明文件 

Getting Started 

入门指南；准备开始

1.Introduction

介绍

2.Premium Plugins

额外的插件

3.Date Library

数据库

Overall Display

整体显示

1.Toolbar

工具栏

2.Theme

主题

3.Sizing

Views

1.Month View

月视图

2.List View

列表视图

Date & Time

日期和时间

1.Date & Time Display

日期和时间显示

2.Date Navigation

数据有效性

3.Date Nav Links

日期导航链接

4.Week Numbers

周数

Events

1.Event Model

事件模型

2.Event Sources

事件源

3.Event Display

事件显示

4.Event Clicking & Hovering

点击和悬停事件

5.Event Dragging & Resizing

事件拖拽和事件大小

6.Event Popover

事件窗

7.Background Events

背景事件

International

国际的

1.Locale

文字类型

2.Time Zone

时区

Third Party

第三方

十二.Support

Getting Help 得到帮助

Have a tough problem you can't figure out? Try searching the documentation first. If you can't find what you're looking for, try Googling around.

If you still can't find an answer, post your question on the StackOverflow fullcalendar tag. When entering a new question, make sure you tag it with fullcalendar.

You can improve your chances of getting an answer by 900% if you post a reduced test case »

遇到了一个你无法解决的难题?首先尝试搜索文档。如果你找不到你要找的东西，试着在谷歌上搜索。

如果您仍然不能找到答案，请将您的问题张贴在StackOverflow fullcalendar标签上。当输入一个新问题时，确保用完整的日历标记它。

如果你发布了一个减少的测试用例，那么你得到答案的机会就会增加900%

Reporting a Bug 报告一个错误

Think you've found a bug? Please carefully follow the bug report instructions »

认为你发现了一个漏洞?请仔细遵循bug报告说明»

Requesting a Feature 请求一个特性

有一个新功能的想法?请仔细遵循特性请求说明»

Browser Testing & Version Compatibility

FullCalendar的最新版本兼容Firefox、Chrome、Safari、Edge和IE 11+。

高级支持

全日历高级版提供1年的电子邮件支持。

十三.Pricing

页面的显示

 

 

仅供参考。