Need to make a check-in calendar, first simply make the effect of the calendar, directly share the source code, if you need to use it directly

<template>
  <div>
    <!-- Calendar head -->
    <div class="calenderTitle">
      <div class="calenderItem" v-for="item of calenderTitel">{{item}}</div>
    </div>
    <!-- Calendar content -->
    <div class="calenderInside">
      <div class="calenderItem" v-for="item of calenderArray">{{item}}</div>
    </div>
  </div>
</template>

<style>
// Implement 7 auto wrap lines per line
.calenderTitle, .calenderInside{
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 700px;
}
.calenderItem{
  width: 100px;
  height: 100px;
}
</style>

<script>
export default {
  data () {
    return {
      // Get the current time stamp (the server time is adopted later)
      timestamp: (new Date()).getTime(),
      // Current year
      nowYear: null,
      // Current month
      nowMonth: null,
      // current date
      nowDate: null,
      // Current week
      nowDay: null,
      // Date title
      calenderTitel: ['day', 'One', 'Two', 'Three', 'Four', 'Five', 'Six'],
      // Date content
      calenderArray: []
    }
  },
  methods: {
    // Split mm / DD / yyyy
    getNowDate () {
      // Convert timestamps to date objects
      const theTime = typeof (timestamp) === 'object' ? this.timestamp : new Date(this.timestamp)
      this.nowYear = theTime.getFullYear()
      this.nowMonth = theTime.getMonth() + 1
      this.nowDate = theTime.getDate()
      this.nowDay = theTime.getDay() // Sunday is 0, the corresponding value of the rest weeks
      this.getFirstDay()
    },
    getFirstDay () {
      let firstDayWeek = null
      // Get the week of the 1st of the month
      firstDayWeek = new Date(this.nowYear + '/' + this.nowMonth + '/' + '01').getDay()
      console.log('Week of the first of the current month')
      console.log(firstDayWeek)
      // Days of the month
      let nowMonthDay = this.getNowMonthDay(this.nowYear, this.nowMonth)
      console.log('nowMonthDay')
      console.log(nowMonthDay)
      let arr = []
      // Add the corresponding number of spaces in front of the rendered array according to the number of weeks on the 1st of the current month
      for (let indexEmpty = 0; indexEmpty < parseInt(firstDayWeek); indexEmpty++) {
        arr.push('')
      }
      // Judge the number of days in the current month through the function, and fill the rendering array according to the number of days
      for (let indexNum = 1; indexNum < nowMonthDay + 1; indexNum++) {
        arr.push(indexNum)
      }
      // Deep copy calendar rendering array (since it may be changed to check-in calendar later, each item of the array may be an object, so deep copy)
      this.calenderArray = JSON.parse(JSON.stringify(arr))
    },
    // Calculate if the current year is a leap year
    isLeapYear (year) {
      return (year % 400 === 0 || year % 4 === 0) && year % 100 !== 0
    },
    // Calculate the number of days in the current month
    getNowMonthDay (year, month) {
      return [null, 31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] || (this.isLeapYear(year) ? 29 : 28)
    }
  },
  created () {
    // Split timestamp conversion into specific values
    this.getNowDate()
  }
}
</script>

Some global variables are not very useful for a simple calendar. They can be changed into local variables and passed through parameters
The timestamp obtained in Demo is a local timestamp. If you need to obtain the timestamp on the server
If there are any other deficiencies, please give us your suggestions