Vue 整合 full-calendar 周视图的使用案例

引入依赖

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(￣▽￣)ｄ点赞收藏！多多支持！！！