vue fullcalendar(vue-fullcalendar)

作者：电脑培训网 2024-05-04 01:54:10 881

在Vue中使用Fullcalendar的想法一、npm安装Fullcalendar及相关插件

npmi--save@fullcalendar/vue@fullcalendar/daygrid@fullcalendar/timegrid@fullcalendar/interaction@fullcalendar/list描述：@fullcalendar/vueFullCalendar的vue组件@fullcalendar/daygrid月视图插件-in(按需安装)@fullcalendar/timegrid周视图、日视图插件(按需安装)@fullcalendar/交互界面插件(按需安装)@fullcalendar/list日程视图插件(按需安装)）

vue fullcalendar(vue-fullcalendar)

二、引入并使用

模板FullCalendarref='fullcalendar':options='calendarOptions'模板v-slot:eventContent='arg'b{{arg.timeText}}/bi{{arg.event.title}}/i/template/FullCalendar/templatescriptimportFullCalendar从'@fullcalendar/vue'导入dayGridPlugin从'@fullcalendar/daygrid'导入timeGridPlugin从'@fullcalendar/timegrid'导入interactionPlugin从'@fullcalendar/interaction'导入listPlugin从'@fullcalendar/list'导出默认{组件：{FullCalendar//使FullCalendar标签可用},data:function(){return{calendarOptions:{plugins:[//配置日历插件dayGridPlugin,timeGridPlugin,InteractionPlugin,//dateClick需要的listPlugin],//其他一些相关配置}}}/脚本

三、使用FullCalendar提供的接口