vue版日曆元件的實現方法

<div class="date">
    <div class="header">
        <span class="pre_month" @click="onPreMonth"></span>
        <span v-cloak>{{ date.year }}年{{ date.month }}月</span>
        <span class="next_month" @click="onNextMonth"></span>
    </div>
    <div class="days">
        <table v-cloak border="0" cellspacing="0" cellpadding="0">
            <tr class="label">
                <td>週日</td>
                <td>週一</td>
                <td>週二</td>
                <td>週三</td>
                <td>週四</td>
                <td>週五</td>
                <td>週六</td>
            </tr>
            <tr class="row" v-for="week in weeks" :key="week[0].date">
                <td
                    class="column"
                    v-for="day in week"
                    :key="day.date"
                    v-bind:day="day.date"
                    @click="onSelectDay(day)"
                >
            <span
                v-bind:class="[{
                   checked: selectedDate == day.date,
                   weekend: day.isWeekend,
                 }]"
                    v-if="day.month == date.month">{{ day.v }}</span>
                </td>
            </tr>
        </table>
    </div>
</div>

// 生成日曆函數
initDate(month) {
    var weeks = [] // template中用來渲染日曆的陣列
    var firstDay = this.moment(month, 'YYYY-MM') // 當月1號
    var week = firstDay.format('d') // 當月1號是周幾 (比如週五則week = 5)
    var start = firstDay.subtract(week, 'days') // 日曆上展示的第一個數(上個月的二十幾號之類的，用於補齊日曆)
    for (var i = 0; i < 6; i++) { // 通常日曆為6行7排 42天，因此兩個for迴圈
        var days = []
        for (var j = 0; j < 7; j++) {
            var day = {}
            day.num = start.toObject().date // 當前號數 22
            day.date = start.format('YYYY-MM-DD') // 返回值為2021-10-22
            day.month = start.format('MM') // 當前號數對應的月份，比如日曆上個月27號則day.month = 9;這個月1號day.month = 10
            day.isWeekend = (start.format('E') === '6' || start.format('E') === '7') ? true : false // 是否是週末，用於UI區分週末和平時的顏色
            start.add(1, 'days')  // 沒回圈一次日期加一天
            days.push(day)
        }
        weeks.push(days)
    }
    this.date.year = this.moment(month).year()
    this.date.month = this.moment(month, 'YYYY-MM').add(0, 'month').format('MM')
    this.date.preMonth = this.moment(month, 'YYYY-MM').add(-1, 'month').format('YYYY-MM')
    this.date.nextMonth = this.moment(month, 'YYYY-MM').add(1, 'month').format('YYYY-MM')
    return weeks
}

mounted() {
    const currDate = new Date()
    this.weeks = this.initDate(this.moment(currDate).format('YYYY-MM'))
}

// 上一個月
onPreMonth() {
    const month = this.date.preMonth
    this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
},

// 下一個月
onNextMonth() {
    const month = this.date.nextMonth
    this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
}

onSelectDay(day) {
    if (!this.isSelectDay) return false
    if (day.month === this.date.month) {
        this.selectedDate = day.date
    }
}