From 72ea08f6ca504e184a13f3fefe1e5e3a9f20918a Mon Sep 17 00:00:00 2001
From: muqing <luwenlongnet@163.com>
Date: Wed, 10 Jun 2020 22:48:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BA=86=E9=98=B4=E5=8E=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=91=A8=E5=85=AD=E5=91=A8=E6=97=A5?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                         |   1 +
 ruoyi-ui/src/main.js                          |   6 +
 .../src/views/benyi/calendarshow/index.vue    |  12 +-
 .../src/views/benyi/calendarshow/index123.vue | 406 ++++++++++++++++++
 ruoyi/pom.xml                                 |  36 +-
 5 files changed, 441 insertions(+), 20 deletions(-)
 create mode 100644 ruoyi-ui/src/views/benyi/calendarshow/index123.vue

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 559037656..8d7d02371 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -67,6 +67,7 @@
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
+    "vue-lunar-full-calendar": "^1.3.2",
     "vue-quill-editor": "3.0.6",
     "vue-router": "3.0.2",
     "vue-simple-uploader": "^0.7.4",
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 27a0c112f..a7b5a8fcb 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -41,6 +41,12 @@ Vue.prototype.handleTree = handleTree
 Vue.prototype.$video = Video
 Vue.use(VideoPlayer);
 
+
+import LunarFullCalendar from "vue-lunar-full-calendar";
+Vue.use(LunarFullCalendar);
+
+
+
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });
 }
diff --git a/ruoyi-ui/src/views/benyi/calendarshow/index.vue b/ruoyi-ui/src/views/benyi/calendarshow/index.vue
index 8e447d4c6..5bacf2d60 100644
--- a/ruoyi-ui/src/views/benyi/calendarshow/index.vue
+++ b/ruoyi-ui/src/views/benyi/calendarshow/index.vue
@@ -97,8 +97,8 @@ export default {
       calendarPlugins: [
         // plugins must be defined in the JS
         dayGridPlugin,
-        timeGridPlugin,
-        interactionPlugin, // needed for dateClick
+        //timeGridPlugin,
+        //interactionPlugin, // needed for dateClick
         listPlugin
       ],
       calendarWeekends: true,
@@ -140,7 +140,15 @@ export default {
 @import "~@fullcalendar/list/main.css";
 .calendar {
   width: 820px;
+  height: 100%;
 }
+.fc-widget-content {
+          .fc-sun,
+          .fc-sat {
+            background: rgba(245, 246, 248, 0.6);
+            //background: rgba(109, 113, 121, 0.6);
+          }
+		}
 .xs-btns-style {
   @media screen and (max-width: 768px) {
     display: flex;
diff --git a/ruoyi-ui/src/views/benyi/calendarshow/index123.vue b/ruoyi-ui/src/views/benyi/calendarshow/index123.vue
new file mode 100644
index 000000000..b50213d4f
--- /dev/null
+++ b/ruoyi-ui/src/views/benyi/calendarshow/index123.vue
@@ -0,0 +1,406 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="24">
+      <el-col :span="4" :xs="24">
+        <el-row class="xs-btns-style" :gutter="10">
+          <el-col v-for="item in btns" :key="item.title">
+            <el-button
+              type="primary"
+              class="btn no-border-btn"
+              :style="{background: `${item.color}`}"
+            >{{item.title}}</el-button>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="lunarFullCalendar">
+          <div class="full-calendar">
+            <lunar-full-calendar
+              :events="events" 
+              ref="calendar" 
+              @event-selected="eventSelected" 
+              :config="config" 
+              @day-click="dayClick" 
+            ></lunar-full-calendar>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { LunarFullCalendar } from "vue-lunar-full-calendar";
+//import FullCalendar from "@fullcalendar/vue";
+//import dayGridPlugin from "@fullcalendar/daygrid";
+//import timeGridPlugin from "@fullcalendar/timegrid";
+//import interactionPlugin from "@fullcalendar/interaction";
+//import listPlugin from "@fullcalendar/list";
+import { getAllSchoolCalendars } from "@/api/benyi/calendar";
+export default {
+  components: {
+    //name: "fullcalendar_page",
+    LunarFullCalendar
+  },
+  data() {
+        let self = this;
+        return {
+          btns: [
+            {
+              color: "#52c41a",
+              title: "家长参与"
+            },
+            {
+              color: "#135200",
+              title: "大型活动"
+            },
+            {
+              color: "#1890ff",
+              title: "教学活动"
+            },
+            {
+              color: "#eb2f96",
+              title: "节假日"
+            }
+          ],
+          events: [
+          {
+              title  : 'event1',
+              start  : '2020-06-06',
+          },
+          {
+              title  : 'event2',
+              start  : '2020-06-08',
+              end    : '2020-06-12',
+          },
+          {
+              title  : 'event3',
+              start  : '2020-06-20T12:30:00',
+              allDay : false,
+          },{id: 6, title: "端午节", start: "2020-06-25", end: "2020-06-28", color: "#eb2f96"}
+        ],
+            config: {
+              lunarCalendar: true,//控制中文日历是否显示为真
+              //eventLimitText: '更多',
+              locale:'zh-cn',//中文
+              //eventColor: 'white',
+              buttonText: {
+                today: '今天',
+                month: '月',
+                week: '周',
+                day: '日',
+                list: "周列表"
+              },
+              calendarEvents: [],
+              header: {
+                // left: 'prevYear,prev,next,nextYear',
+                // center: 'title',
+                // right: 'hide,custom,today,agendaWeek'
+                left: "prev,next today",
+                center: "title",
+                right: "hide, custom, month,agendaWeek,agendaDay, listWeek"
+              },
+              eventLimit: true, // 一天中显示多少条事件，多了隐藏
+              firstDay: 0, // 控制周一周日那个在前面
+              defaultView: 'month',
+              allDaySlot: true, // agenda视图下是否显示all-day
+              allDayText: '全天', // agenda视图下all-day的显示文本
+              timezone: 'local', // 时区默认本地的
+              slotLabelFormat: 'HH:mm', // 周视图和日视同的左侧时间显示    
+              //分页方法
+              viewRender(view, element) {
+                self.viewRender(view, element);
+              },
+                    customButtons: { // 新增按钮
+                      hide: {
+                        text: '隐藏农历',
+                        click: function () {
+                          self.$refs.calendar.fireMethod('option', {
+                            lunarCalendar: false
+                          })
+                          self.$refs.calendar.fireMethod('option', {
+                            header: {
+                              left: 'prevYear,prev,next,nextYear',
+                              center: 'title',
+                              right: 'show, custom, month,agendaWeek,agendaDay, listWeek'
+                            }
+                          })
+                        }
+                      },
+                      show: {
+                        text: '显示农历',
+                        click: function () {
+                          self.$refs.calendar.fireMethod('option', {
+                            lunarCalendar: true
+                          })
+                          self.$refs.calendar.fireMethod('option', {
+                            header: {
+                              left: 'prevYear,prev,next,nextYear',
+                              center: 'title',
+                              right: 'hide, custom, month,agendaWeek,agendaDay, listWeek'
+                            }
+                          })
+                        }
+                      },
+                    }
+            },
+            queryParams: {}
+          }
+       },
+       created() {
+          getAllSchoolCalendars(this.queryParams).then(response => {
+            this.events = response.calendarData;
+          });
+        },
+  methods: {
+    // 注释的是功能是可以修改对应的功能值属性，比如设置  eventLimit为 false
+    //  this.$refs.calendar.fireMethod('option',{
+    //      eventLimit :false
+    //  })
+    dayClick (date, jsEvent, view) {
+      // 点击当天的事件
+      alert('农历数据：' + JSON.stringify(window.lunar(date._d)))
+      console.log(date, jsEvent, 'dayClick')
+    },
+    eventSelected (event, jsEvent, view) {
+      // 选中事件
+      console.log(event, jsEvent, 'eventSelected')
+    },
+    viewRender (view, element) {
+      console.log(view, element, 'viewRender')
+    },
+    enter () {
+      this.$router.push('/explain')
+    }
+  }
+};
+// export default {
+//   name: "fullcalendar_page",
+//   components: {
+//     LunarFullCalendar
+//   },
+//   data() {
+//       return {
+//         events: [],
+//         config: {
+//           lunarCalendar: true   //(Control whether the Chinese calendar shows true, unrealistic flase, default true.)
+//         },
+//       }
+//     },
+       
+// };
+// window.lunar(date)
+</script>
+
+<style scoped lang="scss">
+$color: #45b984;
+.lunarFullCalendar {
+  min-width: 900px;
+  height: 100%;
+  background: #fff;
+  //   .top {
+  //     height: 100px;
+  //     h2 {
+  //       text-align: center;
+  //       font-size: 15px;
+  //     }
+  //     div {
+  //       font-size: 13px;
+  //     }
+  //   }
+  .full-calendar {
+    padding: 20px;
+    height: calc(100% - 30px);
+    /deep/ {
+      .fc-unthemed thead,
+      .fc-unthemed .fc-content,
+      .fc-unthemed th,
+      .fc-unthemed td,
+      .fc-unthemed tbody,
+      .fc-unthemed .fc-row,
+      .fc-unthemed .fc-list-view,
+      .fc-unthemed .fc-popover,
+      .fc-unthemed .fc-divider,
+      .fc-unthemed .fc-list-heading td {
+        border-color: #eaecf1;
+      }
+      .fc-header-toolbar {
+        height: 30px;
+        margin-bottom: 0;
+        line-height: 30px;
+        h2 {
+          font-size: 24px;
+          color: #000;
+        }
+      }
+      .fc-button {
+        height: 30px;
+        background: #fff;
+        border-color: #fff;
+        box-shadow: none;
+        padding: 0;
+      }
+      .fc-today-button {
+        font-size: 15px;
+        color: $color;
+      }
+      .fc-show-button,
+      .fc-hide-button {
+        position: relative;
+        width: 80px;
+        border: 1px solid #bbbfcd;
+        border-radius: 20px;
+        font-size: 15px;
+        color: #000;
+      }
+      .fc-next-button,
+      .fc-prev-button {
+        color: #7d8292;
+      }
+      .fc-button-group {
+        margin-left: 20px;
+        font-size: 15px;
+        button {
+          width: 80px;
+          color: #000;
+          border: 1px solid #bbbfcd;
+        }
+        button:first-child {
+          border-top-left-radius: 20px;
+          border-bottom-left-radius: 20px;
+        }
+        button:last-child {
+          border-top-right-radius: 20px;
+          border-bottom-right-radius: 20px;
+        }
+        .fc-state-active {
+          background: $color;
+          color: #fff;
+          text-shadow: none;
+        }
+      }
+      .fc-agendaDay-view,
+      .fc-month-view,
+      .fc-agendaWeek-view {
+        .fc-widget-content {
+          .fc-sun,
+          .fc-sat {
+            background: rgba(245, 246, 248, 0.6);
+          }
+          .fc-day-number {
+            font-size: 15px;
+            letter-spacing: 0;
+            line-height: 13px;
+            float: left;
+          }
+          .fc-day-top {
+            padding: 15px 12px 0 12px;
+          }
+          .fc-day-cnTerm,
+          .fc-day-cnDate {
+            font-size: 12px;
+            color: #7d8292;
+            float: right;
+          }
+          .fc-more {
+            font-size: 12px;
+            color: #7d8292;
+          }
+          .fc-event {
+            cursor: pointer;
+            font-size: 12px;
+            color: #000;
+            background-color: rgba($color: $color, $alpha: 0.15) !important;
+            border: 1px solid rgba($color: $color, $alpha: 0.15) !important;
+            border-left: 2px solid rgba($color: $color, $alpha: 0.15) !important;
+            border-radius: 0;
+          }
+          .fc-day-grid-event {
+            padding: 1px 0 1px 5px;
+          }
+        }
+      }
+      .fc-agendaWeek-view,
+      .fc-agendaDay-view {
+        .fc-axis {
+          font-size: 15px;
+        }
+        .fc-title {
+          font-size: 15px;
+          color: $color;
+        }
+      }
+      .fc-month-view {
+        .fc-event {
+          &.fc-not-start {
+            border-left: 1px solid rgba($color: $color, $alpha: 0.1) !important;
+          }
+        }
+      }
+      .fc-agendaDay-view {
+        .fc-head {
+          table {
+            margin: 15px 0;
+          }
+          .fc-day-header {
+            display: none;
+          }
+        }
+      }
+      .fc-head {
+        .fc-day-header,
+        .fc-widget-header,
+        .fc-head-container {
+          border-top-color: #fff;
+          border-left-color: #fff;
+          border-right-color: #fff;
+        }
+        table {
+          margin: 10px 0 15px 0;
+          font-size: 15px;
+          color: #000;
+        }
+      }
+    }
+  }
+}
+.tip {
+  color: $color;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+//============================
+.calendar {
+  width: 820px;
+}
+.xs-btns-style {
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-wrap: wrap;
+    .el-col {
+      width: auto;
+    }
+  }
+  @media screen and (min-width: 769px) {
+  }
+  .el-col {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+}
+.btn {
+  width: 96px;
+}
+.no-border-btn {
+  border: none;
+}
+.fc-header-toolbar {
+  @media screen and (max-width: 768px) {
+    .fc-left > .fc-today-button, .fc-right > .fc-listWeek-button {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/ruoyi/pom.xml b/ruoyi/pom.xml
index 3d3586f10..441fcaba2 100644
--- a/ruoyi/pom.xml
+++ b/ruoyi/pom.xml
@@ -63,26 +63,26 @@
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
 		</dependency>
-		
+
 		<!-- spring-boot-devtools -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-devtools</artifactId>
 			<optional>true</optional> <!-- 表示依赖不会传递 -->
 		</dependency>
-		
+
 		<!-- spring security 安全认证 -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-security</artifactId>
 		</dependency>
-		
+
 		<!-- redis 缓存操作 -->
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-data-redis</artifactId>
 		</dependency>
-		
+
 		<!-- pool 对象池 -->
 		<dependency>
 			<groupId>org.apache.commons</groupId>
@@ -102,7 +102,7 @@
 			<artifactId>mybatis-spring-boot-starter</artifactId>
 			<version>${mybatis.spring.boot.starter.version}</version>
 		</dependency>
-		
+
 		<!-- pagehelper 分页插件 -->
 		<dependency>
 			<groupId>com.github.pagehelper</groupId>
@@ -129,14 +129,14 @@
 			<artifactId>commons-io</artifactId>
 			<version>${commons.io.version}</version>
 		</dependency>
-		
+
 		<!--文件上传工具类 -->
 		<dependency>
 			<groupId>commons-fileupload</groupId>
 			<artifactId>commons-fileupload</artifactId>
 			<version>${commons.fileupload.version}</version>
 		</dependency>
-		
+
 		<!-- 解析客户端操作系统、浏览器等 -->
 		<dependency>
 			<groupId>eu.bitwalker</groupId>
@@ -156,14 +156,14 @@
 			<groupId>org.springframework</groupId>
 			<artifactId>spring-context-support</artifactId>
 		</dependency>
-		
+
         <!--Token生成与解析-->
 		<dependency>
 			<groupId>io.jsonwebtoken</groupId>
 			<artifactId>jjwt</artifactId>
 			<version>${jwt.version}</version>
 		</dependency>
-		
+
 		<!-- swagger2-->
 		<dependency>
 			<groupId>io.springfox</groupId>
@@ -180,44 +180,44 @@
 			    </exclusion>
 			</exclusions>
 		</dependency>
-		
+
 		<!--防止进入swagger页面报类型转换错误，排除2.9.2中的引用，手动增加1.5.21版本-->
         <dependency>
             <groupId>io.swagger</groupId>
             <artifactId>swagger-annotations</artifactId>
             <version>1.5.21</version>
         </dependency>
-        
+
         <dependency>
             <groupId>io.swagger</groupId>
             <artifactId>swagger-models</artifactId>
             <version>1.5.21</version>
         </dependency>
-        
+
 		<!-- swagger2-UI-->
 		<dependency>
 			<groupId>io.springfox</groupId>
 			<artifactId>springfox-swagger-ui</artifactId>
 			<version>${swagger.version}</version>
 		</dependency>
-		
+
         <!-- 获取系统信息 -->
 		<dependency>
 			<groupId>com.github.oshi</groupId>
 			<artifactId>oshi-core</artifactId>
 			<version>${oshi.version}</version>
 		</dependency>
-		
+
 		<dependency>
 			<groupId>net.java.dev.jna</groupId>
 			<artifactId>jna</artifactId>
 		</dependency>
-		
+
 		<dependency>
 			<groupId>net.java.dev.jna</groupId>
 			<artifactId>jna-platform</artifactId>
 		</dependency>
-		
+
 		<!-- excel工具 -->
 		<dependency>
 			<groupId>org.apache.poi</groupId>
@@ -231,7 +231,7 @@
 			<artifactId>velocity</artifactId>
 			<version>${velocity.version}</version>
 		</dependency>
-		
+
         <!-- 定时任务 -->
 		<dependency>
 			<groupId>org.quartz-scheduler</groupId>
@@ -315,4 +315,4 @@
 		</pluginRepository>
 	</pluginRepositories>
 
-</project>
\ No newline at end of file
+</project>