从零撸一个日历用来显示数据

话不多说，先上效果图：

html部分

<template>
	<div>
		<span class="searchFormItemLabel">选择月份</span>
            <el-date-picker
                class="searchFormItemInput"
                v-model="yearMonth"
                format="yyyy年MM月"
                value-format="yyyy-MM"
                type="month"
                :clearable="false"
                @change="getPatrolLogData()"
                placeholder="选择月份">
            </el-date-picker>
            <!--日历部分-->
            <div class="patrolLogCalendar">
                <div class="everyWeekDay" align="center">
                            <span v-for="(item,index) in weekDays" :key="index" class="weekday">
                                <span class="weekday" style="color:#333333;">{{item}}</span>
                            </span>
                </div>
                <div class="everyDay">
                    <!--空白占位-->
                    <span v-for="(item1,index) in ThisWeekDayCount" :key="index" class="days"></span>
                    <!--这个月的天数-->
                    <span v-for="(item,index) in thisDayCount" class="days">
                                <span style="position: relative;">
                                <div style="cursor:pointer;background-color: #F2F7F9" align="center">{{index+1}}</div>
                                    <!--循环日历上面的数据-->
                                    <span v-for="(item,_index) in patrolLogData">
                                        <span v-if="item.patrolTime.substr(item.patrolTime.length-2,2) == index+1">
                                            <span v-show="item.totelCount!=0">
                                                <div v-show="showTotelCount" class="totelCount" align="left">计划次数：{{item.totelCount}}</div>
                                                <div v-show="showPatrolCount" class="patrolCount" align="left">到达次数：{{item.patrolCount}}</div>
                                                <div v-show="showMissCount" class="missCount" align="left">漏检次数：{{item.missCount}}</div>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                </div>
            </div>
            <div class="patrolLogContentBottom">
                <el-button :type="showTotelType" size="small" @click="changeShowTotelCount()">计划次数</el-button>
                <el-button :type="showPatrolType" size="small" @click="changeShowPatrolCount()">到达次数</el-button>
                <el-button :type="showMissType" size="small" @click="changeShowMissCount()">漏检次数</el-button>
            </div>
	</div>
</template>

script

export default {
        name: "calendar",
        data(){
            return{
            	yearMonth：'',
            	patrolLogData:[],
                weekDays: ["日", "一", "二", "三", "四", "五", "六"],
                ThisWeekDayCount: '', //这月1日星期几
                thisDayCount: "", //这个月有几天
                showTotelCount:true,
                showPatrolCount:true,
                showMissCount:true,
                showTotelType:'green',
                showPatrolType:'orange',
                showMissType:'red'
            }
        },
        methods:{
        	//获取数据
            async getPatrolLogData(){
                this.getThisMonthDay(this.yearMonth);
                this.getThisWeekDay(this.yearMonth);
                const res = await getData({yearMonth:this.yearMonth});
                if(res.success == true){
                    this.patrolLogData = res.result
                }
            },
        	//这个月的天数
            getThisMonthDay(yearMonth) {
                let yearMonthArr = yearMonth.split('-');
                let thisDate = new Date(parseInt(yearMonthArr[0]),parseInt(yearMonthArr[1]),0);
                this.thisDayCount = thisDate.getDate();

            },
            //这月1日星期几
            getThisWeekDay(yearMonth) {
                let thisDate = new Date(yearMonth+'-'+'01');
                this.ThisWeekDayCount = thisDate.getDay();
            },
            //底部button事件
            changeShowTotelCount(){
                this.showTotelCount = !this.showTotelCount;
                this.showTotelType == 'green' ? this.showTotelType = 'info' : this.showTotelType = 'green'
            },
            changeShowPatrolCount(){
                this.showPatrolCount = !this.showPatrolCount;
                this.showPatrolType == 'orange' ? this.showPatrolType = 'info' : this.showPatrolType = 'orange'
            },
            changeShowMissCount(){
                this.showMissCount = !this.showMissCount;
                this.showMissType == 'red' ? this.showMissType = 'info' : this.showMissType = 'red'
            }
        }
}

数据

 this.patrolLogData = [
    {
      "patrolTime": "2020/04/01",
      "totelCount": 4,
      "missCount": 3,
      "patrolCount": 1
    },
    {
      "patrolTime": "2020/04/02",
      "totelCount": 4,
      "missCount": 4,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/03",
      "totelCount": 1,
      "missCount": 1,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/04",
      "totelCount": 2,
      "missCount": 1,
      "patrolCount": 1
    },
    {
      "patrolTime": "2020/04/05",
      "totelCount": 5,
      "missCount": 4,
      "patrolCount": 1
    },
    {
      "patrolTime": "2020/04/06",
      "totelCount": 6,
      "missCount": 3,
      "patrolCount": 3
    },
    {
      "patrolTime": "2020/04/07",
      "totelCount": 7,
      "missCount": 7,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/08",
      "totelCount": 26,
      "missCount": 26,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/09",
      "totelCount": 10,
      "missCount": 3,
      "patrolCount": 7
    },
    {
      "patrolTime": "2020/04/10",
      "totelCount": 9,
      "missCount": 6,
      "patrolCount": 3
    },
    {
      "patrolTime": "2020/04/11",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/12",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/13",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/14",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/15",
      "totelCount": 12,
      "missCount": 9,
      "patrolCount": 3
    },
    {
      "patrolTime": "2020/04/16",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/17",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/18",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/19",
      "totelCount": 15,
      "missCount": 5,
      "patrolCount": 10
    },
    {
      "patrolTime": "2020/04/20",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/21",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/22",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/23",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/24",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/25",
      "totelCount": 5,
      "missCount": 1,
      "patrolCount": 4
    },
    {
      "patrolTime": "2020/04/26",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/27",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/28",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/29",
      "totelCount": 0,
      "missCount": 0,
      "patrolCount": 0
    },
    {
      "patrolTime": "2020/04/30",
      "totelCount": 19,
      "missCount": 8,
      "patrolCount": 11
    }
  ]

style

<style>
	.el-button--small {
	    padding: 9px 15px;
	    height: 32px;
	    font-size: 14px;
	    font-family: Microsoft YaHei;
	    font-weight: 400;
	    box-shadow: -1px 4px 8px 0px rgba(75, 102, 159, 0.2);
	    border-radius: 5px;
	    line-height: 10px;
	}
	.el-button--green {
	    background-color: #07C160 !important;
	    color: #ffffff;
	}
	.el-button--orange {
	    background-color: #FFA922 !important;
	    color: #FFF;
	}
	.el-button--red {
	    background-color: #FB403A !important;
	    color: #FFF;
	}

	.patrolLogCalendar{
        width: 1640px;
        height: 710px;
        border: 1px solid #0167a2;
    }
    .everyWeekDay .weekday {
        display: -moz-inline-box;
        display: inline-block;
        text-align: center;
        height: 50px;
        line-height: 50px;
        width: 232px;
        color: #333333;
        background-color: #F2F7F9;
        border: 1px solid transparent;
        cursor: pointer;
        box-sizing: border-box;
    }
    .everyWeekDay .weekday span{
        width: 100%;
    }
    .days {
        display: -moz-inline-box;
        display: inline-block;
        width: 232px;
        cursor: pointer;
        box-sizing: border-box;
        height: 135px;
        vertical-align: top;
    }
    .everyDay .days span {
        vertical-align: auto;
    }
    /*计划次数*/
    .totelCount{
        width:212px;
        height:32px;
        line-height: 32px;
        margin: 5px;
        padding-left: 14px;
        background:rgba(7,193,96,1);
        border-radius:4px;
    }
    /*到达次数*/
    .patrolCount{
        width:212px;
        height:32px;
        line-height: 32px;
        margin: 5px;
        padding-left: 14px;
        background:rgba(255,169,34,1);
        border-radius:4px;
    }
    /*漏检次数*/
    .missCount{
        width:212px;
        height:32px;
        line-height: 32px;
        margin: 5px;
        padding-left: 14px;
        background:rgba(251,64,58,1);
        border-radius:4px;
    }
    /*底部按钮*/
    .patrolLogContentBottom{
        margin-top: 58px;
    }
</style>