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>
    

     

Logo

前往低代码交流专区

更多推荐