Vue中使用Fullcalendar思路(vue中使用nodejs)

Vue中使用Fullcalendar思路 一、npm 安装 Fullcalendar及相关插件npm i --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list说明: @fullcalendar/vue FullCalendar 的 vue 组件@fullcalendar/daygrid 月视图插件(按需安装)@fullcalendar/timegrid 周视图和日视图插件(按需安装)@fullcalendar/interaction 接口插件(按需安装)@fullcalendar/list 日程视图插件(按需安装)二、引入并使用<template> <FullCalendar ref="fullcalendar" :options='calendarOptions' > <template v-slot:eventContent='arg'> <b>{{ arg.timeText }}</b> <i>{{ arg.event.title }}</i> </template> </FullCalendar></template><script>import FullCalendar from '@fullcalendar/vue'import dayGridPlugin from '@fullcalendar/daygrid'import timeGridPlugin from '@fullcalendar/timegrid'import interactionPlugin from '@fullcalendar/interaction'import listPlugin from '@fullcalendar/list'export default { components: { FullCalendar // make the <FullCalendar> tag available }, data: function() { return { calendarOptions: { plugins: [ //配置日历插件 dayGridPlugin, timeGridPlugin, interactionPlugin,// needed for dateClick listPlugin ], //其他一些相关配置 } }}</script>三、使用 FullCalendar提供的接口1. 给 FullCalendar 配置 ref属性

推荐整理分享Vue中使用Fullcalendar思路(vue中使用nodejs)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue中使用了哪些设计模式,vue中使用原生js,vue中使用v-for指令时 为什么要加 key解释正确的是,vue中使用swiper插件实例,vue中使用原生js,vue中使用require报错,vue中使用swiper插件实例,vue中使用swiper插件实例,内容如对您有帮助，希望把文章链接给更多的朋友！

<FullCalendar ref="fullcalendar"  :options='calendarOptions'>

2. 通过 ref 和 getApi() 调用 Fullcalendar 中的方法

this.$refs.fullcalendar.getApi().gotoDate('2021')

 具体配置信息和接口信息可参考以下链接： 

官方文档：http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文档翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

FullCalendar中文文档：API_Hesper_Pan的博客-CSDN博客_fullcalendar