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的路径一直都找不到，还得是人工找路径… 当然有些属性还是要去官网里找着用的~，这边提供一个中文api

3.页面使用

<full-calendar
      :config="config"
      :events="events"
      :plugins="calendarPlugins"
 />

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

<style lang="scss" scoped>
//修改日历组件样式
/deep/.fc-toolbar h2{
  font-size: 14px;
  line-height: 38px;
  display: inline;
}
/deep/.fc .fc-toolbar > * > * {
    margin-left: 0;
}
/deep/.fc th, .fc td{
  font-weight: normal;
  color: #565A66;
}
/deep/.fc-day-grid-event .fc-content{
  white-space: normal;
}
/deep/.fc-day-grid-event .fc-time{
  display:block;
}
/deep/.fc-unthemed td.fc-today{
  background:#F7F9FF;
}

/deep/.fc-state-default{
  background: #fff;
  box-shadow:none;
 border-color: #D9D9D9;
 color:#000;
 font-size: 14px;
 margin-top: 5px;
}
/deep/.fc-state-active{
  background-color: #fff;
  box-shadow:none;
  color: #446BDE;
  border-color: #446BDE;
}
/deep/.fc-prev-button{
  border: 0;
}
/deep/.fc-next-button{
  border: 0;
}
/deep/.fc-event-container{
  opacity: .5;;
}
/deep/.fc-day-header{
  padding: 5px;
  color: #565A66;
}
</style>

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

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]}`)
}

赶快去交差把朋友