[vue]-插件vue-fullcalendar的使用
一、安装
npm install vue-full-calendar
二、使用步骤
1、main.js全局引入
import FullCalendar from 'vue-full-calendar'
Vue.use(FullCalendar)
或者在需要用到的组件中局部引入,需要注册和引入样式:
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css'
components : { FullCalendar},
2、使用
<template>
<div>
<full-calendar
:config="config"
ref="calendar"
:events='events'
@event-selected = 'eventClick'// 点击事件的事件,可自己定义事件
@day-click="dayClick"> // 点击当天的事件,可自己定义事件
</full-calendar>
</template>
3、配置数据
config是日历的基本配置
3、事件返回的值,可依照以下格式(可以添加值,显示出来的值,可从插件中自行修改)
events: [
{
title : 'eeeeeeeee', // 事件内容
start : '2018-12-11', // 事件开始时间
end : '2018-12-30', // 事件结束时间
},
4、修改点击事件(添加删除等功能,可以通过插件所给事件自行修改)
// 点击事件
eventClick(event){
this.checkedDate = event.start._i
this.id=event.id;
this.shownewdialog=true;
},
5、效果图