Vue项目中使用fullCanlendar完成计划日历的一些记录

什么都不说了，先把我项目要实现的效果给大家看一下

其实很简单，但是样式让我好一顿调…先说一下怎么使用fullCanlendar吧。

1.安装需要的依赖

cnpm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction

这里我用了cnpm 因为我的项目不知道为什么，用npm总是安装错误，但是用cnpm就好使，如果有跟我一样的可以试试换cnpm用哦~

2.引用安装好的组件

import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlulgin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import momentPlugin from '@fullcalendar/moment'
import '@fullcalendar/core/locales/zh-cn' // 支持中文
import 'fullcalendar/dist/fullcalendar.css'   //这个css样式也要引用哦
import { FullCalendar } from 'vue-full-calendar'
export default {
	components: {  FullCalendar },
	data() {
    	return {
		      calendarPlugins: [dayGridPlugin, timeGridPlulgin, momentPlugin, interactionPlugin],
		      events: [
		        {
		          title: '参加区政府组织的会议',
		          start: '2019-11-19 08:30:00',
		          end: '2019-11-17 10:00:00',
		          color: '#FF8600'
		        },
		        {
		          title: '参加市政府组织的会议',
		          start: '2019-11-21 08:30:00',
		          end: '2019-11-19 10:00:00',
		          color: '#019C51'
		        },
		        {
		          title: '带队视察辖区冬季供热工作',
		          start: '2019-11-21 10:30:00',
		          end: '2019-11-19 12:00:00',
		          color: '#1C44BD'
		        },
		        {
		          title: '带队视察辖区冬季供热工作',
		          start: '2019-11-23 10:30:00',
		          end: '2019-11-19 12:00:00',
		          color: '#1C44BD'
		        }
		      ],
		      config: {
		        header: {
		          left: 'prev,title,next',
		          right: 'basicWeek,month',
		          center: ''
		        },
		        buttonText: { today: '今天', month: '月', week: '周', day: '日' },
		        locale: 'zh-cn',
		        height: 770,
		        editable: false, // 是否允许修改事件
		        selectable: false,
		        eventLimit: 4, // 事件个数
		        allDaySlot: false, // 是否显示allDay
		        defaultView: 'basicWeek', // 显示默认视图
		        titleFormat: 'YYYY年MM月DD日',
		
		        // dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
		        ignoreTimezone: true
		      }
    	}
    }
}

不知道是不是我个人npm的原因 刚安装之后，用网上给的引用css的路径一直都找不到，还得是人工找路径…
当然有些属性还是要去官网里找着用的~，这边提供一个中文apifullCanlendar中文api

3.页面使用

然后就 大功告成啦~~~
但是，页面样式还是得调整滴，再附上一段css代码吧

然后就真的大功告成啦~~

4.另外加的点击功能

config里再加上这两句话~

 eventClick: this.handleEventClick, // 点击事件
 dayClick: this.handleDateClick, // 点击日程表上面某一天

methods中添加这两个方法~

handleDateClick(arg) {
   console.log(arg)
 },
handleEventClick(info) {
   // this.$alert(info.title, `${info.start._i.split(' ')[1]}-${info.end._i.split(' ')[1]}`)
}

赶快去交差把朋友