vue-full-calendar 的使用

vue-full-calendar

vue-full-calendar是基于vue和fullcalendar封装的日历插件，一般用于值班系统，考勤系统

安装

1、先npm uninstall jquery，日历插件包自带jQuery，不卸载掉的话会有问题
2、npm install vue-full-calendar 注意是vue-full-calendar，不是vue-fullcalendar
3、npm install moment

全局引入

可以将fullcalendar里面fullcalendar.css放到assets中，这样可以对日历样式进行自定义的修改

import FullCalendar from 'vue-full-calendar'
import './assets/fullcalendar.css'
Vue.use(FullCalendar)

使用

<template>
  <div>
    <full-calendar v-show="visiable" :events="events"     :config="config">
</full-calendar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visiable: true,
      config: {
        locale: 'zh-cn',
        defaultView: 'month',
        header: {
          left: 'prevYear,prev,next,nextYear today',
          center: 'title',
          right: ''
        },
        editable: false, // 禁止拖动
        /* 设置按钮文字 */
        buttonText: {
          today: '今天/本周'
        },
        aspectRatio:2.4
      },
      events: [
        { title: '全天 负责人:张三 值班人:李四', start: '2020-08-11', end: '2020-08-11' },
        { title: '全天 负责人:徐畅 值班人:王五', start: '2020-08-12', end: '2020-08-12' }]
    }
  }
}
</script>

具体的fullcalendar配置可参考:fullcalendar API

vue-lunar-full-calendar

如果需要中国的农历信息，可安装
npm install --save vue-lunar-full-calendar
引入
import LunarFullCalendar from “vue-lunar-full-calendar”;
Vue.use(LunarFullCalendar);
使用

<lunar-full-calendar  ref="calendar" :events="events" :config="config"></lunar-full-calendar>