在vue中实现日历功能的代码示例

npm install vue-calendar --save

import Vue from 'vue'
import VueCalendar from 'vue-calendar'
Vue.use(VueCalendar)

<template>
  <div>
    <vue-calendar v-model="selectedDate" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedDate: new Date()
    }
  }
}
</script>

import Vue from 'vue'
import VueCalendar from 'vue-calendar'
Vue.use(VueCalendar, {
  dayPopover: {
    background: '#333',
    color: '#fff'
  },
  day: {
    background: '#fff',
    color: '#333'
  }
})

import Vue from 'vue'
import VueCalendar from 'vue-calendar'
import en from 'vue-calendar/src/locale/lang/en'
Vue.use(VueCalendar, {
  locale: en
})

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(day, index) in days" :key="index">{{ day }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(week, index) in weeks" :key="index">
          <td v-for="(day, index) in week" :key="index">{{ day }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      weeks: []
    }
  },
  mounted() {
    this.generateCalendar()
  },
  methods: {
    generateCalendar() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      const firstDay = new Date(year, month, 1).getDay()
      const lastDate = new Date(year, month +1, 0).getDate()
      const weeks = [[]]
      let dayCount = 1
      for (let i = 0; i < firstDay; i++) {
        weeks[0].push('')
      }
      for (let i = 1; i <= lastDate; i++) {
        if (weeks[weeks.length - 1].length === 7) {
          weeks.push([])
        }
        weeks[weeks.length - 1].push(i)
      }
      this.weeks = weeks
    }
  }
}
</script>

npm install moment --save

import moment from 'moment'

<template>
  <div>
    <div>
      <button @click="prevMonth">Prev Month</button>
      <span>{{ momentDate.format('MMMM YYYY') }}</span>
      <button @click="nextMonth">Next Month</button>
    </div>
    <table>
      <!-- 表格渲染 -->
    </table>
  </div>
</template>

export default {
  data() {
    return {
      momentDate: moment(),
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      weeks: []
    }
  },
  mounted() {
    this.generateCalendar()
  },
  methods: {
    generateCalendar() {
      // 生成日历
    },
    prevMonth() {
      this.momentDate = this.momentDate.subtract(1, 'month')
      this.generateCalendar()
    },
    nextMonth() {
      this.momentDate = this.momentDate.add(1, 'month')
      this.generateCalendar()
    }
  }
}

<template>
  <div>
    <div>
      <!-- 上一页和下一页按钮 -->
    </div>
    <table>
      <thead>
        <tr>
          <th v-for="(day, index) in days" :key="index">{{ day }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(week, index) in weeks" :key="index">
          <td v-for="(day, index) in week" :key="index" @click="selectDate(day)">{{ day }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      momentDate: moment(),
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      weeks: []
    }
  },
  mounted() {
    this.generateCalendar()
  },
  methods: {
    generateCalendar() {
      // 生成日历
    },
    prevMonth() {
      // 切换到上一个月
    },
    nextMonth() {
      // 切换到下一个月
    },
    selectDate(day) {
      // 选择日期
      const selectedDate = moment(this.momentDate).date(day)
      this.$emit('select', selectedDate.toDate())
    }
  }
}
</script>