元件程式碼

<template>
  <div class="air-calendar-box">
    <table class="sn-calendar-table">
      <thead>
        <th class="fc-day-header">日</th>
        <th class="fc-day-header">一</th>
        <th class="fc-day-header">二</th>
        <th class
 
="fc-day-header">三</th>
        <th class="fc-day-header">四</th>
        <th class="fc-day-header">五</th>
        <th class="fc-day-header">六</th>
      </thead>
      <tbody>
        <tr>
          <td 
            v-for="(item, idx) in calendarData
 
" 
            :key="idx"
            :class="{'include': item.include}"
            @click="clickDay(item)">
            <slot name="day" :row="item">
              {{ item.day2 }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export 
 
default {
  name: 'AirCalendarBox',
  props: {
    // 預設值
    defaultMonth: {
      type: Date,
      default () {
        return new Date()
      }
    }
  },
  watch: {
    defaultMonth () {
      this.getCalendarDay()
    }
  },
  data () {
    return {
      calendarData: []
    }
  },
  created () {
    this.getCalendarDay()
  },
  methods: {
    // 獲取日曆天數
    getCalendarDay () {
      let year = new Date(this.defaultMonth).getFullYear() // 當月年份
      let month = new Date(this.defaultMonth).getMonth() + 1 // 當月月份
      let days = new Date(year, month, 0).getDate() // 當月天數

      let prevYear = month === 1 ? (year - 1) : year // 上一年年份
      let prevMonth = month === 1 ? 12 : (month - 1) // 上月月份
      let prevDays = new Date(prevYear, prevMonth, 0).getDate() // 上一月天數

      let lastYear = month === 12 ? (year + 1) : year // 下一年年份
      let lastMonth = month === 12 ? 1 : (month + 1) // 下月月份
      // let lastDays = new Date(lastYear, lastMonth, 0).getDate() // 下一月天數

      let prevMonthArr = [] // 上月資料
      let nextMonthArr = [] // 下月資料
      let currentMonthArr = [] // 當月資料
      // 判斷當月1號是星期幾
      let firstDay = new Date(this.defaultMonth + '-01').getDay()

      // 獲取顯示上月的資料
      for (let i = 0; i < firstDay; i++) {
        let day = prevDays - firstDay + (i + 1)
        prevMonthArr.push({
          year: prevYear,
          month: prevMonth,
          day: day,
          day2: day >= 10 ? day : ('0' + day),
          include: false
        })
      }
      // 獲取顯示的下一月的資料
      for (let i = 0; i < (42 - firstDay - days); i++) {
        let day = i + 1
        nextMonthArr.push({
          year: year,
          month: lastMonth,
          day: day,
          day2: day >= 10 ? day : ('0' + day),
          include: false
        })
      }
      // 獲取當月顯示資料
      for (let i = 1; i <= days; i++) {
        currentMonthArr.push({
          year: lastYear,
          month: month,
          day: i,
          day2: i >= 10 ? i : ('0' + i),
          include: true
        })
      }
      this.calendarData = [...prevMonthArr, ...currentMonthArr, ...nextMonthArr]
    },
    clickDay (row) {
      this.$emit('click', { ...row })
    }
  }
}
</script>
<style lang="less" scoped>
.air-calendar-box {
  .sn-calendar-table {
    width: 100%;
    th {
      background:#D9F5F5;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #3E597B;
      box-sizing: border-box;
      display: inline-block;
      width: 14.28%;
    }
    td {
      text-align: center;
      height: 52px;
      position: relative;
      font-size: 16px;
      font-weight: 500;
      box-sizing: border-box;
      display: inline-block;
      width: 14.28%;
      padding: 5px 0;
      cursor: pointer;
      border: solid 2px transparent;
      color: rgba(62, 89, 123, 0.3);
      &.include {
        color: #3E597B;
      }
      &:nth-child(1),
      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(14),
      &:nth-child(15),
      &:nth-child(21),
      &:nth-child(22),
      &:nth-child(28),
      &:nth-child(29),
      &:nth-child(35),
      &:nth-child(36),
      &:nth-child(42) {
        background: #EBFAFA;
      }
      span {
        font-size: 12px;
      }
    }
    tbody {
      .clickDay {
        border: solid 2px #00BBBB;
      }
    }
  }
}

</style>

// 頁面效果