SOURCE

var vm = new Vue({
    el: '#app',
    data: {
        weeks: ['日', '一', '二', '三', '四', '五', '六'],
        year: 2018,
        calendars: [],
    },
    mounted: function () {
        this.init();
    },
    methods: {
        // 初始化
        init: function () {
            var datenow = new Date();
            this.year = datenow.getFullYear();
            this.initCalendar();
        },
        subYear: function () {
            this.weekendTitle = '设置今年所有周末不营业';
            this.year -= 1;
            this.initCalendar();
        },
        addYear: function () {
            this.weekendTitle = '设置今年所有周末不营业';
            this.year += 1;
            this.initCalendar();
        },
        initCalendar: function () {
            var calendars = [];
            for (var i = 1; i <= 12; i++) {
                var beforeDays = this.getMonthFirstDay(this.year, i);
                var afterDays = 6 - this.getMonthLastDay(this.year, i);
                calendars.push({
                    year: this.year,
                    month: i,
                    beforeDays: beforeDays,
                    days: this.getMonthDays(this.year, i),
                    afterDays: afterDays,
                })
            }
            this.calendars = calendars;

        },
        // 每月多少天
        getMonthDays: function (year, month) {
            var d = new Date(year, month, 0);
            return d.getDate();
        },
        // 每月1号 是星期几
        getMonthFirstDay: function (year, month) {
            return new Date(year + '-' + month + '-1').getDay()
        },
        // 每月最后一天 是星期几
        getMonthLastDay: function (year, month) {
            return new Date(year + '-' + month + '-' + this.getMonthDays(year, month)).getDay()
        }
    }
})

<div id="app">
	<div class="calendar-12" style="margin: 0 auto;">
		<div class="calendar-year">
			<i class="fa fa-chevron-circle-left mouse-over" aria-hidden="true" @click="subYear"></i>
      <span v-text="year" style="display: inline-block;width: 100px;"></span>
      <i class="fa fa-chevron-circle-right mouse-over" aria-hidden="true" @click="addYear"></i>
    </div>
    <div class="calendar-content" v-for="(monthItem , index ) in calendars">
      <div class=" text-center calendar-header-month" v-text="monthItem.month + ' 月'">
      </div>
      <div class="week-item" v-for="item in weeks" v-text="item">
      </div>
      <div class="week-item " v-for="item in monthItem.beforeDays" v-text="'-'">
      </div>
      <div class="week-item mouse-over" v-for="day in monthItem.days" v-text="day"
      ref="month_day_item" >
      </div>
      <div class="week-item" v-for="item in monthItem.afterDays" v-text="'-'">
      </div>
      <div style="clear: both;">
      </div>
    </div>
  </div>
</div>

.text-center {
    text-align: center;
}

.mouse-over {
    cursor: pointer;
}

.calendar-12 {
    display: flex;
    flex-wrap: wrap;
    width: 1112px;
}

.calendar-year {
    flex: 0 0 1112px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
}

.calendar-content {
    flex: 0 0 268px;
    border: 1px solid #2b85e4;
    box-sizing: border-box;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
}

.calendar-header-month {
    background: #2b85e4;
    line-height: 30px;
    height: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 3px;
}

.week-item {
    float: left;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 1px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.week-item:hover {
    background-color: #2d8cf0;
    color: #fff;
    border-radius: 5px;
}

.bg-item-not-business {
    background: #e9eaec;
    color: #ed3f14c4;
    border-radius: 5px;
}