说明:这是一款专门用来写日历的插件,接下来我们以官方文档来解析怎么使用,首先我们来一起看一下它的文档: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回购(请星号!)
错误报告说明
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/coreIf using?Vue 3:
如果使用Vue 3:
npm install --save @fullcalendar/vue3 @fullcalendar/coreThen 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?
入门指南；准备开始
介绍
额外的插件
数据库
Overall Display
整体显示
1.Toolbar
工具栏
2.Theme
主题
3.Sizing
Views
月视图
列表视图
Date & Time
日期和时间
日期和时间显示
数据有效性
日期导航链接
周数
Events
事件模型
事件源
事件显示
点击和悬停事件
事件拖拽和事件大小
事件窗
背景事件
International
国际的
文字类型
时区
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
页面的显示
?
?
仅供参考。