1、npm下载
npm install vue-full-calendar --save
2、哪个vue页面要使用直接引入
import { FullCalendar } from 'vue-full-calendar'
import 'vue-full-calendar/node_modules/fullcalendar/dist/fullcalendar.css'
import {
firstDay, lastDay
} from '../../api/moment.js'
页面使用了组件,所以必须在components中注册一下
components: {
FullCalendar
},
moment.js文件
import moment from 'moment'
//获取当月第一天
export let firstDay = function(value){
// console.log(value)
return moment(value).startOf('month').format('YYYY-MM-DD');
}
//获取当月最后一天
export let lastDay = function(value){
return moment(value).endOf('month').format('YYYY-MM-DD');
}
3、页面上如何使用
<div id="calendar">
<full-calendar ref="calendar" :config="config" :events="events" @changeMonth="changeMonth" />
</div>
<div class="date">
<span>开始时间</span>
<el-date-picker v-model="startTime" type="datetime" default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间" size="small" />
</div>
<div class="date">
<span>结束时间</span>
<el-date-picker v-model="endTime" type="datetime" default-time="23:59:59" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间" size="small" />
</div>
data:
events: [],
header: { left: 'today', center: 'prev, title, next', right: '' },
config: {
firstDay: '0', // 以周日为每周的第一天
locale: 'zh-cn', // 语言
defaultView: 'month', // 默认按月显示
height: 'auto', // 高度
// buttonText: { today: "今天", month: "月", week: "周", day: "日" },
buttonText: { today: '今天' },
header: { left: 'today', center: 'prev, title, next', right: '' },
// header: {left:'prev,next,today', center: 'title',right:'custom'},
fixedWeekCount: false, // 显示的周数(如果为true,显示为6周高,否则将有4、5、6周,取决于月份)
theme: false, // 是否允许使用jquery的ui主题
// slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
// slotLabelInterval:1,
allDayDefault: false,
views: {
month: {
titleFormat: 'YYYY年MMM'
}
// day: {
// titleFormat: 'YYYY年MMMDD日 dddd'
// }
},
// monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
// monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
// dayNames: ["日", "一", "二", "三", "四", "五", "六"],
dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
// slotDuration:'00:30:00',
slotLabelFormat: 'H:mm:ss',
minTime: '00:00:00',
maxTime: '23:59:59',
// editable: false, //是否允许修改事件
// selectable: false,//是否允许用户单击或者拖拽日历中的天和时间隙
// eventLimit: false, // 限制一天中显示的事件数,默认false
// allDaySlot:false, //是否显示allDay
// displayEventEnd: false,//是否显示结束时间
// allDayText: '全天',
// navLinks: true, //允许天/周名称是否可点击
eventClick: this.eventClick, // 点击事件
dayClick: this.dayClick, // 点击日程表上面某一天
eventRender: this.eventRender
},
mounted中:
mounted() {
this.$nextTick(() => {
//点击上个月
const prevBtn = document.querySelector('.fc-prev-button')
prevBtn.addEventListener('click', () => {
this.changeMonth()
})
const nextBtn = document.querySelector('.fc-next-button')
nextBtn.addEventListener('click', () => {
this.changeMonth()
})
const todayBtn = document.querySelector('.fc-today-button')
todayBtn.addEventListener('click', () => {
})
})
},
methods中:
//自定义日历
//点击事件
eventClick(event, jsEvent, pos) { },
//点击当天:开始时间是当天日期+00:00:00;结束时间是当天日期+23:59:59
dayClick(date, day, jsEvent) {
const changeTime = date._d
const year = changeTime.getFullYear()
const month = changeTime.getMonth() + 1 > 10 ? changeTime.getMonth() + 1 : '0' + (changeTime.getMonth() + 1)
// let days = changeTime.getDate()
const days = changeTime.getDate() > 9 ? changeTime.getDate() : '0' + changeTime.getDate()
const time = `${year}-${month}-${days}`
this.startTime = `${time} 00:00:00`
this.endTime = `${time} 23:59:59`
},
//监听日历,月份切换
changeMonth() {
this.events = []
const text = document.querySelector('.fc-center h2').innerText
const year = text.substring(0, 4)
let month = text.substring(5, 7)
month = isNaN(month) ? text.substring(5, 6) : month
const date = new Date(`${year}-${month}`)
const startDate = firstDay(date)+' 00:00:00'
const endDate = lastDay(date)+' 23:59:59'
//切换月份,渲染当月的里程
var params = {
dev:this.vehicleNumber,
beginTime: startDate,
endTime: endDate,
pageIndex:1,
pageSize:100,
}
getEveryDayStatistics(params).then(res=>{
res.data.forEach((item)=>{
this.events.push({
title:item.total_mileage=='0'?'0'+'\r\n'+'(km)':item.total_mileage+ '\r\n'+'(km)',
start:item._id,
end:item._id,
})
})
})
},
效果图: