[{id: '232',date: '2019-06-01',info: '我要去吃大餐'},{id: '292',date: '2019-06-06',info: '我要去吃大餐'},{id: '292',date: '2019-06-07',info: '我要去吃大餐'},{id: '369',date: '2019-06-30',info: '我要去吃大餐'}]

<template><div class="test-container"><h1>Test页面，测试组件</h1><!-- 日历 --><calendar v-if="calendarVisible" @getDateInfo="getDateInfo" :propsInfoList="propsInfoList" :propsTime="propsTime"></calendar></div>
</template><script>
import calendar from '@/components/Calendar/Calendar.vue'
export default {name: 'test',components: {"calendar": calendar},data() {return {calendarVisible: true,propsTime: '',propsInfoList: '',middle: [{id: '232',date: '2019-06-01',info: '我要去吃大餐'},{id: '292',date: '2019-06-06',info: '我要去吃大餐'},{id: '292',date: '2019-06-07',info: '我要去吃大餐'},{id: '369',date: '2019-06-30',info: '我要去吃大餐'}]}},created() {this.propsInfoList = JSON.stringify(this.middle)this.propsTime = this.getToday()},mounted() {window.alert('测试时间为19年 5、6、7月，完成是在6月')},methods: {// 格式化当前日期 YYYY-MM-DD
    getToday() {let nowDate = new Date()let yy = nowDate.getFullYear().toString()let mm = (nowDate.getMonth() + 1 + '').padStart(2,'0')let dd = (nowDate.getDate() + '').padStart(2,'0')// let hh = nowDate.getHours().toString().padStart(2,'0')// let mt = (nowDate.getMinutes() + '').padStart(2,'0')// let ss = (nowDate.getSeconds() + '').padStart(2,'0')return `${yy}-${mm}-${dd}` // -${hh}-${mt}-${ss}
    },// 组件传值
    getDateInfo(year, month) {let _this = this_this.propsTime = `${year}-${month}`_this.calendarVisible = falsesetTimeout(() => {_this.propsInfoList = []let middleif(month == '05') {middle  = [{id: '232',date: '2019-05-10',info: '我要去吃小餐'}]} else if (month == '06') {middle = _this.middle} else if (month == '07') {middle  = [{id: '232',date: '2019-07-10',info: '我要去吃小餐'}]} else {middle = ''}_this.propsInfoList = JSON.stringify(middle)_this.calendarVisible = true}, 100)}}
}
</script>

<template><div class="calendar-container"><h1>calendar</h1><div class="show-date" @click="clickData">{{showDate}}</div><div class="now-time">今日：{{exactTime}}</div><div class="calendar"><ul class="calendar-header"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class="calendar-body"><li class="calendar-row" v-for="(item, index) in JSON.parse(calendarData)" :key="index"><span v-for="(subItem, subIndex) in item" :class="[subIndex == 0 || subIndex == 6? 'weekend': 'weekday', subItem.type == '1'? 'exact-time': '', subItem.type == '0'? 'already-time': '', subItem.type == '2'? 'soon-time': '']" @click="showInfo(subItem)" :key="subIndex">{{subItem.date}}</span></li></ul></div><mt-popup v-model="popupVisible" position="bottom"><mt-picker :slots="slots" :showToolbar="true" :visibleItemCount="5" :itemHeight="itemsHeight" ref="picker"><img src="@/assets/images/picker_cancel.png" class="picker_cancel" v-on:click="cancelFunc()"><img src ="@/assets/images/picker_sure.png" class="picker_sure" v-on:click="sureFunc()"></mt-picker></mt-popup></div>
</template>

import { MessageBox } from 'mint-ui'
export default {name: "calendar",props: {propsTime: String,propsInfoList: String},data() {return {time: '',infoList: '',calendarData: [],showDate: '',exactTime: '',itemsHeight: 95 * window.screen.height / 1334,popupVisible: false,slots: []}},created() {this.infoList = this.propsInfoListthis.time = this.propsTime.split('-')const date = this.getToday()this.exactTime = date.slice(0,3).join('-')this.getCalendar(...(this.time))this.getSlotsArray(...(date.slice(0,2)))},methods: {// 日历组件
    getCalendar(year, month) {let _this = thisconst rightNow = _this.exactTime_this.showDate = `${year}-${monthconst firstDate = new Date(year, month - 1, 1)const firstDay = firstDate.getDay()const isLeapYear = year % 100 == 0? year % 400 == 0? 1: 0: year % 4 == 0 ? 1: 0const monthArray = [31, 28 + isLeapYear, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]const weeekLines =Math.ceil((monthArray[month - 1] + firstDay)/7)let calendar = []for(let i = 0; i < weeekLines; i++) {let weeekLinesInfo = []for(let j = 0; j < 7; j++) {const cellNo = i * 7 + jconst datePerLine = cellNo - firstDay + 1if(datePerLine <= 0 || datePerLine > monthArray[month - 1]) {let outOfMonth = {"type" : 'null',"date" : ''}weeekLinesInfo[j] = outOfMonth} else {let day = (datePerLine + '').padStart(2,'0')let inOfMonth = {"type" : '',"date" : day,"isDone": '',"infor": ''}const propsDate = `${year}-${month}-${day}`if(propsDate == rightNow){inOfMonth.type = "1"}const reservations = JSON.parse(_this.infoList)for(let k = 0; k < reservations.length; k++) {if(propsDate == reservations[k].date){// inOfMonth.type = "1"inOfMonth.infor = reservations[k].infoif(rightNow == reservations[k].date) {inOfMonth.type = "1"inOfMonth.isDone = "doing"} else if (rightNow > reservations[k].date) {inOfMonth.type = "0"inOfMonth.isDone = "pass"} else if (rightNow < reservations[k].date) {inOfMonth.type = "2"inOfMonth.isDone = "will"}}}weeekLinesInfo[j] = inOfMonth}}calendar.push(weeekLinesInfo)}window.console.log(calendar)_this.calendarData = JSON.stringify(calendar)},// 格式化当前日期 YYYY-MM-DD
    getToday() {let nowDate = new Date()let yy = nowDate.getFullYear().toString()let mm = (nowDate.getMonth() + 1 + '').padStart(2,'0')let dd = (nowDate.getDate() + '').padStart(2,'0')let hh = nowDate.getHours().toString().padStart(2,'0')let mt = (nowDate.getMinutes() + '').padStart(2,'0')let ss = (nowDate.getSeconds() + '').padStart(2,'0')return [yy, mm, dd, hh, mt, ss]// return `${yy}-${mm}-${dd}-${hh}-${mt}-${ss}`
    },// 组装 picker 数组
    getSlotsArray(year, month){let _this = thislet yearArray = []for(let i = -10 ; i <= 10 ; i ++){yearArray.push(year - 1 + i)}let monthArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]let slots = [{values:yearArray,className:"slot1",defaultIndex: 11},{values:monthArray,className:"slot2",defaultIndex:month - 1}]_this.slots = slots},// 显示日期弹窗
    clickData(){this.popupVisible = true},// 取消按钮
    cancelFunc(){this.popupVisible = false;},// 确认按钮
    sureFunc() {let _this = this_this.popupVisible = falseconst clickData = _this.$refs.picker.getValues()const year = clickData[0] + ''const month = (clickData[1] + '').padStart(2,'0')const day = _this.time[2]_this.getDateInfo(year, month)_this.getCalendar(year, month)},// 调用父组件定义的方法
    getDateInfo(year, month) {this.$emit('getDateInfo', year, month)},// 点击展示某天的事项信息
    showInfo(info) {let _this = thisconst infor = infoif(infor.infor) {const [year, month] = _this.showDate.split('-')console.log(year, month, info)const titleDate = `${year}-${month}-${info.date}`const preview = info.inforMessageBox({title: titleDate,message: preview,showCancelButton: false,closeOnClickModal: true})}}}
}