Vue中使用FullCalendar技术

1、Fullcalendar安装npm install --save @fullcalendar/vue下面包是日历的周视图、日视图等插件包：npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid安装

柒个M

7797人浏览 · 2021-01-19 14:54:02

柒个M · 2021-01-19 14:54:02 发布

1、Fullcalendar安装

npm install --save @fullcalendar/vue 
下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid

安装后的fullcalendar源码和其它插件都会在@fullcalendar

2、html文件

<template>
  <div>
      <FullCalendar ref="myCalendar" :options="calendarOptions"/>
  </div>
</template>

3、js文件

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'

4、data中配置日历所需要的属性：以下作为参考：

export default {
  name: 'MaintenanceCalendarview',
  components: {
    FullCalendar
  },
  data () {
    return {
      calendarOptions: {
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
        initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: 'zh-cn', // 切换语言，当前为中文
        eventColor: '#3BB2E3', // 全部日历日程背景色
        themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
        initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
        // displayEventTime: false, // 是否显示时间
        // allDaySlot: false, // 周，日视图时，all-day 不显示
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        headerToolbar: { // 日历头部按钮位置
          left: '',
          center: 'prevYear,prev title next,nextYear',
          right: 'today dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
          dayGrid: {
            eventLimit: 5
          },
          timeGrid: {
            eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        // 事件
        // eventClick: this.handleEventClick, // 点击日历日程事件
        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
        eventDrop: this.eventDrop, // 拖动日历日程事件
        eventResize: this.eventResize, // 修改日历日程大小事件
        select: this.handleDateSelect, // 选中日历格事件
        eventDidMount: this.eventDidMount, // 安装提示事件
        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        allowContextMenu: false,
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        dayMaxEvents: true,
        weekends: true,
        navLinks: true, // 天链接
        selectHelper: false,
        slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      }
    }
  },
  methods: {
    eventMouseEnter (event, jsEvent, view) { // 鼠标划过的事件
      if (event.event.classNames.length) {
        // console.log(event)
      }
    },
    eventDrop (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
      console.log(event)
    }

  }
}

(以上日历事件以及event事件差不多这些都是我个人感觉能用到的我才加进去了)
event: [ ] ==>（event能否进行操作真正取决于开始日期和结束日期的格式，即使是设置了editable，时间还是会影响，一共有四种情况，当日期时间为00：00到23：59时为全天）

events: [
      {
        title : '可以拖动但不能缩放',
        start : '2019-07-01 12:30',
        end : '2019-07-01 13:30',　　     editable: true
      },//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
      {
        title : '可以拖动、缩放',
        start : '2019-07-02 00:00',
        end : '2019-07-02 23:59',
        color:'red',        editable: true
      }, //可以拖动、缩放
　　   {
        title : 'event 2',
        start : '2019-07-02',
        end : '2019-07-02',
        color:'red',        editable: true
      }, 
  { title: 'event 1', date: '2020-06-01', classNames:['cal'],        editable: true
      },
      {
        start: '2020-07-24',
        end: '2020-07-28',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      },//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
    ],

添加约束（日程只能在设置了 groupId: 'availableForMonthStart' 中进行拖动以及缩放功能）

{ 
        id: '添加约束',
        title: '添加约束',
        start: '2020-07-11 00:00',
        end: '2020-07-11 12:00',
        classNames: ['continuousClass'],
        color: '#75a7c8',
        editable: true,
        constraint: 'availableForMonthStart'
      },
      {
        id: 'constraintDom',
        groupId: 'availableForMonthStart',
        start: '2020-07-11 00:00',
        end: '2020-07-11 23:59',
        display: 'background',
        color: '#ff9f89'
      }

参考资料：

https://fullcalendar.io/
https://www.npmjs.com/package/vue-full-calendar
https://blog.csdn.net/supingemail/article/details/48371927
特别感谢：https://www.cnblogs.com/czk1634798848/p/13386178.html
自己实现的效果图如下：
完整的代码：

<template>
    <div class="M_container">
       
            <div class="D_down">
                <FullCalendar ref="myCalendar" :options="calendarOptions"/>
                <ul>
                    <li><span class="waiting"></span>待执行</li>
                    <li><i class="starting"></i>执行中</li>
                    <li><i class="finished"></i>已完成</li>
                </ul>
            </div>

    </div>
</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 {
        name: "index",
        components: {
            FullCalendar,
         
        },
        data(){
            return {
              
                calendarOptions: {
                    // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
                    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
                    initialView: 'timeGridWeek', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
                    events: [
                        {
                            title : '黄娇变电站3020开关综合检修',
                            start : '2021-01-18 02:30',
                            end : '2021-01-18 03:30',
                            color:'#797979',
                            editable: true
                        },//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
                        {
                            title : '黄娇变电站3020开关综合检修',
                            start : '2021-01-19 00:30',
                            end : '2021-01-19 04:30',
                            color:'#5580EE',
                            editable: true
                        }, //可以拖动、缩放
                        {
                            title : '准备公司资料',
                            start : '2021-01-21 04:00',
                            end : '2021-01-21 07:00',
                            color: '#EDB378',
                            editable: true,
                            // overlap: true,
                            // display: 'background',
                        },
                        {
                            title : '准备公司资料',
                            start: '2021-01-23 04:00',
                            end: '2021-01-23 05:00',
                            overlap: false,
                            // display: 'background',
                            color: '#797979'
                        },//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
                    ],
                    firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
                    locale: 'zh-cn', // 切换语言，当前为中文
                    eventColor: '#3BB2E3', // 全部日历日程背景色
                    themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
                    // initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
                    timeGridEventMinHeight: '20', // 设置事件的最小高度
                    aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
                    // displayEventTime: false, // 是否显示时间
                    allDaySlot: false, // 周，日视图时，all-day 不显示
                    eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
                    headerToolbar: { // 日历头部按钮位置
                        left: '',
                        center: 'prevYear,prev title next,nextYear',
                        // right: 'today dayGridMonth,timeGridWeek,timeGridDay'
                        right: ''
                    },
                    buttonText: {
                        // today: '今天',
                        // month: '月',
                        // week: '周',
                        // day: '日'
                    },
                    slotLabelFormat: {
                        hour: '2-digit',
                        minute: '2-digit',
                        meridiem: false,
                        hour12: false // 设置时间为24小时
                    },
                    eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
                        dayGrid: {
                            eventLimit: 5
                        },
                        timeGrid: {
                            eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
                        }
                    },
                    eventClick: this.handleEventClick,
                },
                workingTicketVisible: false //工作表票详情页面

            }
        },
        mounted(){
        },
        methods: {
            /**
             * 点击日历日程事件
             *
             * info: 事件信息
             * event是日程（事件）对象
             * jsEvent是个javascript事件
             * view是当前视图对象。
             */
            handleEventClick(info){
                console.log(info)
               
            },
            
        }
    }
</script>

<style lang="scss" scoped>
.M_container {
    width: 100%;
    height: calc(100vh - 130px);
    display: flex;

    .P_left {
        width: 20%;
        margin-right: 10px;
        height: 100%;
        background: #ffffff;
        padding: 10px;
        > .el-radio-group {
            margin-bottom: 10px;
        }
        .tree_Panel {
            .asideTree_panel {
                .el-tree-node {
                    position: relative;
                }
                .D_tree_icon {
                    width: 20px;
                    height: 20px;
                    float: right;
                    position: absolute;
                    right: 2px;
                }
                ::v-deep .el-tree-node__expand-icon.is-leaf::before{
                    color: transparent;
                    cursor: default;
                    content: none;
                }

                .line {
                    width: 17px;
                    height: 14px;
                    display: inline-block;
                    background: url("../../../assets/images/common/icon-jx.png");
                }

            }
        }
    }
    .el-icon-addJX {
        width: 20px;
        height: 20px;
        background: #1890ff;
    }
    .P_right {
        width: 80%;
        height: 100%;
        padding: 10px;
        background: #ffffff;
        .D_title {
            display: flex;
            justify-content: space-between;
        }
        .D_up {
            width: 100%;
            height: calc(100vh - 620px);
            overflow-y: auto;
            background: #EFF4FE;
            padding: 0 10px;
            font-size: 13px;
            font-family: "Source Han Sans CN Regular";
            >.el-row {
                height: 150px;
                display: flex;
                flex-wrap: wrap;
                .el-col {
                    width: 48%;
                    height: auto;
                    margin: 10px 1%;
                }
            }
            .yuan {
                width: 4px;
                height: 15px;
                display: inline-block;
                opacity: 1;
                margin-right: 5px;
                border: unset !important;
                background: #2275f2;
                border-radius: 0;
            }
        }
        .D_down {
            width: 100%;
            margin-top: 10px;
            /*height: calc(100vh - 525px);*/
            overflow-y: auto;
            >ul {
                list-style: none;
                padding: 0;
                margin: 5px 0 0 0;
                float: right;
                width: 20%;
                display: flex;
                justify-content: space-around;
                font-family: "Source Han Sans CN Medium";
                font-size: 13px;
                >li {
                    width: 30%;
                    .waiting {
                        width: 15px;
                        height: 15px;
                        background: #5580EE;
                        display: inline-block;
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                    .starting {
                        width: 15px;
                        height: 15px;
                        background: #EDB378;
                        display: inline-block;
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                    .finished {
                        width: 15px;
                        height: 15px;
                        background: #797979;
                        display: inline-block;
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                }
            }

            //日历样式
            ::v-deep .fc .fc-toolbar-title{
                font-size: 15px !important;
                font-family: "Source Han Sans CN Regular";
                line-height: 24px;
            }
            ::v-deep .fc .fc-button{
                padding: 0;
            }
            ::v-deep .fc-toolbar-chunk{
                display: flex;
                margin: 0 0 5px 0;
            }
            ::v-deep .fc .fc-toolbar.fc-header-toolbar {
                margin: 0 !important;
            }
            ::v-deep .fc .fc-col-header-cell-cushion {
                font-size: 15px;
                font-family: "Source Han Sans CN Regular";
                color: #333;
            }
            ::v-deep .fc .fc-timegrid-slot-label-cushion{
                font-size: 13px;
                font-family: "Source Han Sans CN Regular";
            }
            ::v-deep .fc .fc-view-harness {
                height: 360px !important;
                overflow: auto;
            }
        }

    }


}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^