电商商城定制开发Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示。

Fullcalendar电商商城定制开发这个插件挺好，电商商城定制开发就是很多方法感觉官方电商商城定制开发文档也没怎么说，电商商城定制开发导致上手难度大，电商商城定制开发而且有些默认事件真的不太友好...电商商城定制开发废话不多说，电商商城定制开发先上效果图！

1、效果GIF 

1.1 电商商城定制开发基本按钮功能

1.2  事件hover显示

 

1.3 事件添加、编辑、状态修改 

 

1.4 电商商城定制开发日历事件搜索 

 

2、 代码实现

 2.1 Fullcalendar日历、el-popover弹窗

        Fullcalendar@5.11.3引入后，电商商城定制开发要设置一大堆参数calendarOptions，电商商城定制开发包括显示时间区域、默认视图、电商商城定制开发是否显示全天类型、中文界面、电商商城定制开发事件的操作函数等，电商商城定制开发具体的一些设置内容，电商商城定制开发见下面代码的注释。

  1. <template>         
  2.  <FullCalendar
  3.             class="calendar"
  4.             ref="fullCalendar"
  5.             :options="calendarOptions"
  6.             ><template v-slot:eventContent="arg">
  7.               <el-popover
  8.                 :append-to-body="true"
  9.                 ref="popover1"
  10.                 placement="top-start"
  11.                 width="220"
  12.                 :visible-arrow="true"
  13.                 trigger="hover"
  14.                 :teleported="false"
  15.                 popper-class="popover"
  16.                 :open-delay="100"
  17.                 @show="showPic(arg)"
  18.                 @hide="popoverPicReset(arg)"
  19.               >
  20.                 <el-row class="popover_title">
  21.                   <el-col
  22.                     :span="12"
  23.                     :style="{
  24.                       color:
  25.                         arg.event.extendedProps.isDone == false
  26.                           ? 'red'
  27.                           : 'green',
  28.                     }"
  29.                   >
  30.                     <span
  31.                       style="padding-right: 2px"
  32.                       :style="{
  33.                         'border-left':
  34.                           arg.event.extendedProps.isDone == false
  35.                             ? '5px solid red'
  36.                             : '5px solid green',
  37.                       }"
  38.                     ></span
  39.                     >{{
  40.                       arg.event.extendedProps.isDone == false
  41.                         ? "未开始"
  42.                         : "已完成"
  43.                     }}</el-col
  44.                   >
  45.                   <el-col
  46.                     :span="12"
  47.                     style="
  48.                       display: flex;
  49.                       flex-direction: row-reverse;
  50.                       font-size: 14;
  51.                       color: #000;
  52.                     "
  53.                     >{{
  54.                       arg.event.allDay == true
  55.                         ? "全天"
  56.                         : formatTimer(arg.event.start)
  57.                     }}</el-col
  58.                   >
  59.                 </el-row>
  60.                 <el-row>
  61.                   <el-col :span="24" style="text-align: center">
  62.                     <el-image
  63.                       v-if="popoverimg.length != 0"
  64.                       :src="popoverimg[0]"
  65.                       @click="PreviewPic(popoverimg)"
  66.                       fit="fill"
  67.                       class="popoverShowImg"
  68.                       ><div slot="placeholder" class="image-slot">
  69.                         加载中<span class="dot">...</span>
  70.                       </div></el-image
  71.                     >
  72.                     <div class="block"></div>
  73.                   </el-col>
  74.                 </el-row>
  75.                 <el-row class="popover_content">
  76.                   <el-col :span="24" style="max-height: 150px; overflow: auto">
  77.                     <span class="click">{{ arg.event.title }}</span>
  78.                   </el-col>
  79.                   <el-col :span="24">
  80.                     <el-link
  81.                       v-if="
  82.                         arg.event.extendedProps.address != null &&
  83.                         arg.event.extendedProps.address != ''
  84.                       "
  85.                       :href="undefined"
  86.                       :underline="false"
  87.                       @click="fileDownload(arg.event.extendedProps.address)"
  88.                       class="link"
  89.                       >{{
  90.                         arg.event.extendedProps.address == null
  91.                           ? ""
  92.                           : arg.event.extendedProps.address.replace(
  93.                               "D:\\flask\\upload\\",
  94.                               ""
  95.                             )
  96.                       }}</el-link
  97.                     ></el-col
  98.                   >
  99.                 </el-row>
  100.  
  101.                 <el-row style="margin-top: 5px"
  102.                   ><el-col style="width: 15%"
  103.                     ><div>
  104.                       <el-button
  105.                         class="hvr-icon-pulse-grow"
  106.                         :popperAppendToBody="false"
  107.                         size="mini"
  108.                         icon="el-icon-edit hvr-icon"
  109.                         type="primary"
  110.                         circle
  111.                         @click="handleEventClick(arg)"
  112.                       >
  113.                       </el-button>
  114.                     </div>
  115.                   </el-col>
  116.                   <el-col style="width: 15%"
  117.                     ><el-button
  118.                       class="hvr-icon-bounce"
  119.                       size="mini"
  120.                       type="success"
  121.                       icon="el-icon-document-checked hvr-icon"
  122.                       circle
  123.                       @click="onCheckBtnClicked(arg)"
  124.                     >
  125.                     </el-button>
  126.                   </el-col>
  127.                   <el-col style="width: 15%"
  128.                     ><el-popconfirm
  129.                       confirm-button-text="好"
  130.                       cancel-button-text="否"
  131.                       icon="el-icon-info"
  132.                       icon-color="red"
  133.                       title="电商商城定制开发确定删除这个事项吗？"
  134.                       @confirm="onRemoveBtnClicked(arg)"
  135.                       ><el-button
  136.                         class="hvr-icon-buzz-out"
  137.                         slot="reference"
  138.                         size="mini"
  139.                         type="danger"
  140.                         icon="el-icon-delete hvr-icon"
  141.                         circle
  142.                       >
  143.                       </el-button
  144.                     ></el-popconfirm> </el-col
  145.                 ></el-row>
  146.                 <div slot="reference">
  147.                   <span class="tree_span_text">{{ arg.timeText }}</span>
  148.                   <span>{{ arg.event.title }}</span>
  149.                 </div>
  150.               </el-popover>
  151.             </template>
  152.           </FullCalendar>
  153. </template>    
  154.   <script>
  155. import FullCalendar from "@fullcalendar/vue";
  156. import dayGridPlugin from "@fullcalendar/daygrid";
  157. import timeGridPlugin from "@fullcalendar/timegrid";
  158. import interactionPlugin from "@fullcalendar/interaction";
  159. import listPlugin from "@fullcalendar/list";
  160.   export default {
  161.   // 电商商城定制开发注册局部组件
  162.   components: {
  163.     FullCalendar,
  164.     Treeselect,
  165.     "el-image-viewer": () =>
  166.       import("element-ui/packages/image/src/image-viewer"),
  167.   },
  168.     data() {
  169.     return {
  170. // Fullcalendar版本@5.11.3电商商城定制开发日历控件设置项，电商商城定制开发官网文档地址：https://fullcalendar.io/
  171.       calendarOptions: {
  172.         visibleRange: { start: "2000-01-01", end: "2100-12-31" }, // 电商商城定制开发可视化区间，必须设置，电商商城定制开发否则查询列表不会显示事件
  173.         // validRange: { start: "2021-09-01", end: "2021-09-01" }, // 电商商城定制开发可展示区间
  174.         // 电商商城定制开发引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid电商商城定制开发引入后才可显示月，周，日
  175.         plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
  176.         initialView: "dayGridMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
  177.         firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
  178.         locale: "zh-cn", // 切换语言，当前为中文
  179.         allDaySlot: true, // 不显示all-day
  180.         businessHours: true, //
  181.         handleWindowResize: true, // 是否随浏览器窗口大小变化而自动变化。
  182.         allDayText: "全天", // 设置all-Day显示的文字，不设置的话默认显示"all-Day"
  183.         themeSystem: "bootstrap", // 主题色(本地测试未能生效)
  184.         // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
  185.         // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
  186.         // eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
  187.         allowContextMenu: false,
  188.         editable: true, // 是否可以进行（拖动、缩放）修改
  189.         eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
  190.         eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
  191.         selectable: true, // 是否可以选中日历格
  192.         selectMirror: true,
  193.         selectMinDistance: 0, // 选中日历格的最小距离
  194.         // eventLimit: true, //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
  195.         moreLinkContent: "+ 更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义
  196.         // dayPopoverFormat: "YYYY-M-d",
  197.         dayMaxEventRows: true, // 日历显示事件最大条数，for all non-TimeGrid views
  198.         weekends: true, //
  199.         navLinks: true, // 天链接
  200.         selectHelper: false,
  201.         slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
  202.         aspectRatio: 1.35, //设置日历单元格宽度与高度的比例。
  203.         expandRows: true,
  204.         height: auto,
  205.         contentHeight: 100,
  206.         nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
  207.         weekMode: "fixed", //在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
  208.         weekNumbers: true, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
  209.         weekText: "周",
  210.         customButtons: {
  211.           //自定义按钮
  212.           getToday: {
  213.             text: "今天",
  214.             click: this.getToday,
  215.           },
  216.           getNext: {
  217.             text: ">",
  218.             click: this.getNext,
  219.           },
  220.           getPrev: {
  221.             text: "<",
  222.             click: this.getPrev,
  223.           },
  224.           getPrevYear: {
  225.             text: "<<",
  226.             click: this.getPrevYear,
  227.           },
  228.           getNextYear: {
  229.             text: ">>",
  230.             click: this.getNextYear,
  231.           },
  232.           customButton: {
  233.             text: "今日标记全部已完成",
  234.             click: this.customButton,
  235.           },
  236.           customButton1: {
  237.             text: "显示未完成",
  238.             click: this.customButton,
  239.           },
  240.         },
  241.         // 日历头部按钮，即Fullcalendar表头显示区域
  242.         // headerToolbar: {
  243.         //   left: "getPrevYear,getPrev,getToday,getNext,getNextYear", //"getPrevYear,getPrev,getToday,getNext,getNextYear customButton,customButton1",
  244.         //   center: "title",
  245.         //   right:
  246.         //     "customButton customButton1 dayGridMonth,timeGridWeek,timeGridDay,listMonth", //dayGridWeek,listMonth
  247.         // },
  248.         headerToolbar: false, // Fullcalendar表头显示区域不显示，显示自己自定义的html头部
  249.         // 使用内置按钮的显示文本
  250.         buttonText: {
  251.           today: "今天",
  252.           month: "月",
  253.           week: "周",
  254.           day: "日",
  255.           list: "日程",
  256.         },
  257.         // 设置日历显示事件时间头
  258.         slotLabelFormat: {
  259.           hour: "2-digit",
  260.           minute: "2-digit",
  261.           meridiem: false,
  262.           hour12: false, // 设置时间为24小时
  263.         },
  264.         // 视图的一些基本设置
  265.         views: {
  266.           // 月视图阳历转农历
  267.           dayGridMonth: {
  268.             height: 500,
  269.             displayEventTime: true, //是否显示时间
  270.             dayMaxEventRows: 4, // adjust to 6 only for timeGridWeek/timeGridDay
  271.             // titleFormat: { year: "numeric", month: "2-digit", day: "2-digit" }, //控制日历显示的标题
  272.             // moreLinkContent: "+ 更多", //可放在这里单独对每个视图控制显示更多的文字
  273.             moreLinkClick: "popover",
  274.             eventTimeFormat: {
  275.               hour: "numeric",
  276.               minute: "2-digit",
  277.               meridiem: false,
  278.             },
  279.             dayPopoverFormat: {
  280.               month: "long",
  281.               day: "numeric",
  282.               year: "numeric",
  283.             },
  284.             // 显示农历
  285.             // dayCellContent(item) {
  286.             //   let _date = new Date(item.date).toLocaleDateString().split("/");
  287.             //   let _dateF = calendar.solarToLunar(_date[0], _date[1], _date[2]);
  288.             //   // 以二十四节气覆盖农历日期
  289.             //   if (calendar.getLunar24Days(_date[0], _date[1], _date[2])) {
  290.             //     _dateF.dayStr = calendar.getLunar24Days(
  291.             //       _date[0],
  292.             //       _date[1],
  293.             //       _date[2]
  294.             //     );
  295.             //   }
  296.             //   return { html: `<p>${item.dayNumberText}(${_dateF.dayStr})</p>` };
  297.             // },
  298.           },
  299.           timeGridWeek: {},
  300.           timeGridDay: {},
  301.           listMonth: {},
  302.         },
  303.         // 设置过往时间无法点击
  304.         // selectAllow: function (clickInfo) {
  305.         //   if (clickInfo.end < new Date()) {
  306.         //     return false;
  307.         //   }
  308.         //   return true;
  309.         // },
  310.         weekends: true, //是否显示周末，设为false则不显示周六和周日
  311.         selectable: true, //是否可以选中日历格
  312.         editable: false, //是否可以进行（拖动、缩放）修改
  313.         navLinks: true, //天链接
  314.         select: this.selectDate, //选中日历格事件
  315.         eventClick: this.handleEventClick, //选中备忘录事件
  316.         eventsSet: this.handleEvents,
  317.         events: this.getCalendarList, //获取数据源
  318.         eventMouseEnter: this.eventMouseEnter, //鼠标悬浮事件
  319.         slotEventOverlap: true, //相同时间段的多个日程视觉上是否允许重叠，默认true允许
  320.         eventResize: this.onEventResize, // 事件时间区间调整
  321.         eventDrop: this.onEventResize, // 事件Drag-Drop事件
  322.         eventMouseLeave: this.eventMouseLeave, // 鼠标移出事件发生的事件
  323.       },
  324.     };
  325.   },
  326. }
  327.   </script>

         在这里，鼠标在事件上面经过时，会显示一个弹出窗，如下图。可见，弹出框有：是否已完成，开始时间，图列说明（可以是图片、GIF等），文字说明、链接或是附件。以上的这些都是用el-popover实现，用了v-slot:eventContent="arg"，将日历的数据进行处理。图片的显示需要修改源码才能显示，不然有bug显示不出来，修改的源码见此文章第3节内容。

 2.2 Fullcalendar日历自定义头部

        在calendarOptions设置里，修改headerToolbar，设置为false。

         然后写好自己的html代码，并调整好css样式。

         绑定自定义按钮的函数功能，主要是利用了calendarApi自带的函数功能，包括视图切换、月日视图切换、往前和往后功能等，当然搜索功能是自己定义的。

  2.3 搜索功能

        这里是onSearch函数功能，主要是在前端对events的过滤，然后再设置视图为list视图，注意这个视图在日历头部的功能区是没有的，但是是Fullcalendar内置的。当搜索框为空或者清空搜索字符后，需要重新请求后端数据。 

3、Fullcalendar源码修改

3.1 修改源码main.js的地址：

 3.2 添加的show_pic函数/方法：

  1.     CalendarApi.prototype.show_pic = function (arg) {
  2.         var state = this.getCurrentData();
  3.         this.unselect();
  4.         // 出现图片的关键
  5.         this.dispatch({
  6.             type: 'CHANGE_DATE',
  7.             dateMarker: state.dateEnv.createMarker(arg.view.currentStart),
  8.         });
  9.     };

4、Vue源码

  1. <template>
  2.   <!-- el-mian是个人右侧容器的设置组件 -->
  3.   <el-main>
  4.     <div>
  5.       <!-- 日历头部div -->
  6.       <div class="fc-toolbar" style="display: flex; margin-bottom: 2px">
  7.         <!-- 日历头部左侧显示区域 -->
  8.         <div class="fc-left" style="flex: 1; justify-content: flex-start">
  9.           <div style="vertical-align: middle">
  10.             <el-input
  11.               placeholder="请输入查询内容"
  12.               v-model="search_input"
  13.               clearable
  14.               class="input"
  15.               size="medium"
  16.               @keyup.enter.native="onSearch"
  17.               @clear="getToday()"
  18.             >
  19.               <i slot="suffix" class="el-icon-search" @click="onSearch"></i>
  20.             </el-input>
  21.           </div>
  22.         </div>
  23.         <!-- 日历头部中间显示区域 -->
  24.         <div
  25.           class="fc-center"
  26.           style="display: flex; flex: 3; justify-content: center"
  27.         >
  28.           <el-button-group>
  29.             <el-button
  30.               icon="el-icon-d-arrow-left"
  31.               @click="getPrevYear"
  32.               class="fc_btns"
  33.             ></el-button>
  34.             <el-button
  35.               icon="el-icon-arrow-left"
  36.               @click="getPrev"
  37.               class="fc_btns"
  38.             ></el-button>
  39.           </el-button-group>
  40.           <h2 class="title">
  41.             {{ title }}
  42.           </h2>
  43.           <el-button-group>
  44.             <el-button
  45.               icon="el-icon-arrow-right"
  46.               @click="getNext"
  47.               class="fc_btns"
  48.             ></el-button>
  49.             <el-button
  50.               icon="el-icon-d-arrow-right"
  51.               @click="getNextYear"
  52.               class="fc_btns"
  53.             ></el-button>
  54.           </el-button-group>
  55.         </div>
  56.         <!-- 显示图标注释栏 -->
  57.         <!-- <div class="tips" style="display: flex">
  58.           <div
  59.             style="
  60.               height: 14px;
  61.               width: 14px;
  62.               background: green;
  63.               text-align: center;
  64.               position: relative;
  65.               top: 27%;
  66.             "
  67.           ></div>
  68.           <span class="tip-content">已完成</span>
  69.           <div
  70.             style="
  71.               height: 14px;
  72.               width: 14px;
  73.               background: #fe9b02;
  74.               text-align: center;
  75.               position: relative;
  76.               top: 27%;
  77.             "
  78.           ></div>
  79.           <span class="tip-content">未开始</span>
  80.         </div> -->
  81.         <!-- 日历头部右侧显示区域 -->
  82.         <div class="fc-right">
  83.           <el-button-group>
  84.             <el-button
  85.               @click="today"
  86.               type="success"
  87.               plain
  88.               size="medium"
  89.               class="fc_btns"
  90.               >今天</el-button
  91.             >
  92.             <el-button
  93.               @click="month"
  94.               type="primary"
  95.               plain
  96.               size="medium"
  97.               class="fc_btns"
  98.               >月</el-button
  99.             >
  100.             <el-button
  101.               @click="week"
  102.               type="primary"
  103.               plain
  104.               size="medium"
  105.               class="fc_btns"
  106.               >周</el-button
  107.             >
  108.             <el-button
  109.               @click="day"
  110.               type="primary"
  111.               plain
  112.               size="medium"
  113.               class="fc_btns"
  114.               >日</el-button
  115.             >
  116.             <el-button
  117.               @click="list"
  118.               type="primary"
  119.               plain
  120.               size="medium"
  121.               class="fc_btns"
  122.               >列表</el-button
  123.             >
  124.           </el-button-group>
  125.         </div>
  126.       </div>
  127.     </div>
  128.     <!-- 日历本体 -->
  129.     <el-row>
  130.       <el-col :md="24" :xs="24">
  131.         <div style="margin-top: 0px">
  132.           <FullCalendar
  133.             class="calendar"
  134.             ref="fullCalendar"
  135.             :options="calendarOptions"
  136.             ><template v-slot:eventContent="arg">
  137.               <el-popover
  138.                 :append-to-body="true"
  139.                 ref="popover1"
  140.                 placement="top-start"
  141.                 width="220"
  142.                 :visible-arrow="true"
  143.                 trigger="hover"
  144.                 :teleported="false"
  145.                 popper-class="popover"
  146.                 :open-delay="100"
  147.                 @show="showPic(arg)"
  148.                 @hide="popoverPicReset(arg)"
  149.               >
  150.                 <el-row class="popover_title">
  151.                   <el-col
  152.                     :span="12"
  153.                     :style="{
  154.                       color:
  155.                         arg.event.extendedProps.isDone == false
  156.                           ? 'red'
  157.                           : 'green',
  158.                     }"
  159.                   >
  160.                     <span
  161.                       style="padding-right: 2px"
  162.                       :style="{
  163.                         'border-left':
  164.                           arg.event.extendedProps.isDone == false
  165.                             ? '5px solid red'
  166.                             : '5px solid green',
  167.                       }"
  168.                     ></span
  169.                     >{{
  170.                       arg.event.extendedProps.isDone == false
  171.                         ? "未开始"
  172.                         : "已完成"
  173.                     }}</el-col
  174.                   >
  175.                   <el-col
  176.                     :span="12"
  177.                     style="
  178.                       display: flex;
  179.                       flex-direction: row-reverse;
  180.                       font-size: 14;
  181.                       color: #000;
  182.                     "
  183.                     >{{
  184.                       arg.event.allDay == true
  185.                         ? "全天"
  186.                         : formatTimer(arg.event.start)
  187.                     }}</el-col
  188.                   >
  189.                 </el-row>
  190.                 <el-row>
  191.                   <el-col :span="24" style="text-align: center">
  192.                     <el-image
  193.                       v-if="popoverimg.length != 0"
  194.                       :src="popoverimg[0]"
  195.                       @click="PreviewPic(popoverimg)"
  196.                       fit="fill"
  197.                       class="popoverShowImg"
  198.                       ><div slot="placeholder" class="image-slot">
  199.                         加载中<span class="dot">...</span>
  200.                       </div></el-image
  201.                     >
  202.                     <div class="block"></div>
  203.                   </el-col>
  204.                 </el-row>
  205.                 <el-row class="popover_content">
  206.                   <el-col :span="24" style="max-height: 150px; overflow: auto">
  207.                     <span class="click">{{ arg.event.title }}</span>
  208.                   </el-col>
  209.                   <el-col :span="24">
  210.                     <el-link
  211.                       v-if="
  212.                         arg.event.extendedProps.address != null &&
  213.                         arg.event.extendedProps.address != ''
  214.                       "
  215.                       :href="undefined"
  216.                       :underline="false"
  217.                       @click="fileDownload(arg.event.extendedProps.address)"
  218.                       class="link"
  219.                       >{{
  220.                         arg.event.extendedProps.address == null
  221.                           ? ""
  222.                           : arg.event.extendedProps.address.replace(
  223.                               "D:\\flask\\upload\\",
  224.                               ""
  225.                             )
  226.                       }}</el-link
  227.                     ></el-col
  228.                   >
  229.                 </el-row>
  230.  
  231.                 <el-row style="margin-top: 5px"
  232.                   ><el-col style="width: 15%"
  233.                     ><div>
  234.                       <el-button
  235.                         class="hvr-icon-pulse-grow"
  236.                         :popperAppendToBody="false"
  237.                         size="mini"
  238.                         icon="el-icon-edit hvr-icon"
  239.                         type="primary"
  240.                         circle
  241.                         @click="handleEventClick(arg)"
  242.                       >
  243.                       </el-button>
  244.                     </div>
  245.                   </el-col>
  246.                   <el-col style="width: 15%"
  247.                     ><el-button
  248.                       class="hvr-icon-bounce"
  249.                       size="mini"
  250.                       type="success"
  251.                       icon="el-icon-document-checked hvr-icon"
  252.                       circle
  253.                       @click="onCheckBtnClicked(arg)"
  254.                     >
  255.                     </el-button>
  256.                   </el-col>
  257.                   <el-col style="width: 15%"
  258.                     ><el-popconfirm
  259.                       confirm-button-text="好"
  260.                       cancel-button-text="否"
  261.                       icon="el-icon-info"
  262.                       icon-color="red"
  263.                       title="确定删除这个事项吗？"
  264.                       @confirm="onRemoveBtnClicked(arg)"
  265.                       ><el-button
  266.                         class="hvr-icon-buzz-out"
  267.                         slot="reference"
  268.                         size="mini"
  269.                         type="danger"
  270.                         icon="el-icon-delete hvr-icon"
  271.                         circle
  272.                       >
  273.                       </el-button
  274.                     ></el-popconfirm> </el-col
  275.                 ></el-row>
  276.                 <div slot="reference">
  277.                   <span class="tree_span_text">{{ arg.timeText }}</span>
  278.                   <span>{{ arg.event.title }}</span>
  279.                 </div>
  280.               </el-popover>
  281.             </template>
  282.           </FullCalendar>
  283.         </div>
  284.         <!-- 事件添加或修改对话框 -->
  285.         <el-dialog
  286.           :visible.sync="dialogVisible"
  287.           :popperAppendToBody="false"
  288.           @close="cancel"
  289.           v-dialogDrag
  290.           :close-on-click-modal="false"
  291.           class="calendar_matters"
  292.         >
  293.           <div slot="title" class="header-title" :style="{ color: 'black' }">
  294.             <i class="el-icon-edit"></i><span> &nbsp;事件</span>
  295.           </div>
  296.           <el-form ref="form" :model="form" label-width="80px">
  297.             <el-row>
  298.               <el-col :span="12" :xs="24">
  299.                 <el-form-item label="事件时间">
  300.                   <div class="dateRange">
  301.                     <el-date-picker
  302.                       v-model="dateRange"
  303.                       type="datetimerange"
  304.                       range-separator="至"
  305.                       start-placeholder="开始日期"
  306.                       end-placeholder="结束日期"
  307.                     >
  308.                     </el-date-picker>
  309.                   </div>
  310.                 </el-form-item>
  311.               </el-col>
  312.               <el-col :span="12"> </el-col>
  313.             </el-row>
  314.             <el-row>
  315.               <el-col :span="24"
  316.                 ><el-form-item label="具体事项">
  317.                   <el-input
  318.                     v-model="form.remark"
  319.                     type="textarea"
  320.                     class="calendar_details"
  321.                   ></el-input> </el-form-item
  322.               ></el-col>
  323.             </el-row>
  324.             <el-row>
  325.               <el-col :span="12" :xs="24"
  326.                 ><el-form-item label="提醒类别" prop="deptId">
  327.                   <treeselect
  328.                     v-model="form.category"
  329.                     :options="Options"
  330.                     :props="defaultProps"
  331.                     :show-count="true"
  332.                     placeholder="请选择类型"
  333.                     @select="categorySelected"
  334.                   /> </el-form-item
  335.               ></el-col>
  336.               <el-col :span="12" :xs="24"
  337.                 ><el-form-item
  338.                   v-if="form.userId == undefined"
  339.                   label="记录人"
  340.                   prop="userName"
  341.                 >
  342.                   <el-input
  343.                     v-model="form.userName"
  344.                     maxlength="30"
  345.                     disabled
  346.                     class="userName"
  347.                   /> </el-form-item
  348.               ></el-col>
  349.             </el-row>
  350.  
  351.             <el-row>
  352.               <el-col :span="12"> </el-col>
  353.               <el-col :span="12" :xs="24">
  354.                 <el-form-item label="状态">
  355.                   <el-radio-group v-model="form.isDone">
  356.                     <el-radio label="0">已完成</el-radio>
  357.                     <el-radio label="1">未确认</el-radio>
  358.                   </el-radio-group>
  359.                 </el-form-item>
  360.               </el-col>
  361.             </el-row>
  362.             <el-row>
  363.               <el-col :span="18" :xs="24">
  364.                 <el-form-item label="附件" class="attachment" prop="address">
  365.                   <el-upload
  366.                     action="#"
  367.                     :show-file-list="false"
  368.                     :auto-upload="false"
  369.                     :on-change="address_beforeupload"
  370.                   >
  371.                     <div>
  372.                       <el-button
  373.                         type="primary"
  374.                         icon="el-icon-folder-opened"
  375.                       ></el-button>
  376.                     </div>
  377.                   </el-upload>
  378.                   <el-input
  379.                     v-model="form.address"
  380.                     clearable
  381.                   ></el-input></el-form-item
  382.               ></el-col>
  383.             </el-row>
  384.             <el-row>
  385.               <el-col :span="24" :xs="24">
  386.                 <el-form-item label="相关图片" prop="address">
  387.                   <el-upload
  388.                     ref="uploadFile"
  389.                     class="upload-demo"
  390.                     action="#"
  391.                     :auto-upload="false"
  392.                     :show-file-list="true"
  393.                     :on-change="beforeupload"
  394.                     list-type="picture-card"
  395.                     :file-list="filelist"
  396.                     multiple
  397.                   >
  398.                     <i slot="default" class="el-icon-plus"></i>
  399.                     <div slot="file" slot-scope="{ file }">
  400.                       <img
  401.                         class="el-upload-list__item-thumbnail"
  402.                         :src="file.url"
  403.                         alt=""
  404.                       />
  405.                       <span class="el-upload-list__item-actions">
  406.                         <span
  407.                           class="el-upload-list__item-preview"
  408.                           @click="handlePictureCardPreview(file)"
  409.                         >
  410.                           <i class="el-icon-zoom-in"></i>
  411.                         </span>
  412.                         <span
  413.                           v-if="!disabled"
  414.                           class="el-upload-list__item-delete"
  415.                           @click="handleDownload(file)"
  416.                         >
  417.                           <i class="el-icon-download"></i>
  418.                         </span>
  419.                         <span
  420.                           v-if="!disabled"
  421.                           class="el-upload-list__item-delete"
  422.                           @click="handleRemove(file)"
  423.                         >
  424.                           <i class="el-icon-delete"></i>
  425.                         </span>
  426.                       </span>
  427.                     </div>
  428.                   </el-upload>
  429.                 </el-form-item>
  430.               </el-col>
  431.             </el-row>
  432.           </el-form>
  433.           <div slot="footer" class="dialog-footer">
  434.             <el-button type="primary" @click="submitForm">确 定</el-button>
  435.             <el-button @click="cancel">取 消</el-button>
  436.           </div>
  437.         </el-dialog>
  438.         <!-- 图片预览对话框 -->
  439.         <el-image-viewer
  440.           v-if="img_dialogVisible"
  441.           :initial-index="0"
  442.           :on-close="onClose"
  443.           :url-list="dialogImageUrl"
  444.           style="z-index: 3000"
  445.         ></el-image-viewer>
  446.       </el-col>
  447.     </el-row>
  448.   </el-main>
  449. </template>
  450.  
  451. <script>
  452. // import { getCalendarList } from "@/api/calendar.js";
  453. import FullCalendar from "@fullcalendar/vue";
  454. import dayGridPlugin from "@fullcalendar/daygrid";
  455. import timeGridPlugin from "@fullcalendar/timegrid";
  456. import interactionPlugin from "@fullcalendar/interaction";
  457. import listPlugin from "@fullcalendar/list";
  458. // import tippy from "tippy.js";
  459. // import "../../assets/tippy.css";
  460. // import calendar from "../../utils/calendar.js";
  461. // import { INITIAL_EVENTS, createEventId } from "./event-utils";
  462. import { auto } from "@popperjs/core";
  463. import "../../directives.js"; // v-dialogDrag: 弹窗可拖拽属性
  464. import Treeselect from "@riophae/vue-treeselect"; // Treeselect插件
  465. import "@riophae/vue-treeselect/dist/vue-treeselect.css"; // 若依css设置
  466. export default {
  467.   // 注册局部组件
  468.   components: {
  469.     FullCalendar,
  470.     Treeselect,
  471.     "el-image-viewer": () =>
  472.       import("element-ui/packages/image/src/image-viewer"),
  473.   },
  474.   data() {
  475.     return {
  476.       // 搜索框输入的文本
  477.       search_input: "",
  478.  
  479.       // treeselect插件默认配置
  480.       defaultProps: {
  481.         children: "children",
  482.         label: "label",
  483.       },
  484.       // 提醒类别设置
  485.       Options: [
  486.         {
  487.           id: "工作类别",
  488.           pid: 0,
  489.           label: "工作类别",
  490.           children: [],
  491.         },
  492.         {
  493.           id: "生活类别",
  494.           pid: 0,
  495.           label: "生活类别",
  496.           children: [],
  497.         },
  498.         {
  499.           id: "其他类别",
  500.           pid: 0,
  501.           label: "其他类别",
  502.           children: [],
  503.         },
  504.         {
  505.           id: "",
  506.           pid: 0,
  507.           label: "无",
  508.           children: [],
  509.         },
  510.       ],
  511.  
  512.       // 表单是否显示
  513.       dialogVisible: false,
  514.       // 表单标题栏
  515.       title: "事件",
  516.       // 表单当前编辑模式设置，add或amend
  517.       form_edited_state: "",
  518.       // 表单内容设置项
  519.       form: {
  520.         remark: undefined,
  521.         isDone: undefined,
  522.         img: "",
  523.         address: "",
  524.       },
  525.       // 表单日期设置
  526.       dateRange: [],
  527.       // 图片预览的操作按钮是否展示
  528.       disabled: false,
  529.       // 图片是否显示
  530.       img_dialogVisible: false,
  531.       // 预览图片地址
  532.       dialogImageUrl: "",
  533.       // el-popover弹出框标题内容
  534.       popover_title: "事项",
  535.       // el-popover图片地址存放
  536.       popoverimg: [],
  537.       // 附件地址存放
  538.       filelist: [],
  539.  
  540.       // ------------------
  541.       // Fullcalendar版本@5.11.3日历控件设置项，官网文档地址：https://fullcalendar.io/
  542.       calendarOptions: {
  543.         // visibleRange: { start: "2021-09-01", end: "2022-10-01" }, // 可视化区间
  544.         // validRange: { start: "2021-09-01", end: "2021-09-01" }, // 可展示区间
  545.         // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
  546.         plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
  547.         initialView: "dayGridMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
  548.         firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
  549.         locale: "zh-cn", // 切换语言，当前为中文
  550.         allDaySlot: true, // 不显示all-day
  551.         businessHours: true, //
  552.         handleWindowResize: true, // 是否随浏览器窗口大小变化而自动变化。
  553.         allDayText: "全天", // 设置all-Day显示的文字，不设置的话默认显示"all-Day"
  554.         themeSystem: "bootstrap", // 主题色(本地测试未能生效)
  555.         // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
  556.         // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
  557.         // eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
  558.         allowContextMenu: false,
  559.         editable: true, // 是否可以进行（拖动、缩放）修改
  560.         eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
  561.         eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
  562.         selectable: true, // 是否可以选中日历格
  563.         selectMirror: true,
  564.         selectMinDistance: 0, // 选中日历格的最小距离
  565.         // eventLimit: true, //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
  566.         moreLinkContent: "+ 更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义
  567.         // dayPopoverFormat: "YYYY-M-d",
  568.         dayMaxEventRows: true, // 日历显示事件最大条数，for all non-TimeGrid views
  569.         weekends: true, //
  570.         navLinks: true, // 天链接
  571.         selectHelper: false,
  572.         slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
  573.         aspectRatio: 1.35, //设置日历单元格宽度与高度的比例。
  574.         expandRows: true,
  575.         height: auto,
  576.         contentHeight: 100,
  577.         nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
  578.         weekMode: "fixed", //在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
  579.         weekNumbers: true, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
  580.         weekText: "周",
  581.         customButtons: {
  582.           //自定义按钮
  583.           getToday: {
  584.             text: "今天",
  585.             click: this.getToday,
  586.           },
  587.           getNext: {
  588.             text: ">",
  589.             click: this.getNext,
  590.           },
  591.           getPrev: {
  592.             text: "<",
  593.             click: this.getPrev,
  594.           },
  595.           getPrevYear: {
  596.             text: "<<",
  597.             click: this.getPrevYear,
  598.           },
  599.           getNextYear: {
  600.             text: ">>",
  601.             click: this.getNextYear,
  602.           },
  603.           customButton: {
  604.             text: "今日标记全部已完成",
  605.             click: this.customButton,
  606.           },
  607.           customButton1: {
  608.             text: "显示未完成",
  609.             click: this.customButton,
  610.           },
  611.         },
  612.         // 日历头部按钮，即Fullcalendar表头显示区域
  613.         // headerToolbar: {
  614.         //   left: "getPrevYear,getPrev,getToday,getNext,getNextYear", //"getPrevYear,getPrev,getToday,getNext,getNextYear customButton,customButton1",
  615.         //   center: "title",
  616.         //   right:
  617.         //     "customButton customButton1 dayGridMonth,timeGridWeek,timeGridDay,listMonth", //dayGridWeek,listMonth
  618.         // },
  619.         headerToolbar: false, // Fullcalendar表头显示区域不显示，显示自己自定义的html头部
  620.         // 使用内置按钮的显示文本
  621.         buttonText: {
  622.           today: "今天",
  623.           month: "月",
  624.           week: "周",
  625.           day: "日",
  626.           list: "日程",
  627.         },
  628.         // 设置日历显示事件时间头
  629.         slotLabelFormat: {
  630.           hour: "2-digit",
  631.           minute: "2-digit",
  632.           meridiem: false,
  633.           hour12: false, // 设置时间为24小时
  634.         },
  635.         // 视图的一些基本设置
  636.         views: {
  637.           // 月视图阳历转农历
  638.           dayGridMonth: {
  639.             height: 500,
  640.             displayEventTime: true, //是否显示时间
  641.             dayMaxEventRows: 4, // adjust to 6 only for timeGridWeek/timeGridDay
  642.             // titleFormat: { year: "numeric", month: "2-digit", day: "2-digit" }, //控制日历显示的标题
  643.             // moreLinkContent: "+ 更多", //可放在这里单独对每个视图控制显示更多的文字
  644.             moreLinkClick: "popover",
  645.             eventTimeFormat: {
  646.               hour: "numeric",
  647.               minute: "2-digit",
  648.               meridiem: false,
  649.             },
  650.             dayPopoverFormat: {
  651.               month: "long",
  652.               day: "numeric",
  653.               year: "numeric",
  654.             },
  655.             // 显示农历
  656.             // dayCellContent(item) {
  657.             //   let _date = new Date(item.date).toLocaleDateString().split("/");
  658.             //   let _dateF = calendar.solarToLunar(_date[0], _date[1], _date[2]);
  659.             //   // 以二十四节气覆盖农历日期
  660.             //   if (calendar.getLunar24Days(_date[0], _date[1], _date[2])) {
  661.             //     _dateF.dayStr = calendar.getLunar24Days(
  662.             //       _date[0],
  663.             //       _date[1],
  664.             //       _date[2]
  665.             //     );
  666.             //   }
  667.             //   return { html: `<p>${item.dayNumberText}(${_dateF.dayStr})</p>` };
  668.             // },
  669.           },
  670.           timeGridWeek: {},
  671.           timeGridDay: {},
  672.           listMonth: {},
  673.         },
  674.         // 设置过往时间无法点击
  675.         // selectAllow: function (clickInfo) {
  676.         //   if (clickInfo.end < new Date()) {
  677.         //     return false;
  678.         //   }
  679.         //   return true;
  680.         // },
  681.         weekends: true, //是否显示周末，设为false则不显示周六和周日
  682.         selectable: true, //是否可以选中日历格
  683.         editable: false, //是否可以进行（拖动、缩放）修改
  684.         navLinks: true, //天链接
  685.         select: this.selectDate, //选中日历格事件
  686.         eventClick: this.handleEventClick, //选中备忘录事件
  687.         eventsSet: this.handleEvents,
  688.         events: this.getCalendarList, //获取数据源
  689.         eventMouseEnter: this.eventMouseEnter, //鼠标悬浮事件
  690.         slotEventOverlap: true, //相同时间段的多个日程视觉上是否允许重叠，默认true允许
  691.         eventResize: this.onEventResize, // 事件时间区间调整
  692.         eventDrop: this.onEventResize, // 事件Drag-Drop事件
  693.         eventMouseLeave: this.eventMouseLeave, // 鼠标移出事件发生的事件
  694.       },
  695.     };
  696.   },
  697.   mounted() {
  698.     this.calendarApi = this.$refs.fullCalendar.getApi();
  699.     this.title = this.calendarApi.view.title;
  700.   },
  701.   watch: {
  702.     search_input: {
  703.       handler: function (newData, oldData) {
  704.         if (newData == "") {
  705.           this.month();
  706.           this.getToday();
  707.         }
  708.       },
  709.       deep: true,
  710.     },
  711.   },
  712.   methods: {
  713.     // 将当前时间移至今日事件
  714.     today() {
  715.       this.getToday();
  716.     },
  717.     // 月视图
  718.     month() {
  719.       this.calendarApi.changeView("dayGridMonth");
  720.       this.title = this.calendarApi.view.title;
  721.     },
  722.     // 周视图
  723.     week() {
  724.       this.calendarApi.changeView("timeGridWeek");
  725.       this.title = this.calendarApi.view.title;
  726.     },
  727.     // 日视图
  728.     day() {
  729.       this.calendarApi.changeView("timeGridDay");
  730.       this.handleTime(this.calendarApi.currentData.dateProfile.activeRange);
  731.       this.title = this.calendarApi.view.title;
  732.     },
  733.     // 列表视图
  734.     list() {
  735.       this.calendarApi.changeView("listMonth");
  736.       this.title = this.calendarApi.view.title;
  737.     },
  738.     // 鼠标划过，使用tippy插件显示tooltip
  739.     eventMouseEnter(info) {
  740.       // 非周列表的情况下显示悬浮提示;
  741.       // if (info.view.type != "listWeek") {
  742.       //   tippy(info.el, {
  743.       //     content: info.event.title,
  744.       //     placement: "top-start",
  745.       //   });
  746.       // }
  747.     },
  748.     // 鼠标离开
  749.     eventMouseLeave(arg) {
  750.       // console.log("mouseleave");
  751.       // arg.jsEvent.preventDefault();
  752.     },
  753.     // 事项调整时间区间事件
  754.     onEventResize(arg) {
  755.       let newTimeStart = this.dateFormat(
  756.         "YYYY-mm-dd HH:MM:SS",
  757.         arg.event.startStr
  758.       );
  759.       let newTimeEnd = this.dateFormat("YYYY-mm-dd HH:MM:SS", arg.event.endStr);
  760.       this.get("/calendar/updateTime", {
  761.         id: arg.event.id,
  762.         Start: newTimeStart,
  763.         End: newTimeEnd,
  764.       }).then((res) => {
  765.         this.$message.success(res.data.info);
  766.       });
  767.       // 必须加这句，不然切换视图会有显示事件数目的bug
  768.       let calendarApi = arg.view.calendar;
  769.       calendarApi.today();
  770.     },
  771.     // el-popover图片点击预览放大事件
  772.     PreviewPic(arg) {
  773.       this.dialogImageUrl = arg;
  774.       this.img_dialogVisible = true;
  775.       this.stopMove();
  776.     },
  777.     // el-popover图片点击预览后关闭事件
  778.     onClose() {
  779.       this.img_dialogVisible = false;
  780.       this.move();
  781.     },
  782.     // el-popover隐藏时触发，将图片地址修改为空
  783.     async popoverPicReset(arg) {
  784.       this.popoverimg = await [];
  785.       let calendarApi = arg.view.calendar;
  786.       calendarApi.show_pic(arg);
  787.     },
  788.     // el-popover显示图片功能
  789.     async showPic(arg) {
  790.       let calendarApi = arg.view.calendar;
  791.       this.popoverimg = [];
  792.  
  793.       await this.post("/get_img_url", arg.event.extendedProps.img, "blob").then(
  794.         (res) => {
  795.           // console.log(res.data.imgs);
  796.           res.data.imgs.forEach((item, index) => {
  797.             const img = "data:image/png;base64," + item;
  798.             this.file = this.base64ImgtoFile(img); // 得到File对象
  799.             const url =
  800.               window.webkitURL.createObjectURL(this.file) ||
  801.               window.URL.createObjectURL(this.file);
  802.             this.popoverimg.push(url);
  803.           });
  804.         }
  805.       );
  806.       calendarApi.show_pic(arg);
  807.     },
  808.     // 提醒类别选择
  809.     categorySelected(node) {
  810.       this.form.categoryName = node.label;
  811.     },
  812.     // 自定义按钮
  813.     customButton() {
  814.       console.log("点击了自定义按钮");
  815.     },
  816.     // 今天
  817.     getToday() {
  818.       let calendarApi = this.$refs.fullCalendar.getApi();
  819.       calendarApi.today();
  820.       this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  821.       this.title = this.calendarApi.view.title;
  822.       this.search_input = "";
  823.     },
  824.     // 上一年
  825.     getPrevYear() {
  826.       let calendarApi = this.$refs.fullCalendar.getApi();
  827.       calendarApi.prevYear();
  828.       // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  829.       this.title = this.calendarApi.view.title;
  830.     },
  831.     // 下一年
  832.     getNextYear() {
  833.       let calendarApi = this.$refs.fullCalendar.getApi();
  834.       calendarApi.nextYear();
  835.       // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  836.       this.title = this.calendarApi.view.title;
  837.     },
  838.     // 上一月
  839.     getPrev() {
  840.       let calendarApi = this.$refs.fullCalendar.getApi();
  841.       calendarApi.prev();
  842.       // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  843.       this.title = this.calendarApi.view.title;
  844.     },
  845.     // 下一月
  846.     getNext() {
  847.       let calendarApi = this.$refs.fullCalendar.getApi();
  848.       calendarApi.next();
  849.       // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  850.       this.title = this.calendarApi.view.title;
  851.     },
  852.     // 处理时间格式
  853.     handleTime(activeRange) {
  854.       let result = {
  855.         startStr: activeRange.start,
  856.         endStr: activeRange.end,
  857.       };
  858.       this.getCalendarList();
  859.     },
  860.     // 获取列表信息
  861.     getCalendarList(result) {
  862.       // 以当前时间插入数据
  863.       let _this = this;
  864.       // 注意，请求的数据是数据库所有数据即可，不用考虑当前显示的时间范围，Fullcalendar会自动只显示当前日期范围的事件
  865.       _this
  866.         .get("/calendar/getCalendarList", "")
  867.         .then((res) => {
  868.           _this.calendarOptions.events = [];
  869.           res.data.data.forEach((item) => {
  870.             var data = {
  871.               id: item[0],
  872.               title: item[1],
  873.               start: item[2],
  874.               end: item[3],
  875.               allDay: item[4],
  876.               className: item[5] == true ? "borderGreen" : "borderOrange",
  877.               // 非标准字段:除上述字段外，您还可以在每个事件对象中包含自己的非标准字段。FullCalendar不会修改或删除这些字段。例如，开发人员通常包括描述在回调中使用的字段，如事件呈现挂钩. 任何非标准属性都将移动到extendedProps哈希期间事件解析.
  878.               extendedProps: {
  879.                 isDone: item[5],
  880.                 img: item[6],
  881.                 address: item[7],
  882.                 type: item[8],
  883.               },
  884.               others: "该字段值会被自动归类到extendedProps里面",
  885.               backgroundColor:
  886.                 (item[4] == true ? "all_Day" : "other") != "all_Day"
  887.                   ? item[5] == true
  888.                     ? "#c2fccd"
  889.                     : "#FFECDC"
  890.                   : "#66b1ff",
  891.               editable: true, // 是否可以进行（拖动、缩放）修改
  892.             };
  893.             _this.calendarOptions.events.push(data);
  894.           });
  895.         })
  896.         .catch((error) => {
  897.           this.$message.error(error);
  898.         });
  899.     },
  900.  
  901.     // 选择日期，填写事件
  902.     selectDate: function (arg) {
  903.       let startTime = this.dateFormat("YYYY-mm-dd HH:MM", arg.start);
  904.       let endTime = this.dateFormat("YYYY-mm-dd HH:MM", arg.end);
  905.       this.dialogVisible = true;
  906.       this.form_edited_state = "add";
  907.       this.dateRange = [startTime, endTime]; // 设置当前记录事件的选择的时间段
  908.       let info = JSON.parse(localStorage.getItem("userInfo")); // 获取当前记录人信息
  909.       this.form.userName = info.username; // 设置记录人
  910.       this.form.isDone = "1"; // 默认设置为事件未完成状态
  911.       this.form.isAllDay = arg.allDay;
  912.       let calendarApi = arg.view.calendar;
  913.       calendarApi.unselect(); // 清除当前日期选择
  914.     },
  915.     // 表单确定按钮，提交事件
  916.     submitForm() {
  917.       let calendarApi = this.$refs.fullCalendar.getApi();
  918.       var startTime = this.dateFormat("YYYY-mm-dd HH:MM:SS", this.dateRange[0]);
  919.       var endTime = this.dateFormat("YYYY-mm-dd HH:MM:SS", this.dateRange[1]);
  920.       if (this.form_edited_state == "add") {
  921.         // 添加事件的后端数据请求
  922.         this.get(
  923.           "/calendar/eventRecord",
  924.           {
  925.             isAllDay: this.form.isAllDay,
  926.             dateRange: JSON.stringify([startTime, endTime]),
  927.             remark: this.form.remark,
  928.             type: this.form.type == undefined ? "" : this.form.type,
  929.             isDone: this.form.isDone == "1" ? false : true,
  930.             userName: this.form.userName,
  931.             address: this.form.address == undefined ? "" : this.form.address,
  932.             img: this.form.img == null ? "" : this.form.img,
  933.           },
  934.           ""
  935.         ).then((res) => {
  936.           this.$message.success("事件添加成功！");
  937.           this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  938.         });
  939.       } else if (this.form_edited_state == "amend") {
  940.         // 修改事件的后端数据请求
  941.         this.get(
  942.           "/calendar/submit",
  943.           {
  944.             id: this.form.id,
  945.             dateRange: JSON.stringify([startTime, endTime]),
  946.             remark: this.form.remark,
  947.             type: this.form.type == undefined ? "" : this.form.type,
  948.             isDone: this.form.isDone == "1" ? false : true,
  949.             userName: this.form.userName,
  950.             address: this.form.address == undefined ? "" : this.form.address,
  951.             img: this.form.img == null ? "" : this.form.img,
  952.             // type: this.form.category,
  953.           },
  954.           ""
  955.         ).then((res) => {
  956.           this.$message.success("修改事项成功！");
  957.           if (this.search_input == "") {
  958.             this.handleTime(calendarApi.currentData.dateProfile.activeRange);
  959.           }
  960.         });
  961.       }
  962.       this.dialogVisible = false;
  963.     },
  964.     // 表单取消按钮
  965.     cancel() {
  966.       this.form = {
  967.         id: "",
  968.         dateRange: "",
  969.         remark: "",
  970.         type: "",
  971.         isDone: false,
  972.         userName: "",
  973.         address: "",
  974.         img: "",
  975.       };
  976.       this.filelist = [];
  977.       this.dialogVisible = false;
  978.       this.form_edited_state = "";
  979.     },
  980.     // 点击事项事件
  981.     handleEventClick(clickInfo) {
  982.       this.dialogVisible = true;
  983.       this.form_edited_state = "amend"; //修改状态
  984.       var startTime = this.dateFormat(
  985.         "YYYY-mm-dd HH:MM:SS",
  986.         clickInfo.event.startStr
  987.       );
  988.       var endTime = this.dateFormat(
  989.         "YYYY-mm-dd HH:MM:SS",
  990.         clickInfo.event.endStr
  991.       );
  992.       // 设置打开对话框各部分的显示值
  993.       this.form.id = clickInfo.event.id;
  994.       this.dateRange = [clickInfo.event.start, clickInfo.event.end];
  995.       this.form.remark = clickInfo.event.title;
  996.       // 获取当前登录用户的名字
  997.       let info = JSON.parse(localStorage.getItem("userInfo"));
  998.       this.form.userName = info.username;
  999.       this.form.isDone =
  1000.         clickInfo.event.extendedProps.isDone == true ? "0" : "1";
  1001.       this.form.img = clickInfo.event.extendedProps.img;
  1002.       this.form.address = clickInfo.event.extendedProps.address;
  1003.       this.form.category =
  1004.         clickInfo.event.extendedProps.type == undefined
  1005.           ? ""
  1006.           : clickInfo.event.extendedProps.type;
  1007.       // 请求后端图片URL方法
  1008.       this.post("/get_img_url", clickInfo.event.extendedProps.img).then(
  1009.         (res) => {
  1010.           res.data.imgs.forEach((item, index) => {
  1011.             const img = "data:image/png;base64," + item;
  1012.             this.file = this.base64ImgtoFile(img); // 得到File对象
  1013.             const url =
  1014.               window.webkitURL.createObjectURL(this.file) ||
  1015.               window.URL.createObjectURL(this.file);
  1016.             this.filelist.push({
  1017.               name: res.data.origin_url[index],
  1018.               url: url,
  1019.             });
  1020.           });
  1021.         }
  1022.       );
  1023.     },
  1024.     // 事项标记已完成或改为未完成的事件
  1025.     onCheckBtnClicked(arg) {
  1026.       this.get(
  1027.         "/calendar/checked",
  1028.         { id: arg.event.id, status: arg.event.extendedProps.isDone },
  1029.         ""
  1030.       ).then((res) => {
  1031.         this.calendarOptions.events.filter((item) => {
  1032.           if (item.id == arg.event.id) {
  1033.             item.extendedProps.isDone = !arg.event.extendedProps.isDone;
  1034.             arg.event.extendedProps.isDone == true
  1035.               ? (item.className = "borderOrange")
  1036.               : (item.className = "borderGreen");
  1037.             item.backgroundColor =
  1038.               (arg.event.allDay == true ? "all_Day" : "other") != "all_Day"
  1039.                 ? arg.event.extendedProps.isDone == true
  1040.                   ? "#FFECDC"
  1041.                   : "#c2fccd"
  1042.                 : "#66b1ff";
  1043.           }
  1044.           return item;
  1045.         });
  1046.         this.$message.success("事件状态修改成功！");
  1047.       });
  1048.     },
  1049.     // 事项删除事件
  1050.     onRemoveBtnClicked(arg) {
  1051.       this.get("/calendar/remove", arg.event.id).then((res) => {
  1052.         this.calendarOptions.events = this.calendarOptions.events.filter(
  1053.           (item) => {
  1054.             return item.id != arg.event.id;
  1055.           }
  1056.         );
  1057.       });
  1058.     },
  1059.     // 当前事件绑定，此段代码可删掉
  1060.     handleEvents(events) {
  1061.       this.currentEvents = events;
  1062.     },
  1063.     // 提交上传文件
  1064.     submitFileForm() {
  1065.       /* 这里为啥会先发一个Option请求再发Post请求：这是浏览器处理跨域做的逻辑。
  1066.       CORS跨域请求会先发option请求，如果server返回access-control-allow-origin头为*或者和当前域名一致的话，
  1067.       才会进入第二段的真正请求。不然就会报 cross origin request is forbidden错误。*/
  1068.       this.$refs.upload.submit();
  1069.     },
  1070.     // 对话框图片预览放大
  1071.     handlePictureCardPreview(file) {
  1072.       this.dialogImageUrl = [file.url];
  1073.       this.img_dialogVisible = true;
  1074.     },
  1075.     // 预览图片下载到本地
  1076.     handleDownload(file) {
  1077.       // console.log(file, "@@@@");
  1078.       this.get("/bbx_img_download", file.name, "blob").then((res) => {
  1079.         var blob = new Blob([res.data], {
  1080.           type: "application/octet-stream;chartset=UTF-8",
  1081.         });
  1082.         var url = window.URL.createObjectURL(blob);
  1083.         var a = document.createElement("a");
  1084.         a.href = url;
  1085.         //文件名
  1086.         let name = res.config.params.replace("F:\\flask\\upload\\", "");
  1087.         a.download = name;
  1088.         a.click();
  1089.         window.URL.revokeObjectURL(url); // 释放掉blob对象
  1090.       });
  1091.     },
  1092.     // 下载文件
  1093.     fileDownload(file) {
  1094.       // console.log(this.urlToLink(file));
  1095.       // 判断是否为网页
  1096.       let bool = this.urlToLink(file);
  1097.       if (bool) {
  1098.         var b = document.createElement("a");
  1099.         b.setAttribute("href", file);
  1100.         b.setAttribute("target", "_blank");
  1101.         document.body.appendChild(b);
  1102.         b.click();
  1103.       } else {
  1104.         if (file != null || file != "") {
  1105.           this.get("/get_file_download", file, "blob").then((res) => {
  1106.             var blob = new Blob([res.data], {
  1107.               type: "application/octet-stream;chartset=UTF-8",
  1108.             });
  1109.             var url = window.URL.createObjectURL(blob);
  1110.             var a = document.createElement("a");
  1111.             a.href = url;
  1112.             //文件名
  1113.             let name = res.config.params.replace("F:\\flask\\upload\\", "");
  1114.             a.download = name;
  1115.             a.click();
  1116.             window.URL.revokeObjectURL(url); // 释放掉blob对象
  1117.           });
  1118.         } else {
  1119.         }
  1120.       }
  1121.     },
  1122.     // 移除对话框预览图片
  1123.     handleRemove(file) {
  1124.       let address = this.form.img.split(",");
  1125.       address = address.filter((item) => {
  1126.         return item != file.name;
  1127.       });
  1128.       address = address.join(",");
  1129.       this.form.img = address;
  1130.       const newArray = this.filelist.filter((item, index) => {
  1131.         return item.uid != file.uid;
  1132.       });
  1133.       this.filelist = newArray;
  1134.     },
  1135.     // 判断字符串是否为网页
  1136.     urlToLink(str) {
  1137.       var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  1138.       if (reg.test(str)) {
  1139.         return true;
  1140.       } else {
  1141.         return false;
  1142.       }
  1143.     },
  1144.     // 停止页面滚动
  1145.     stopMove() {
  1146.       const m = (e) => {
  1147.         e.preventDefault();
  1148.       };
  1149.       document.body.style.overflow = "hidden";
  1150.       document.addEventListener("touchmove", m, false); // 禁止页面滑动
  1151.     },
  1152.     // 开启页面滚动
  1153.     move() {
  1154.       const m = (e) => {
  1155.         e.preventDefault();
  1156.       };
  1157.       document.body.style.overflow = "auto";
  1158.       document.removeEventListener("touchmove", m, true);
  1159.     },
  1160.     // 查询功能
  1161.     onSearch() {
  1162.       let search_text = this.search_input;
  1163.       let curr_Events = this.calendarOptions.events;
  1164.       if (search_text != "") {
  1165.         this.calendarApi.changeView("list");
  1166.         let result = this.searchStr(search_text, curr_Events);
  1167.         this.calendarOptions.events = result;
  1168.         this.title = "查询结果";
  1169.       } else {
  1170.         // this.today();
  1171.       }
  1172.     },
  1173.     // 数组中匹配单个字符串的方法，传入数组支持格式[{},{}],
  1174.     searchStr(str, arr) {
  1175.       let newList = [];
  1176.       // 要匹配字符串的首个字符
  1177.       let startChar = str.charAt(0);
  1178.       // 要匹配字符串的字符长度
  1179.       let strLength = str.length;
  1180.       for (let i = 0; i < arr.length; i++) {
  1181.         // 默认数组arr中对象arr[i]不存在str
  1182.         let isExist = false;
  1183.         let obj = arr[i];
  1184.         for (let key in obj) {
  1185.           if (typeof obj[key] === "function") {
  1186.             obj[key]();
  1187.           } else {
  1188.             let keyValue = "";
  1189.             // 获取arr[i][key]的值
  1190.             if (obj[key] !== null && typeof obj[key] === "string") {
  1191.               keyValue = obj[key];
  1192.             } else if (obj[key] !== null && typeof obj[key] !== "string") {
  1193.               keyValue = JSON.stringify(obj[key]);
  1194.             }
  1195.             // arr[i][key]中的各个位置的字符与str的0位置字符startChar对比如果相等，
  1196.             // 在arr[i][key]中从j位置截取与str长度相同的字符，对比是否相等
  1197.             for (let j = 0; j < keyValue.length; j++) {
  1198.               // 把原有数据转化为小写，输入数据也转化为纯小写，实现模糊匹配,如区分大小写，可删除toLowerCase()
  1199.               if (
  1200.                 keyValue.charAt(j).toLowerCase() === startChar.toLowerCase()
  1201.               ) {
  1202.                 if (
  1203.                   keyValue
  1204.                     .substring(j)
  1205.                     .substring(0, strLength)
  1206.                     .toLowerCase() === str.toLowerCase()
  1207.                 ) {
  1208.                   // 模糊匹配到的字符存在表示arr[i]中存在str
  1209.                   isExist = true;
  1210.                   break;
  1211.                 }
  1212.               }
  1213.             }
  1214.           }
  1215.         }
  1216.         // 当arr[i]中存在str时，把arr[i]放入一个新数组
  1217.         if (isExist === true) {
  1218.           newList.push(obj);
  1219.         }
  1220.       }
  1221.       // 最后返回这个新数组
  1222.       return newList;
  1223.     },
  1224.     // 格式化时间 fmt是所需格式化的格式，如"YYYY-mm-dd HH:MM:SS",date是所需格式化的日期
  1225.     dateFormat(fmt, date) {
  1226.       let ret = "";
  1227.       date = new Date(date);
  1228.       const opt = {
  1229.         "Y+": date.getFullYear().toString(), // 年
  1230.         "m+": (date.getMonth() + 1).toString(), // 月
  1231.         "d+": date.getDate().toString(), // 日
  1232.         "H+": date.getHours().toString(), // 时
  1233.         "M+": date.getMinutes().toString(), // 分
  1234.         "S+": date.getSeconds().toString(), // 秒
  1235.       };
  1236.       for (let k in opt) {
  1237.         ret = new RegExp("(" + k + ")").exec(fmt);
  1238.         if (ret) {
  1239.           fmt = fmt.replace(
  1240.             ret[1],
  1241.             ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
  1242.           );
  1243.         }
  1244.       }
  1245.       return fmt;
  1246.     },
  1247.     //日期格式转换
  1248.     formatTimer: function (value) {
  1249.       let date = new Date(value);
  1250.       let y = date.getFullYear();
  1251.       let MM = date.getMonth() + 1;
  1252.       MM = MM < 10 ? "0" + MM : MM;
  1253.       let d = date.getDate();
  1254.       d = d < 10 ? "0" + d : d;
  1255.       let h = date.getHours();
  1256.       h = h < 10 ? "0" + h : h;
  1257.       let m = date.getMinutes();
  1258.       m = m < 10 ? "0" + m : m;
  1259.       let s = date.getSeconds();
  1260.       s = s < 10 ? "0" + s : s;
  1261.       return h + ":" + m;
  1262.     },
  1263.     // 获取当前时间戳
  1264.     getCurrentTime() {
  1265.       let date = new Date();
  1266.       let year = date.getFullYear();
  1267.       let month = date.getMonth() + 1;
  1268.       let day = date.getDate();
  1269.       let hour = date.getHours();
  1270.       let minute = date.getMinutes();
  1271.       let second = date.getSeconds();
  1272.       month = month < 10 ? "0" + month : month; // 可注释掉
  1273.       day = day < 10 ? "0" + day : day;
  1274.       hour = hour < 10 ? "0" + hour : hour; // 可注释掉
  1275.       minute = minute < 10 ? "0" + minute : minute;
  1276.       second = second < 10 ? "0" + second : second;
  1277.       return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
  1278.     },
  1279.     // 地址上传地址
  1280.     address_beforeupload(file, filelist) {
  1281.       let formData = new FormData();
  1282.       formData.append("file", file.raw);
  1283.       this.upload("/get_file_url", formData, "").then((res) => {
  1284.         this.form.address = res.data.path;
  1285.       });
  1286.     },
  1287.     /** 图片上传功能 */
  1288.     beforeupload(file, filelist) {
  1289.       this.filelist = filelist;
  1290.       let formData = new FormData();
  1291.       formData.append("file", file.raw);
  1292.       // 请求数据
  1293.       this.upload("/get_file_url", formData, "").then((res) => {
  1294.         if (this.form.img == null) {
  1295.           this.form.img = res.data.path;
  1296.         } else {
  1297.           this.form.img = this.form.img + "," + res.data.path;
  1298.         }
  1299.       });
  1300.     },
  1301.     // base64字段变成blob二进制数据，关于图片的
  1302.     base64ImgtoFile(dataurl, filename = "file") {
  1303.       const arr = dataurl.split(",");
  1304.       const mime = arr[0].match(/:(.*?);/)[1];
  1305.       const suffix = mime.split("/")[1];
  1306.       const bstr = atob(arr[1]);
  1307.       let n = bstr.length;
  1308.       const u8arr = new Uint8Array(n);
  1309.       while (n--) {
  1310.         u8arr[n] = bstr.charCodeAt(n);
  1311.       }
  1312.       return new File([u8arr], `${filename}.${suffix}`, {
  1313.         type: mime,
  1314.       });
  1315.     },
  1316.   },
  1317. };
  1318. </script>
  1319.  
  1320. <!-- 样式1，本地样式 -->
  1321. <style lang="scss" scoped>
  1322. .calendar_matters >>> .el-dialog__body {
  1323.   height: 450px;
  1324.   overflow: auto;
  1325. }
  1326. .calendar_details >>> .el-textarea__inner {
  1327.   font-weight: bold;
  1328.   font-family: Arial, Helvetica, sans-serif;
  1329.   color: #000;
  1330.   height: 120px;
  1331. }
  1332. .calendar_matters >>> .el-dialog__header {
  1333.   border-radius: 5px;
  1334.   background-color: #cae1f7;
  1335.   align-content: center;
  1336.   padding: 15px;
  1337.   font-weight: bold;
  1338.   border-bottom-style: solid;
  1339.   border-bottom-width: 1px;
  1340.   border-bottom-color: aliceblue;
  1341. }
  1342. .fc-daygrid-day-top p {
  1343.   font-size: 13px;
  1344.   color: #606266;
  1345.   margin-right: 10px;
  1346. }
  1347. .fc .fc-toolbar.fc-header-toolbar {
  1348.   margin-bottom: 10px;
  1349. }
  1350. .el-main {
  1351.   padding: 8px 10px 8px 10px;
  1352. }
  1353. .userName >>> .el-input__inner {
  1354.   font-weight: bold;
  1355.   color: #000000ab;
  1356. }
  1357. .attachment >>> .el-form-item__content {
  1358.   display: flex;
  1359. }
  1360. .upload-demo >>> .el-upload-list--picture-card .el-upload-list__item {
  1361.   height: 120px;
  1362.   width: 120px;
  1363. }
  1364. .upload-demo >>> .el-upload--picture-card {
  1365.   height: 120px;
  1366.   width: 120px;
  1367.   line-height: 120px;
  1368. }
  1369. .dateRange >>> .el-range-input {
  1370.   font-weight: bold;
  1371.   color: #080808;
  1372. }
  1373. .calendar >>> .fc-header-toolbar {
  1374.   margin-bottom: 5px;
  1375. }
  1376. .calendar >>> .borderGreen {
  1377.   border-left: 5px solid #44bb08 !important;
  1378.   border-radius: 0;
  1379.   border: none;
  1380.   white-space: normal;
  1381.   overflow: hidden;
  1382.   text-overflow: ellipsis;
  1383.   span {
  1384.     color: #000;
  1385.     font-weight: bold;
  1386.   }
  1387. }
  1388. .calendar >>> .borderOrange {
  1389.   border-left: 5px solid #fe9b02 !important;
  1390.   border-radius: 0;
  1391.   border: none;
  1392.   white-space: normal;
  1393.   overflow: hidden;
  1394.   span {
  1395.     color: #000;
  1396.     font-weight: bold;
  1397.   }
  1398. }
  1399. .calendar >>> .borderOrigin {
  1400.   border-radius: 0;
  1401.   border: none;
  1402.   white-space: normal;
  1403.   overflow: hidden;
  1404.   text-overflow: ellipsis;
  1405.   max-height: 150px;
  1406.   span {
  1407.     color: #000;
  1408.     font-weight: bold;
  1409.   }
  1410. }
  1411. .calendar >>> .fc-event-title {
  1412.   font-weight: bold;
  1413.   color: #000;
  1414.   overflow: hidden;
  1415. }
  1416. .calendar >>> .fc-event-time {
  1417.   font-weight: bold;
  1418.   color: #000;
  1419. }
  1420. .calendar >>> .fc-daygrid-event-dot {
  1421.   border: none;
  1422. }
  1423. .popover {
  1424.   .el-popover {
  1425.     max-height: 350px;
  1426.   }
  1427. }
  1428. .popover_title {
  1429.   font-weight: bold;
  1430.   margin-bottom: 3px;
  1431. }
  1432. .popover_content {
  1433.   color: #000;
  1434.   font-size: 13px;
  1435. }
  1436. .popoverShowImg {
  1437.   width: auto;
  1438.   cursor: pointer;
  1439.   >>> .el-image__inner {
  1440.     max-height: 200px;
  1441.   }
  1442. }
  1443. .link {
  1444.   color: #000;
  1445.   font-size: 12px;
  1446.   font-weight: bold;
  1447.   margin-top: 2px;
  1448.   & :hove {
  1449.     color: #66b1ff;
  1450.   }
  1451. }
  1452. .fc_btns {
  1453.   padding: 10px 12px;
  1454. }
  1455. .el-icon-search {
  1456.   line-height: 2.5;
  1457.   margin-right: 8px;
  1458. }
  1459. .fc-right {
  1460.   display: flex;
  1461.   flex: 1.5;
  1462.   justify-content: flex-end;
  1463. }
  1464. .tip-content {
  1465.   line-height: 2.2;
  1466.   margin-right: 4px;
  1467.   font-weight: 600;
  1468. }
  1469. .title {
  1470.   margin: 0px 5px;
  1471.   line-height: 1.6;
  1472. }
  1473. .calendar_matters {
  1474.   width: 100%;
  1475. }
  1476. .calendar >>> .el-popover__reference {
  1477.   display: grid;
  1478.   max-height: 150px;
  1479.   overflow: auto;
  1480. }
  1481. </style>
  1482.   <!-- 样式2 -->
  1483.   <style>
  1484. .el-popover__reference::-webkit-scrollbar {
  1485.   /*滚动条整体样式*/
  1486.   width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  1487.   height: 1px;
  1488. }
  1489. .el-popover__reference::-webkit-scrollbar-thumb {
  1490.   /*滚动条里面小方块*/
  1491.   border-radius: 10px;
  1492.   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  1493.   background: #535353;
  1494. }
  1495. .el-popover__reference::-webkit-scrollbar-track {
  1496.   /*滚动条里面轨道*/
  1497.   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  1498.   border-radius: 2px;
  1499.   background: #ededed;
  1500. }
  1501. .popover .el-popover__title {
  1502.   font-weight: bold;
  1503.   margin-bottom: 5px;
  1504.   border-bottom: solid 1px;
  1505.   padding: 2px;
  1506. }
  1507. @media only screen and (max-width: 767px) {
  1508.   .fc-toolbar {
  1509.     flex-direction: column;
  1510.   }
  1511.   .fc-left {
  1512.     flex: 1 !important;
  1513.   }
  1514.   .tips {
  1515.     flex: 1 !important;
  1516.     justify-content: center;
  1517.     margin-bottom: 5px;
  1518.   }
  1519.   .fc-center {
  1520.     flex: 1 !important;
  1521.     margin: 5px 0px;
  1522.   }
  1523.   .fc-right {
  1524.     flex: 1;
  1525.     justify-content: center !important;
  1526.     margin-bottom: 5px;
  1527.   }
  1528.   .tip-content {
  1529.     line-height: 1 !important;
  1530.     margin-right: 4px;
  1531.     font-weight: 600;
  1532.   }
  1533.   .title {
  1534.     font-size: 20px;
  1535.     font-weight: 700;
  1536.     line-height: 1.9 !important;
  1537.   }
  1538.   .fc-list-table {
  1539.     word-break: break-all;
  1540.     overflow: auto;
  1541.   }
  1542.   .fc-list-event-title {
  1543.     overflow: auto;
  1544.   }
  1545.   .el-dialog {
  1546.     width: 90%;
  1547.   }
  1548.   .dateRange {
  1549.     overflow: auto;
  1550.   }
  1551. }
  1552. </style>

5、 后端Flask源码

  1. from flask import Flask, render_template,\
  2.     request, jsonify, make_response, Response, send_file,session,send_from_directory
  3. from flask_cors import CORS
  4. import datetime
  5. import json
  6. import pypyodbc
  7. from collections import deque
  8. import os
  9. import base64
  10. import hashlib
  11. import xlwt
  12. import openpyxl
  13. import xlrd
  14.  
  15. app = Flask(__name__,
  16.             static_folder='./templates/static',  # 设置静态文件夹目录
  17.             template_folder="./templates")  # 设置vue编译输出目录dist文件夹，为Flask模板文件目录
  18. # 解决后端跨域问题，不然会在前端网页控制台显示“ccess to XMLHttpRequest at 'http://localhost:8080/api/login' from origin 'null' has been blocked”
  19. CORS(app, supports_credentials=True)
  20. session = {}
  21.  
  22. @app.route('/')
  23. def index():
  24.     return render_template('index.html',name='index') #使用模板插件，引入index.html。此处会自动Flask模板文件目录寻找index.html文件。
  25.  
  26. @app.route('/calendar/eventRecord', methods=["GET", "POST"])
  27. def calendar_evnetRecord():
  28.     params = request.values
  29.     date = json.loads(params["dateRange"])
  30.     startTime = datetime.datetime.strptime(date[0],"%Y-%m-%d %H:%M:%S")
  31.     endTime = datetime.datetime.strptime(date[1],"%Y-%m-%d %H:%M:%S")
  32.     # print(params)
  33.     conn = get_conn()
  34.     cur = conn.cursor()
  35.     sql = "insert into 记事本(allDay, startStr,endStr, title, type, isDone, userName,img,address) values(%s, '%s','%s','%s','%s',%s,'%s','%s','%s')" \
  36.           %(params["isAllDay"],startTime,endTime,params["remark"],params["type"],params["isDone"],params["userName"],params["img"],params["address"])
  37.     cur.execute(sql)
  38.     cur.commit()
  39.     cur.close()
  40.     conn.close()
  41.     return jsonify({"code":200})
  42.  
  43. @app.route('/calendar/getCalendarList', methods=["GET", "POST"])
  44. def calendar_getCalendarList():
  45.     params = request.values
  46.     conn = get_conn()
  47.     cur = conn.cursor()
  48.     sql = "select ID,title,Format(startStr, 'yyyy-MM-dd HH:mm:ss'),Format(endStr, 'yyyy-MM-dd HH:mm:ss'),allDay,isDone,img,address,type " \
  49.           "from 记事本 "
  50.     cur.execute(sql)
  51.     data = cur.fetchall()
  52.     cur.close()
  53.     conn.close()
  54.     return jsonify({"code":200,"data":data})
  55.  
  56. @app.route('/calendar/submit', methods=["GET", "POST"])
  57. def calendar_submit():
  58.     params = request.values
  59.     date = json.loads(params["dateRange"])
  60.     startTime = datetime.datetime.strptime(date[0],"%Y-%m-%d %H:%M:%S")
  61.     endTime = datetime.datetime.strptime(date[1],"%Y-%m-%d %H:%M:%S")
  62.     conn = get_conn()
  63.     cur = conn.cursor()
  64.     sql="update 记事本 set startStr='%s',endStr='%s',title='%s',type='%s',isDone=%s,userName='%s',img='%s',address='%s' where ID=%s"\
  65.         %(startTime,endTime,params["remark"],params["type"],params["isDone"],params["userName"],params["img"],params["address"]
  66.           ,params["id"])
  67.     cur.execute(sql)
  68.     cur.commit()
  69.     cur.close()
  70.     conn.close()
  71.     return jsonify({"code":200})
  72.  
  73.  
  74. @app.route('/calendar/checked', methods=["GET", "POST"])
  75. def calendar_checked():
  76.     params = request.values
  77.     status = True if params["status"] == "false" else False
  78.     conn = get_conn()
  79.     cur = conn.cursor()
  80.     sql = "update 记事本 set isDone=%s where ID=%s" %(status,params["id"])
  81.     cur.execute(sql)
  82.     cur.commit()
  83.     cur.close()
  84.     conn.close()
  85.     return jsonify({"code": 200, "info":"状态修改成功！"})
  86.  
  87. @app.route('/calendar/remove', methods=["GET", "POST"])
  88. def calendar_remove():
  89.     matters_id = request.values.get("0")
  90.     conn = get_conn()
  91.     cur = conn.cursor()
  92.     sql = "delete from 记事本 where ID=%s" % (matters_id)
  93.     try:
  94.         cur.execute(sql)
  95.         cur.commit()
  96.         return jsonify({"code": 200, "info":"删除成功！"})
  97.     except Exception as e:
  98.         return jsonify({"code": 200, "info":"发生错误！错误代码："+str(e)})
  99.     finally:
  100.         cur.close()
  101.         conn.close()
  102.  
  103. @app.route('/calendar/updateTime', methods=["GET", "POST"])
  104. def calendar_updateTime():
  105.     params = request.values
  106.     conn = get_conn()
  107.     cur = conn.cursor()
  108.     sql = "update 记事本 set startStr='%s',endStr='%s' where ID=%s" %(params["Start"],params["End"],params["id"])
  109.     cur.execute(sql)
  110.     cur.commit()
  111.     cur.close()
  112.     conn.close()
  113.     return jsonify({"code": 200, "info": "事件时间修改成功！"})
  114.  
  115.  
  116. @app.route('/get_file_download', methods=["GET", "POST"])
  117. def get_file_download():
  118.     file_url = request.values.get("0")
  119.     with open(file_url, 'rb') as file_f:
  120.         res = make_response(file_f.read())  # 用flask提供的make_response 方法来自定义自己的response对象
  121.         # res.headers['Content-Type'] = 'image/jpg'  # 设置response对象的请求头属性'Content-Type'为图片格式
  122.     return res
  123.  
  124.  
  125. if __name__ == '__main__':
  126.     # 0.0.0.0 表示同一个局域网均可访问，也可以替换成本机地址：通过命令行命令：ipcofig 获取
  127.     app.run(host='0.0.0.0', port='5000', debug=True)

6 、数据库数据(ACCESS)格式

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发