引入依赖
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css";
模板代码
<template>
<full-calendar
ref="calendar"
:config="config"
:events="events"
></full-calendar>
</template>
属性配置
export default {
name: "test",
components:{
FullCalendar
},
data() {
return {
events: [],
config: {
header: {
left: 'prev,next today',
center: 'title',
right: 'basicWeek'
},
views:{
week: {
titleFormat: 'yyyy/MM/DD'
}
},
buttonText: {today: "本周", month: "月", week: "周", day: "日",list: "日程" },
locale: "zh-cn",
defaultView: "basicWeek", //显示默认视图 basicWeek/agendaWeek
hiddenDays: [1], // 隐藏周一
allDaySlot: false, // 在agenda视图模式下,是否在日历上方显示all-day(全天)
eventRender:this.eventRender, // 当日程事件渲染时触发
displayEventEnd: true,//所有视图显示结束时间
eventBackgroundColor: '#faf9f9', // 设置日程事件的背景色
eventColor:'#C19AE7', // 设置日程事件的文本背景颜色
eventBorderColor: '#1890ff', // 设置日程事件的边框色
eventTextColor: '#8662af', // 设置日程事件的文本文字颜色
},
}
},
created() {
this.thisWeekClick();
},
mounted() {
this.$nextTick(() =>{
const prevBtn = document.querySelector('.fc-prev-button');
prevBtn.addEventListener('click', () => {
this.prevWeekClick();
});
const nextBtn = document.querySelector('.fc-next-button');
nextBtn.addEventListener('click', () => {
this.nextWeekClick();
})
const todayBtn = document.querySelector('.fc-today-button');
todayBtn.addEventListener('click', () => {
this.thisWeekClick();
})
});
},
methods:{
eventRender(calEvent, jsEvent, view){
let html = '';
let data = calEvent.title;
html += '<div class="fc-time">'+data.startTime+'-'+data.endTime+'</div>';
html += '<div class="fc-title">';
html += '<p>' + '班级代码:' + data.classCode +'</p>';
html += '<p>' + '班级项目:' + data.courseTitle +'</p>';
html += '<p>' + '上课老师:' + data.courseTeacher +'</p>';
html += '<p>' + '上课人数:' + data.studentNum +'</p>';
html += '<p>' + '班主任:' + data.classHeadName +'</p>';
html += '</div>';
jsEvent.find('div.fc-content').html(html);
},
//获取数据
getCalendarLessonList() {
this.rerenderEvents();
calendarLessonList(this.queryParams).then(response => {
// console.log(response.rows)
let eventList = response.rows;
eventList.map(item =>{
let json = {};
json.editable = false; //是否可编辑,可编辑是指可以移动, 改变大小等。
json.start = item.date +" "+ item.startTime;
json.end = item.date +" "+ item.endTime;
json.title = item;
// 背景颜色
if(item.teachType == 1){
// 预开班
json.backgroundColor = '#f6ff03';
}else if(item.teachType == 2){
// 测评班
json.backgroundColor = '#46a6ff';
}else if(item.teachType == 3){
// 活动课
json.backgroundColor = '#ffba00';
}else {
// 正常课
json.backgroundColor = '#f5f7fa';
}
this.events.push('renderEvent', json);
})
});
},
// 上周点击
prevWeekClick(){
const text = document.querySelector('.fc-center h2').innerText;
let splitWeek = text.split("–");
let startWeekDay = new Date(splitWeek[0]).toLocaleString();
let endWeekDay = new Date(splitWeek[1]).toLocaleString();
this.queryParams.startWeekDay = startWeekDay;
this.queryParams.endWeekDay = endWeekDay;
this.getCalendarLessonList();
},
// 下周点击
nextWeekClick(){
const text = document.querySelector('.fc-center h2').innerText;
let splitWeek = text.split("–");
let startWeekDay = new Date(splitWeek[0]).toLocaleString();
let endWeekDay = new Date(splitWeek[1]).toLocaleString();
this.queryParams.startWeekDay = startWeekDay;
this.queryParams.endWeekDay = endWeekDay;
this.getCalendarLessonList();
},
// 本周点击
thisWeekClick() {
let startWeekDay = new Date(new Date().getTime()-(3600*1000*24* (new Date().getDay()-1))).toLocaleString();
this.queryParams.startWeekDay = startWeekDay;
let endWeekDay = new Date(new Date().getTime()+(3600*1000*24* (7- new Date().getDay()))).toLocaleString();
this.queryParams.endWeekDay = endWeekDay;
this.getCalendarLessonList();
},
rerenderEvents(){
// console.log("重新渲染");
this.events = [];
},
handleQuery(){
this.getCalendarLessonList();
},
resetQuery(){
this.resetForm("queryForm");
this.handleQuery();
},
},
}
总结
以上就是 Vue 整合 full-calendar 周视图的基础内容,如果你觉得有帮助,请o( ̄▽ ̄)d点赞收藏!多多支持!!!