位置: IT常识 - 正文
Vue中使用Fullcalendar思路(vue中使用nodejs)
编辑：rootadminVue中使用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属性
本文链接地址:https://www.jiuchutong.com/zhishi/292283.html
转载请保留说明！
推荐整理分享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
上一篇：kaggle简单使用教程(代码查找.下载、项目建立.运行、参加比赛）(kaggle如何入门)
下一篇：爱德华王子岛的森林和树冠，加拿大 (© OliverChilds/Getty Images)(爱德华王子岛的气候)
