vue中如何使用vue-full-calendar（完整版）_一只琪琪子的博客-CSDN博客_vue-full-calendar

安宇雨 - 随手采集
2022-08-23 21:30:03
随手采集
0000-未整理-等待研究

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,
      })
    })
  })
},

效果图：
在这里插入图片描述