完成课表日历

TEAMModelOS.SmartClass/ClientApp/view/smart-class/LiveBroadcast.vue

@@ -1,20 +1,77 @@
 <template>
   <div class="container">
     <div class="review-main">
-      <h1>往届回顾1231</h1>
+      <div class="condition-wrap">
+        <div class="condition-wrap-left">
+          <Button type="primary">新媒体新技术</Button>
+          <Button type="success">创新实验室</Button>
+        </div>
+        <div class="condition-wrap-right">
+          <Select v-model="yearDefault" size="large" style="width:100px">
+            <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
+          </Select>
+          <Select v-model="monthDefault" size="large" style="width:100px">
+            <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
+          </Select>
+          <Button size="large">返回今天</Button>
+        </div>
+      </div>
+      <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay"></full-calendar>
     </div>
   </div>
 </template>
 <script>
+  import FullCalendar from 'vue-fullcalendar'
   export default {
     components: {
+      FullCalendar
     },
     data() {
       return {
+        yearDefault:'2019年',
+        years: [
+          "2012年",
+          "2013年",
+          "2014年",
+          "2015年",
+          "2016年",
+          "2017年",
+          "2018年",
+          "2019年",
+          "2020年",
+          "2021年",
+          "2022年",
+          "2023年",
+          "2024年",
+        ],
+        monthDefault: '1月',
+        monthes: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '11月',
+          '12月',
+        ],
+        fcEvents: [
+          {
+            title: 'Sunny Out of Office',
+            start: '2019-05-5',
+            end: '2019-05-5'
+          }
+        ]
       }
     },
     methods: {
-
+      getDay(day, jsEvent) {
+        console.log(day);
+        console.log(jsEvent);
+      }
 
 
     },
@@ -27,7 +84,7 @@
     height: 100% !important;
     user-select: none;
   }
-
+  
   .main-content {
     background:rgb(248,248,248) !important;
   }
@@ -41,22 +98,41 @@
   .review-main {
     background:#fff;
     width:100%;
-    height:600px;
+    padding:10px 25px;
   }
-    .container .left-box {
-      width:25%;
-      height:600px;
-      background:#fff;
+    .review-main /deep/ .full-calendar-header {
+      display:none;
     }
-
-    .container .right-box {
-      width:73%;
-      height:600px;
-      background:#fff;
+    .review-main /deep/ .comp-full-calendar {
+      padding:0px;
+      max-width:1200px;
     }
-
-  .center-col {
-
+    .review-main /deep/ .weeks {
+      background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
+      background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
+      background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
+      background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
+      height: 40px;
+      line-height: 40px;
+    }
+    .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
+      background:#dfe6ec;
+    }
+    .review-main /deep/ .week-row > .not-cur-month {
+      background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法（必须放在最后） */
+      background-size: 20px 20px;
+    }
+    .review-main /deep/ .week-row {
+      height:140px;
+    }
+    .review-main /deep/ .events-week {
+      height:140px;
+    }
+    
+   .condition-wrap {
+    display:flex;
+    flex-direction:row;
+    justify-content : space-between;
   }
 
 </style>

TEAMModelOS.SmartClass/package.json

@@ -26,6 +26,7 @@
     "jwt-decode": "^2.2.0",
     "less": "^3.9.0",
     "vue": "^2.6.9",
+    "vue-fullcalendar": "^1.0.9",
     "vue-infinite-loading": "^2.4.3",
     "vue-router": "^3.0.2",
     "vue-scroll": "^2.1.9",