1

src/components/stuMan/eventsCalendar.vue

+<style>
+    .eventsCalendar_Form .el-calendar-day {
+        position: relative;
+    }
+    .eventsCalendar_Form .calendar-day {
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+    }
+    .eventsCalendar_Form .el-calendar-table .el-calendar-day {
+        padding: 5px;
+        height: 120px;
+    }
+    .eventsCalendar_Form .is-selected {
+        font-size: 10px;
+        margin-top: 5px;
+    }
+</style>
+<template>
+  <div>
+      <div class="eventsCalendar_Form">
+        <template>
+            <el-calendar v-model="value" id="calendar" style="margin-bottom:40px;">
+            <template slot="dateCell" slot-scope="{date, data}">
+                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
+                <div v-for="(item,index) in calendarData" :key="index">
+                    <div v-if="item.Date==data.day">
+                        <div class="eventsCalendar-box">
+                            <div class="eventsCalendar" v-for="(items,indexs) in item.ActivityList" :key="indexs"
+                            @click="eventName(items.ActivityName)">
+                                {{items.ActivityName}}
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else></div>
+                </div>
+            </template>
+            </el-calendar>
+        </template>
+      </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import {quertClassPlan} from '../../api/course/class';
+
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+        value: new Date(),
+        calendarData:[],
+        msg:{
+            SelectStartTimeStr:'2022-4-1',
+            SelectEndTimeStr:'2022-4-30'
+        }
+      }
+  },
+  created() {
+    
+  },
+  watch: {
+      value: {
+        handler(val) {
+          if (val) {
+            var d = new Date(val);
+            var currentY = d.getFullYear();
+            var currentM = d.getMonth()+1;
+            var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
+            var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
+            this.msg.SelectStartTimeStr = datetime
+            this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
+            this.getList()
+          }
+        },
+        deep: true
+      }
+  },
+  computed: {
+    ...mapGetters(["userInfo"])
+  },
+  mounted() {
+    var d = new Date();
+    var currentY = d.getFullYear();
+    var currentM = d.getMonth()+1;
+    var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
+    var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
+    this.msg.SelectStartTimeStr = datetime
+    this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
+    this.getList()
+  },
+  methods: {
+    eventName(item){
+        this.$router.push({path:'/stuMan/activeList',query:{'ActivityName':item}})
+    },
+    // 获取活动日历
+    getList() {
+        this.apipostDS("/api/Education/GetEduActivityCalendar", this.msg, (res) => {
+            if (res.data.resultCode=== 1) {
+                this.calendarData = res.data.data
+            }
+        })
+    },
+  }
+};
+</script>