# fullcalendar-demo

**Repository Path**: dda/fullcalendar-demo

## Basic Information

- **Project Name**: fullcalendar-demo
- **Description**: vue集成fullcalendar(日程管理)，版本5.3，有主要参数的解释
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 43
- **Forks**: 15
- **Created**: 2019-07-11
- **Last Updated**: 2025-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: FullCalendar, Vue

## README


# vue集成fullcalendar
## 简介
- 集成日程控件 @fullcalendar/vue 5.3 [官网](https://fullcalendar.io/)

#### 环境依赖
- node 12.14+
- yarn 1.21+

#### Demo运行
- yarn install
- yarn run serve

#### UI展示
![](./doc/img/demo.gif)

## 集成
[Vue集成文档地址](https://fullcalendar.io/docs/vue)
#### 安装所需包
- yarn add @fullcalendar/vue @fullcalendar/interaction @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

### 5.3
#### 引用控件 schedule.vue
```html
<template>
    <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</template>
<script>
    import FullCalendar from '@fullcalendar/vue';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import interactionPlugin from '@fullcalendar/interaction';
    import listPlugin from '@fullcalendar/list';
    export default {
        components: {FullCalendar},
        data () {
            return {
                calendarOptions: {
                  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
                  initialView: 'dayGridMonth',
            };
        }
    };
</script>
```
#### 参数说明
[文档地址](https://fullcalendar.io/docs#toc)
- locale:'zh' 国际化，中文

- initialView:'dayGridMonth' 默认显示视图，月视图

- minTime:'00:00:00' 时间网格中时间的最小值，0点
- maxTime:'23:00:00' 时间网格中时间的最大值，23点
- slotDuration:'00:15:00' 时间网格中时间间隔，15分钟
- defaultTimedEventDuration:'00:30' 日程事件在时间网格中占用的高度，30分钟的高度

- eventLimit:true 是否限制日程事件的数量，限制

- fixedWeekCount:false 是否固定月视图显示的周数，不固定
- showNonCurrentDates:false 是否显示非本月日期，不显示

- allDaySlot:false 是否显示全天，不显示；设置显示后会在时间网格头部显示

- weekends:true 是否显示周末，显示

- slotLabelFormat:slotLabelFormat 时间网格时间格式
- eventTimeFormat:eventTimeFormat 日程事件时间格式

- firstDay:1 星期的第一列显示，周一(0周日 1周一 2周二...)
- headerToolbar:header 头部工具条

- buttonText:buttonText 按钮文本

- plugins:plugins 绑定的控件
- events:events 日程事件
- validRange:validRange 全局日期范围；超出范围按钮会禁用
- datesSet:datesSet 日期渲染；修改日期范围后触发

- eventClick:handleEventClick 点击日程事件，显示详情
- dateClick:handleDateClick 点击日期，显示新增

- eventClassNames 指定事件样式
- dayCellClassNames 指定日期单元格样式

### 4.2
#### 引用控件 schedule.vue
```html
<template>
    <FullCalendar defaultView="dayGridMonth" :plugins="plugins" />
</template>

<script>
    import FullCalendar from '@fullcalendar/vue';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import interactionPlugin from '@fullcalendar/interaction';
    import listPlugin from '@fullcalendar/list';

    export default {
        components: {
            FullCalendar
        },
        data() {
            return {
                plugins: [
                    dayGridPlugin,
                    timeGridPlugin,
                    interactionPlugin,
                    listPlugin
                ]
            }
        }
    }
</script>
<style scoped>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/daygrid/main.css';
    @import '~@fullcalendar/timegrid/main.css';
    @import '~@fullcalendar/list/main.css';
</style>
```

#### 参数说明
[文档地址](https://fullcalendar.io/docs#toc)
- locale="zh" 国际化，中文

- defaultView="dayGridMonth" 默认显示视图，月视图

- minTime="00:00:00" 时间网格中时间的最小值，0点
- maxTime="23:00:00" 时间网格中时间的最大值，23点
- slotDuration="00:15:00" 时间网格中时间间隔，15分钟
- defaultTimedEventDuration="00:30" 日程事件在时间网格中占用的高度，30分钟的高度

- :eventLimit="true" 是否限制日程事件的数量，限制
- eventLimitText="查看所有" 日程事件超出限制数量后显示的文本

- :fixedWeekCount="false" 是否固定月视图显示的周数，不固定
- :showNonCurrentDates="false" 是否显示非本月日期，不显示

- :allDaySlot="false" 是否显示全天，不显示；设置显示后会在时间网格头部显示

- :weekends="true" 是否显示周末，显示

- :slotLabelFormat="slotLabelFormat" 时间网格时间格式
- :eventTimeFormat="eventTimeFormat" 日程事件时间格式

- :firstDay="1" 星期的第一列显示，周一(0周日 1周一 2周二...)
- :header="header" 头部工具条

- :buttonText="buttonText" 按钮文本

- :plugins="plugins" 绑定的控件
- :events="events" 日程事件
- :validRange="validRange" 全局日期范围；超出范围按钮会禁用
- :viewSkeletonRender="viewSkeletonRender" 视图渲染；修改视图类型后触发
- :datesRender="datesRender" 日期渲染；修改日期范围后触发

- @eventClick="handleEventClick" 点击日程事件，显示详情
- @dateClick="handleDateClick" 点击日期，显示新增