Vue实现日历

最新推荐文章于 2025-10-20 15:16:44 发布

原创最新推荐文章于 2025-10-20 15:16:44 发布 · 1.3w 阅读

45 ·

CC 4.0 BY-SA版权

原创同时被 3 个专栏收录

10 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了如何使用Vue实现一个日历组件，包括计算本月天数、填充上个月和下个月日期、处理闰年情况以及切换年份和月份的方法。通过设置星期数组和月份数组，结合Vue代码片段，详细解析了日历渲染的关键步骤。

在这里插入图片描述
效果就是这样子，可以切换上一年，上一个月，下一年，下一个月。

先来捋一下，

首先得知道本月有多少天
知道本月的第一天在星期几
将本月的天数从1号开始排
上一个月有多少天，将本月1号前的星期补全
本月的截止是星期几，下一个月1号从星期几遍历

STEP1:
先设置一个星期数组，用来存放星期日-星期一
月份数组来存放基本每月的天数

	week: string[] = ['日', '一', '二', '三', '四', '五', '六']
	monthList: number[] = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

STEP2：
计算本月有多少天，并且1号是星期几

	const date = new Date()
    this.year = date.getFullYear()
    this.month = date.getMonth() + 1
    this.day = date.getDate()

	// 获得本月的1号是周一
    const firstDay = new Date(`${this.year}/${this.month}/1`).getDay()
    // 在1号前面填充多少个上个月的日期
    this.weekDay = firstDay === 7 ? 0 : firstDay

STEP3：
接下来一大步，就可以遍历本月的日期啦

vue代码片段

// 1号前的填充
<li v-for="inx in weekDay" class="disabled">
 	{{ preMonthSize - weekDay + inx }}
</li>
<li
    v-for="index in monthList[month - 1]"
 >
	<span :class="{ currentDay: index === day }" >
            {{ index }}
    </span>
</li>
// 月末的填充
<li v-for="index in lastWeekDay" class="disabled">{{ index }}</li>

由于monthList下标从0开始，所以month-1为当前月份天数。day为今天当index===day时加上一个小黄圈，表示今天。

STEP4
第三步将日期渲染出来了，并且填充了上个月和下个月。
接下来看一下第三步的变量是怎么来的

preMonthSize：前一个月的天数

// 上一个月有多少天
  get preMonthSize() {
    return this.month - 1 === 0 ? 31 : this.monthList[this.month - 2] 
  }
   // 如果本月为1月，前一个月就是12月，肯定是31天。本月天数为this.monthList[this.month - 1]，
   // 上月天数为this.monthList[this.month - 2]  .

weekDay：本月的1号是星期几（星期一）
本月的1号星期1，前面填充一个数字 , v-for数字的时候，从1开始（不是从0开始）

lastWeekDay：本月后填充几个下月的日期

// 获得本月的最后一天是星期几，往后填充多少个
const remineDay = new Date(`${this.year}/${this.month}/this.monthList[this.month - 1]`).getDay()
this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay

至此本月的日历就渲染出来啦！
但是还有一个问题，闰年：
你可以在页面挂载的时候

if (
      (this.year % 4 === 0 && this.year % 100 !== 0) ||
      this.year % 400 === 0
    ) {
      this.monthList[1] = 29
    } else {
      this.monthList[1] = 28
    }

更改monthList的第二项。

STEP 5:
实现切月份年份。

 	<div class="canlendar-header">
      <p class="pre">
        <span @click="changeDate('preYear')">
          <icon class="icon" name="preYear" />
        </span>
        <span @click="changeDate('preMonth')">
          <icon class="icon" name="preMonth" />
        </span>
      </p>
      <p class="currenDate">{{ `${year}年${month}月` }}</p>
      <p class="next">
        <span @click="changeDate('nextMonth')">
          <icon class="icon" name="nextMonth" />
        </span>
        <span @click="changeDate('nextYear')">
          <icon class="icon" name="nextYear" />
        </span>
      </p>
    </div>

给每一个icon加上click函数，点击的时候传入不同的参数。

changeDate(type: string) {
    switch (type) {
      case 'preYear':
        this.year -= 1
        break
      case 'preMonth':
        // 当前月份为1月， 上一个月分为12月，年份减1
        if (this.month === 1) {
          this.month = 12
          this.year -= 1
        } else {
          this.month -= 1
        }
        break
      case 'nextYear':
        this.year += 1
        break
      case 'nextMonth':
        // 当前月份为12月， 下个月分为1月，年份加1
        if (this.month === 12) {
          this.month = 1
          this.year += 1
        } else {
          this.month += 1
        }
        break
      default:
        break
    }

    this.initDate()
  }

initDate() {
    if (
      (this.year % 4 === 0 && this.year % 100 !== 0) ||
      this.year % 400 === 0
    ) {
      this.monthList[1] = 29
    } else {
      this.monthList[1] = 28
    }
    // 获得指定年月的1号是星期几
    const firstDay = this.getWeekDay(this.year, this.month, 1)

    // 在1号前面填充多少个上个月的日期
    this.weekDay = firstDay === 7 ? 0 : firstDay
    // 获得最后一天是星期几，往后填充多少个
    const remineDay = this.getWeekDay(
      this.year,
      this.month,
      this.monthList[this.month - 1]
    )
    this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay

    // 获得指定年月日是星期几
    this.currentWeek = this.getWeekDay(this.year, this.month, this.day)
 }

// 根据年月日获得为星期几
  getWeekDay(year: number, month: number, day: number) {
    return new Date(`${year}/${month}/${day}`).getDay()
  }

简而言之，只要你想方设法将preMonthSize，weekDay， month， lastWeekDay这几个变量根据年月日计算出来，页面就可以渲染出来。

详细的代码地址：https://github.com/zhangsundf/vue-canlendar/blob/master/canlendar.vue