SOURCE

new Vue({
  el: '#app',
  data: {
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    year: '',
    month: '',
    weekDay: '',
    allDays: '',
    remain: '',
    allDayObjs: []
  },
  mounted: function() {
    this.init();
  },
  computed: {
    calendarDateText: function() {
      return this.year + '年' + (this.month < 10 ? ('0' + this.month) : this.month) + '月';
    }
  },
  methods: {
    init: function() {
      var datenow = new Date();
      this.year = datenow.getFullYear();
      this.month = datenow.getMonth() + 1;
      this.computedCalendar();
    },
    getDaysInOneMonth: function(year, month) {
      month = parseInt(month, 10);
      var d = new Date(year, month, 0);
      return d.getDate();
    },
    addYear: function() {
      this.year = this.year + 1;
      this.computedCalendar();
    },
    subYear: function() {
      this.year = this.year - 1;
      this.computedCalendar();
    },
    addMonth: function() {
      this.month = this.month + 1;
      if (this.month >= 13) {
        this.year = this.year + 1;
        this.month = 1;
      }
      this.computedCalendar();
    },
    subMonth: function() {
      this.month = this.month - 1;
      if (this.month == 0) {
        this.year = this.year - 1;
        this.month = 12;
      }
      this.computedCalendar();
    },
    computedCalendar: function() {
      this.allDays = this.getDaysInOneMonth(this.year, this.month);
      this.weekDay = new Date(this.year + '-' + this.month + '-1').getDay();
      this.remain = 6 - new Date(this.year + '-' + this.month + '-' + this.allDays).getDay();
      var s = [2, 5, 7, 9, 30, 22];
      this.allDayObjs = [];
      for (var i = 1; i <= this.allDays; i++) {
        if (s.indexOf(i) >= 0) {
          this.allDayObjs.push({
            day: i,
            yes: true
          })
        } else {
          this.allDayObjs.push({
            day: i,
            yes: false
          })
        }

      }
    },
    chooseOne: function(obj) {
      var dom = this.$refs.month_day_item;
      for (var i = 0; i < dom.length; i++) {
        if ((i + 1) == obj.day) {
          dom[i].classList.add("bg-item-choose");
        } else {
          dom[i].classList.remove("bg-item-choose");
        }
      }

    },

  }
})

<div id='app'>
  <div>
    <div class="calendar-header">
      <div class="calendar-header-sub" @click="subYear">
        <i class="fa fa-arrow-left" aria-hidden="true">
        </i>
      </div>
      <div class="calendar-header-sub" @click="subMonth">
        <i class="fa fa-chevron-circle-left" aria-hidden="true">
        </i>
      </div>
      <div class="calendar-header-date" v-text="calendarDateText">
      </div>
      <div class="calendar-header-add" @click="addMonth">
        <i class="fa fa-chevron-circle-right" aria-hidden="true">
        </i>
      </div>
      <div class="calendar-header-add" @click="addYear">
        <i class="fa fa-arrow-right" aria-hidden="true">
        </i>
      </div>
    </div>
    <div class="calendar-content">
      <div class="week-item" v-for="item in weeks" v-text="item">
      </div>
      <div class="week-item " v-for="item in weekDay" v-text="'-'">
      </div>
      <div class="week-item " v-for="(item,index) in allDayObjs" v-text="item.day"
      :class="item.yes?'bg-item-alredy':'bg-item-no'" @click="chooseOne(item)"
      ref="month_day_item">
      </div>
      <div class="week-item" v-for="item in remain" v-text="'-'">
      </div>
      <div style="clear: both;">
      </div>
    </div>
  </div>
</div>

      .calendar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ebebeb;
        text-align: center;
        max-width: 240px;
        height: 36px;
      }
      
      .calendar-header-sub,
      .calendar-header-add {
        flex: 1 0 30px;
        color: #000;
        cursor: pointer;
      }
      
      .calendar-header-date {
        flex: 4 0 120px;
      }
      
      .calendar-content {
        max-width: 240px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;
      }
      
      .week-item {
        float: left;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 1px;
        text-align: center;
        font-weight: bold;
      }
      
      .bg-item-alredy {
        background: #8CE7EC;
      }
      
      .bg-item-no {
        background: #FEDDDE;
      }
      
      .bg-item-after {
        background: #CBCBFE;
      }
      
      .bg-item-choose {
        background: #fff;
      }