日程组件（vue2+FullCalendar）,日程查看，修改，删除等逻辑；

废话不多说，直接上代码：
首先修改一下package.json文件内容，然后npm i即可：(与fullcalendar无关的，可自行处理删除)

---

package.json:

---

{
  "name": "webtemplate",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "foolishma",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/timegrid": "^4.4.0",
    "@fullcalendar/vue": "^4.4.0",
    "element-ui": "^2.13.0",
    "jquery": "^3.4.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@fullcalendar/interaction": "^4.4.0",
    "autoprefixer": "^7.1.2",
    "axios": "^0.19.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^7.3.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

npm i之后,main.js引入相关样式，若要修改样式，在组件页面自行修改:

import '@fullcalendar/core/main.css';
import '@fullcalendar/timegrid/main.css';

---

页面

---

<template>
    <div id="app">
        <div id="prev" @click="prev">向左</div>
        <div id="next" @click="next">向右</div>
        <div class="venue-approval">
            <FullCalendar locale="zh-cn" :header="{
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                }" defaultView="timeGridWeek" :titleFormat="{ year: 'numeric', month: 'long', day: 'numeric' }" :slotLabelFormat="{
                    hour: '2-digit',
                    minute: '2-digit',
                    omitZeroMinute: false,
                    meridiem: 'short',
                    hour12:false
                }" @prev="prev" :showNonCurrentDates='true' @eventClick="handleDateClick" @dateClick="dayClick" @eventMouseEnter="eventMouseEnter" @eventMouseLeave="eventMouseLeave" :slotLabelInterval="{
                    hours:1
                }" :navLinks='false' :allDaySlot='false' :weekends="true" :firstDay='1' minTime='07:00:00' maxTime='22:00:00' slotDuration='00:60:00' :events="getCalendarEvents" :plugins="calendarPlugins" />
        </div>
        <router-view />
    </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
// 引入插件
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
    name: "App",
    components: {
        FullCalendar,
    },
    data() {
        return {
            // 放入数组中，在组件上引入
            calendarPlugins: [timeGridPlugin, interactionPlugin],
            calendarEvents: [
                {
                    auditAdmin: [],
                    cancelResult: "",
                    color: "#2997ff",
                    durationTime: "105",
                    end: "2020-05-18 18:06",
                    info: "",
                    orderId: "202004071622389015",
                    orderRoomId: "9f7a4dafd00f4661af1012e4fc657562",
                    per: "管理员",
                    start: "2020-05-18 16:21",
                    status: "已结束",
                    tel: "15589582912",
                    title: "青岛市实验高级中学",
                    type: "会议场馆",
                    useful: "测试预约",
                },
            ],
        };
    },
    mounted() {},
    methods: {
        // 将标准时间转换成年.月.日
        formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            return y + "." + m + "." + d;
        },
        prev() {
            document.querySelector(".fc-icon.fc-icon-chevron-left").click();
        },
        next() {
            document.querySelector(".fc-icon.fc-icon-chevron-right").click();
        },
        // 获取日程的事件
        getCalendarEvents(info, successCallback, failureCallback) {
            // console.log(info.start.valueOf(),'输出info')
            let events = [];
            // this.$http.get(api.showEventsList, {
            //     params: {
            //         data1: ''
            //     }
            // }).then(res => {
            //     console.log(res, '获取日历事件')
            //     if (res.data.code == 200) {
            //         successCallback(res.data.events)
            //     }
            // }).catch(err => {
            //     // callback([])
            // })
        },
        // 日程点击事件
        handleDateClick(info) {
            // console.log(info,'输出日程点击事件')
           //这里可以做弹窗查看详情、新增、修改等相关的操作，info内有日程信息及event等信息
        },
        // 某单元格的点击事件
        dayClick(arg) {
        	//我这里做了时间判断作为例子
            // 获取点击单元格的毫秒数
            var dateTime = arg.date.getTime();
            // 获取当前时间毫秒数
            var nowDate = new Date().getTime();
            // 获取毫秒数差值
            var timeDif = nowDate - dateTime;
            // 如果点击的时间小于当前时间，及当前时间之前
            if (timeDif >= -3600000 && timeDif <= 3600000) {
                this.$message({
                    message: "最少提前1小时预约",
                    type: "warning",
                });
                return;
            }

            if (timeDif > 3600000) {
                // 如果大于一小时
                this.$message({
                    message: "时间已过，不可预约",
                    type: "warning",
                });
                return;
            }

            if (timeDif < -604800000) {
                // 如果大于7天
                this.$message({
                    message: "最多提前7天预约",
                    type: "warning",
                });
                return;
            }

            if (timeDif < -3600000) {
                console.log("可预约");
                // this.appoint = true;
                return;
            }
        },
        // 日程(鼠标移入事件)
        eventMouseEnter(info) {
            console.log(info);
            //可进行气泡形式的详情展示
        },
        // 当鼠标移出某个事件上的时候触发：
        eventMouseLeave: function (info) {
            console.log("移出");
        },
        formatDate1(date) {
            // 简单的时间格式化处理
            var H = date.getHours();
            var m = date.getMinutes();
            //小于10的在前面补0

            if (H < 10) {
                H = "0" + H;
            }
            if (m < 10) {
                m = "0" + m;
            }

            return H + ":" + m;
        },
    },
};
</script>

<style lang="scss">
//样式修改看个人
.venue-approval {
    width: 976px;
    // height: 600px;
    margin: 20px auto;
    background: #fff;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
// .sec_main_wrap {

.fc-completed {
    background: #2997ff;
}

.fc-time-grid .fc-slats td {
    height: 1.5em;
    border-bottom: 0;
}

.fc-time-grid-event {
    margin: 0 6px 0 -2px;
}

.fc-time-grid-event {
    border-radius: 0;
    display: block;
}

.fc-time-grid .fc-highlight-container {
    z-index: 3;
    position: relative;
}

.fc-time-grid .fc-highlight {
    position: absolute;
    left: 0;
    right: 0;
}

.fc-highlight {
    background: #bce8f1;
    opacity: 0.3;
}

.fc-event {
    border: none;
}

.fc-event,
.fc-event:hover {
    color: #fff;
    text-decoration: none;
}

.fc-icon,
.fc-row.fc-rigid,
.fc-time-grid-event {
    overflow: hidden;
}

.fc-time-grid-event .fc-title {
    font-size: 12px;
    padding: 0 3px;
}

.fc-time-grid-event .fc-content {
    overflow: hidden;
}

.fc-event .fc-content {
    position: relative;
    z-index: 2;
}

.fc-time-grid-event .fc-time {
    font-size: 12px;
    padding: 5px 7px;
}

.fc-time-grid-event .fc-time {
    white-space: nowrap;
}

.fc-event .fc-bg {
    z-index: 1;
    background: #fff;
    opacity: 0.25;
}

.fc-event {
    font-size: 0.85em;
    line-height: 1.3;
}

.fc-time-grid .fc-bgevent,
.fc-time-grid .fc-event {
    position: absolute;
}

.fc-ltr .fc-time-grid .fc-event-container {
    margin: 0 2.5% 0 2px;
}

.fc-time-grid .fc-event-container {
    position: relative;
    z-index: 4;
}

.fc-time-grid .fc-bgevent-container {
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-business-container {
    position: relative;
    z-index: 1;
}

.fc-time-grid .fc-helper-container {
    position: relative;
    z-index: 6;
}

.fc-cancel {
    background: #d1d0d0 !important;
}

.fc-event-container a {
    cursor: pointer;
}

.fc-time-grid .fc-content-skeleton {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    width: 974px;
}

tr {
    display: table-row;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-popover .fc-header {
    background: #eee;
}

.fc-slats .fc-widget-content {
    width: 882px;
}

hr.fc-divider {
    height: 0;
    margin: 0;
    padding: 0 0 2px;
    border-width: 1px 0;
}

.fc-axis span {
    display: block;
    width: 71px;
    height: 44px;
    border: none;
    text-align: right;
    line-height: 44px;
    background: #fdfdfd;
    margin: 0 !important;
}

.fc-time-grid .fc-content-col {
    position: relative;
}

.fc-time-grid .fc-slats,
.fc-time-grid > hr {
    position: relative;
    z-index: 2;
}

.fc-time-grid table {
    border: 0 hidden transparent;
}

.fc table {
    width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.fc-bg table,
.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
    height: 100%;
}

.fc button,
.fc table,
body .fc {
    font-size: 1em;
}

.fc-ltr .fc-axis {
    text-align: center;
}

.fc .fc-axis {
    vertical-align: middle;
    white-space: nowrap;
}

.fc-divider {
    border-style: solid;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border-color: #ddd;
}

.fc td,
.fc th {
    border-style: solid;
    border-width: 1px;
    padding: 0;
    vertical-align: top;
}

// 表格当前日期列的背景色
.fc-unthemed td.fc-today {
    background: #fcf8e3;
}

.fc td.fc-today {
    border-style: double;
}

.fc-axis {
    width: 91px !important;
    height: 38px !important;
    padding: 0 !important;
}

.fc-time-grid > .fc-bg {
    z-index: 1;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-helper-skeleton,
.fc-highlight-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fc-bg,
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
    bottom: 0;
}

.item-world-more-tip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50px;
    display: block;
}

.cgmc {
    width: 314px;
}

.krnrs-wrap .krnrs {
    width: 314px;
    margin-left: 89px;
}

.krnrs-wrap .krnrs .num-from {
    width: 120px !important;
    margin-left: -3px;
}

.krnrs-wrap .krnrs .num-des {
    width: 72px;
    text-align: center;
}

.krnrs-wrap .krnrs .num-to {
    width: 120px;
}

.filter-dialog-wrap {
    width: 404px;
    margin: 0 auto;
    margin-top: 20px;
}

.btm-tips-info .success .bg {
    width: 40px;
    height: 20px;
    background: #1da44a;
}

.btm-tips-info .completed .bg {
    width: 40px;
    height: 20px;
    background: #2997ff;
}

.btm-tips-info .text {
    font-size: 14px;
    color: #333;
    padding: 0 0 0 10px;
    height: 20px;
    line-height: 20px;
}

.btm-tips-info .approval .bg {
    width: 40px;
    height: 20px;
    background: #fc6;
}

.btm-tips-info .approval .text,
.btm-tips-info .cancel .text,
.btm-tips-info .success .text {
    margin-right: 65px;
}

.btm-tips-info .cancel .bg {
    width: 40px;
    height: 20px;
    background: silver;
}

.btm-tips-info {
    padding: 20px 0 0 14px;
}

.fc-view,
.fc-view > table {
    position: relative;
    z-index: 1;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border-color: #ddd;
}

.fc-view-container *,
.fc-view-container :after,
.fc-view-container :before {
    box-sizing: content-box;
}

.fc-divider.fc-widget-header {
    width: 974px;
}

td {
    display: table-cell;
}

.fc button,
.fc table,
body .fc {
    font-size: 1em;
}

.fc .fc-row {
    border-style: solid;
    border-width: 0;
}

.fc-row table {
    border-left: 0 hidden transparent;
    border-right: 0 hidden transparent;
    border-bottom: 0 hidden transparent;
}

.fc-row:first-child table {
    border-top: 0 hidden transparent;
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 1em;
}

.fc-basic-view td.fc-week-number,
.fc-icon,
.fc-toolbar,
.fc th {
    text-align: center;
}

.fc-header-toolbar {
    display: none;
}

.fc-widget-header .fc-day-header span {
    font-size: 14px;
    color: #909399;
    display: block;
    width: 129px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.fc-toolbar .fc-left {
    float: left;
}

.fc-toolbar .fc-right {
    float: right;
}

.fc-icon,
.fc-toolbar .fc-center {
    display: inline-block;
}

.fc-clear {
    clear: both;
}

.fc {
    direction: ltr;
    text-align: left;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

.venue-list-scrollbar-wrap {
    max-height: 820px;
    padding-bottom: 330px;
}

.header-wrap {
    width: 1240px;
    margin: 0 auto;
    padding: 20px 0 12px;
}

.clear {
    zoom: 1;
}

.header-wrap .title-wrap {
    width: 371px;
    height: 33px;
    margin: 0 0 0 436px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.header-wrap .action {
    font-size: 14px;
    color: #666;
    padding: 11px 0 0;
}

.header-wrap .title-wrap .prev {
    width: 51px;
    height: 33px;
    border: 1px solid #dcdfe6;
}

.header-wrap .title-wrap .prev span i {
    margin: 0 auto;
}

.header-wrap .title-wrap .time {
    width: 267px;
    height: 33px;
    line-height: 33px;
    font-size: 18px;
    color: #666;
}

.header-wrap .title-wrap .time .start {
    width: 122px;
    height: 33px;
    line-height: 33px;
    text-align: right;
}

.header-wrap .title-wrap .time .line {
    font-size: 14px;
    width: 17px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    margin: -1px 0 0;
}

.header-wrap .title-wrap .time .end {
    width: 122px;
    height: 33px;
    line-height: 33px;
}

.header-wrap .title-wrap .next {
    width: 51px;
    height: 33px;
    border: 1px solid #dcdfe6;
}

.fc-time-grid-container {
    height: 674px !important;
}

.fc-time-grid,
.fc-time-grid-container {
    z-index: 1;
}

.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
    position: relative;
    width: 100%;
}

.fc-time-grid {
    min-height: 100%;
}

.fc-unselectable {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

// 提醒人弹窗样式
#common-district-select-teach-main {
    width: 950px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -475px;
    background-color: #f1f1f1;
    z-index: 99999;
    margin-top: -10%;
}

#common-select-headers {
    background-color: #409eff;
    color: #fff;
    font-size: 16px;
    padding: 0 26px;
}

#common-select-bodys {
    padding: 27px;
    padding-top: 15px;
    padding-bottom: 0;
}

#select-bodys-checked-main ul.select-bar-list {
    display: inline-block;
    padding: 0;
    margin: 0;
    float: left;
}

#select-bodys-checked-main ul.select-bar-list li.active {
    background-color: #fff;
    color: #409eff;
}

#select-bodys-checked-main ul.select-bar-list li {
    list-style: none;
    display: block;
    width: 95px;
    height: 38px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    margin-bottom: 5px;
    cursor: pointer;
}

#select-bodys-checked-main .select-trees-shows-main {
    width: 760px;
    padding: 20px;
    float: left;
    display: inline-block;
    background-color: #fff;
}

.common-select-tree-bodys {
    width: 370px;
    height: 100%;
    display: inline-block;
    float: left;
    position: relative;
}

.common-search-main {
    position: relative;
    width: 209px;
    height: 28px;
}

.select-trees-shows-main .select-list-common-main {
    margin-top: 10px;
    overflow-y: auto;
}

#common-district-select-teach-main input,
button {
    outline: none;
}

.common-search-main .common-search-input {
    position: absolute;
    left: 0;
    width: 170px;
    height: 26px;
    border: 1px solid #c6c6c6;
    padding: 0 5px;
}

.common-search-main .common-search-button {
    display: inline-block;
    position: absolute;
    right: 0;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #c6c6c6;
    cursor: pointer;
}

.select-center-line {
    height: 100%;
    border-left: 1px solid #d5d5d5;
    width: 0;
    display: inline-block;
    margin-right: 15px;
    float: left;
}

#select-result-show-main .select-result-show-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #666;
}

#select-result-show-main .select-result-show-body {
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
}

#save-select-book {
    float: right;
    color: #66b3ff;
    cursor: pointer;
}

#select-submit-btn-mian {
    margin-top: 2px;
    text-align: center;
}

#save-contact-moudel {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#save-contact-moudel .save-body-shade {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.3;
}

#save-contact-main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 388px;
    height: 210px;
    margin-left: -194px;
    margin-top: -105px;
    background-color: #fff;
    border-radius: 5px;
}

#common-district-select-teach-shade {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0.3;
    z-index: 99998;
}

#common-select-headers .common-select-headers-close {
    float: right;
    cursor: pointer;
    font-size: 18px;
}

#common-district-select-teach-main * {
    box-sizing: content-box !important;
}

#select-result-show-main .select-result-show-body .item-selected-moudel {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    padding: 2px 3px;
    font-size: 14px;
    background-color: #409eff;
    color: #fff;
    margin: 4px 6px;
    border-radius: 3px;
}

#select-result-show-main .item-selected-moudel span {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#select-result-show-main .item-selected-moudel i {
    float: right;
    width: 20px;
    height: 18px;
    line-height: 18px;
    font-style: initial;
    text-align: center;
    cursor: pointer;
}
//   }
</style>