<!-- 日历组件 --> <template> <div class="calender-select" :style="{width: width}"> <el-date-picker class="time-select" v-model="selectDate" type="month" value-format="yyyy-MM" :picker-options="pickerOptions" popper-class='my-date-picker' @change="timerChange" > </el-date-picker> <el-calendar v-model="selectCalender" @input="dayChange" > <template slot="dateCell" slot-scope="{date, data}"> <div class="day-tag" > {{ data.day.split('-')[2] }} <div class="day-status">{{ getStatus(data.day) }}</div> </div> </template> </el-calendar> </div> </template> <script> import moment from "moment"; export default { name: "calender-index", props:{ value: { type: String, default: "", }, scheduleData: { type: Array, default: ()=>[], }, width: { type: [Number, String], default: '30%' } }, data(){ return{ selectCalender: new Date(), selectDate: new Date(), pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }, mounted(){ this.setDisabledDayClass(); }, methods:{ timerChange(time){ this.selectCalender = time; this.$emit("input", time + "-01"); this.$emit('dateChange',0); this.$nextTick(()=>{ this.setDisabledDayClass(); }) }, dayChange(value){ this.selectDate = moment(value).format("YYYY-MM"); this.$emit("input", moment(value.getTime()).format("YYYY-MM-DD")); this.$emit('dateChange',1); this.$nextTick(()=>{ this.setDisabledDayClass(); }) }, getStatus(date){ const data = this.scheduleData.find(item => item.date == date); return data ? data.content : ""; }, //限制今天后时间不可选 setDisabledDayClass() { let disabledDayNode = document.getElementsByTagName('td'); const jArr=JSON.parse(JSON.stringify(disabledDayNode) ); const Array = []; for(let item in jArr){ Array.push(disabledDayNode[item]); } let toIndex = Array.findIndex(item=>item.className&&item.className.includes('is-today')); Array.forEach((element,index) => { if( toIndex >= index || toIndex<0){ element.className =element.className&& element.className.replaceAll("is-pervDay",""); }else { element.className += ' is-pervDay' } }) }, } } </script> <style lang="scss"> .calender-select{ //width: 30%; position: relative; .time-select{ position: absolute; right: 20px; width: 190px; } .el-calendar__button-group{ display: none; } .el-calendar-table__row td { // 去掉边框 border: none !important; // 缩小高度 .el-calendar-day { height: 50px; width: 50px; border-radius: 50%; margin: 2px auto; text-align: center; display: flex; } } // 自定义选中、悬浮颜色 .el-calendar-table .el-calendar-day:hover { color: #fff; background-color: #1890ff !important; } .el-calendar-table .is-today .el-calendar-day{ color: #1890ff; //background-color: dodgerblue !important; } .el-calendar-table .is-selected{ background-color: transparent; } .el-calendar-table .is-selected .el-calendar-day{ color: #fff; background-color: #1890ff; } /* .current .el-calendar-day{ background-color: rgba(255, 151, 10, 0.23); //border: 1px solid; }*/ .day-tag{ margin: auto auto; } .day-status{ font-size: 9px; font-weight: 500; } .is-pervDay { pointer-events: none; background-color: #f5f5f5; color: #00000040 !important; /*.el-calendar-day{ background-color: transparent; }*/ } } //时间选择器 .my-date-picker{ width: 220px !important; .el-picker-panel__content{ width: 200px !important; } .el-month-table td .cell { width: 40px !important; } } </style>