什么都不说了,先把我项目要实现的效果给大家看一下
其实很简单,但是样式让我好一顿调…先说一下怎么使用fullCanlendar吧。
cnpm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction
这里我用了cnpm 因为我的项目不知道为什么,用npm总是安装错误,但是用cnpm就好使,如果有跟我一样的可以试试换cnpm用哦~
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
然后就 大功告成啦~~~
但是,页面样式还是得调整滴,再附上一段css代码吧
然后就真的大功告成啦~~
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]}`)
}
赶快去交差把朋友