效果展示

效果预览

官网地址：Vue Component - Docs | FullCalendar

安装使用

  • 安装如下依赖

    1
    2
    3
    4
    5
    6
    "@fullcalendar/core"
    "@fullcalendar/daygrid"
    "@fullcalendar/interactib"
    "@fullcalendar/list"
    "@fullcalendar/timegrid"
    "@fullcalendar/vue"

  • 在需要使用的页面引入

    1
    <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>

  • 在页面中引入需要的插件

    1
    2
    3
    4
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import timeGridPlugin from '@fullcalendar/timegrid'
    import interactionPlugin from '@fullcalendar/interaction'

  • 在data中设置日历的一些配置和及属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    data(){
      return{
         calendarOptions:{
            plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            locale: 'zh',
            firstDay: 1,
            buttonText: {
              today: "今天",
              month: "月",
              week: "周",
              day: "日",
              // list: "列表",
            },
            headerToolbar: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay',
            },
            weekNumberCalculation: 'ISO',
            nowIndicator: true,
            height:500,
            validRange: this.validRange,  //设置可显示的总日期范围
            eventTimeFormat: { // 在每个事件上显示的时间的格式
              hour: 'numeric', // numeric:2022,2-digit:22
              minute: '2-digit',
              meridiem: false,
              hour12: false // 设置时间为24小时
            },
            customButtons: {
              next: {
                click: this.nextClick
              },
              prev: {
                click: this.prevClick
              }
            },
            editable: false, //允许拖动缩放，不写默认就是false
            overlap: false, //允许时间重叠，即可以与其他事件并存，不写默认就是false
            events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
            datesSet: this.datesSet, //日期渲染；修改日期范围后触发
            eventClick: this.handleEventClick, //点击日程触发
            dateClick: this.handleDateClick, //点击日期触发
            eventDrop: this.calendarEventDropOrResize, //拖动事件触发
            eventResize: this.calendarEventDropOrResize, //缩放事件触发
            displayEventTime: false, //不显示具体时间
          }
      }
    }