vue2开发日历静态网页编程练习项目【web静态网页版】

今天给大家分享我们使用前端技术，vue2 来开发一个纯静态的网页版的日历项目。
最近在学习前端，就通过学习到的技术，开发了一个网页版的日历，来对自己的编程技术进行一个练习。把练习的成功分享给大家，如果你也刚刚开始学习前端，希望这篇文章对你有所帮助
项目采用了 Vue.js，Element UI 和 lunar-javascript 三大核心技术来实现了 网页版的日历

我们先来看一下 网站效果

学习前端还是非常有意思的，我们可以通过我们的想象来实现我们的想做的项目，当我们熟悉了前端的技术，也可以来开发一些网页小游戏。

目录框架

部分代码：

<template>
  <div class="calendar-container">
    <!-- 顶部按钮区域 -->
    <el-row type="flex" justify="space-between" align="middle" class="calendar-header">
      <el-button-group>
        <el-button type="primary" @click="changeYear(-1)">去年</el-button>
        <el-button type="primary" @click="changeMonth(-1)">上个月</el-button>
        <el-button type="primary" @click="resetToday">今天</el-button>
        <el-button type="primary" @click="changeMonth(1)">下个月</el-button>
        <el-button type="primary" @click="changeYear(1)">明年</el-button>
      </el-button-group>
      <div class="calendar-title">
        {{ currentYear }}年 {{ currentMonth }}月
      </div>
    </el-row>

    <!-- 星期标题 -->
    <el-row :gutter="10" class="calendar-week-header">
      <el-col v-for="(w, i) in weekDays" :key="i" :span="3" class="calendar-weekday">
        {{ w }}
      </el-col>
    </el-row>

    <!-- 日历主体 -->
    <el-row :gutter="10" v-for="(week, rowIdx) in calendarGrid" :key="rowIdx" class="calendar-week">
      <el-col v-for="(day, colIdx) in week" :key="colIdx" :span="3">
        <div v-if="day" :class="['calendar-day', { today: day.isToday }]">
          <div class="calendar-day-number">{{ day.day }}</div>
          <div class="calendar-lunar-info">
            <div>{{ day.lunarDay }}</div>
            <div v-if="day.jieqi" class="calendar-jieqi">{{ day.jieqi }}</div>
          </div>
        </div>
        <div v-else class="calendar-day empty"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Solar } from 'lunar-javascript'

export default {
  data() {
    const today = new Date()
    return {
      today, // 当前日期对象，用于判断“今天”
      currentYear: today.getFullYear(), // 当前展示的年份
      currentMonth: today.getMonth() + 1, // 当前展示的月份（从1开始）
      weekDays: ['一', '二', '三', '四', '五', '六', '日'], // 星期标题，周一开始
    }
  },
  computed: {
    // 计算属性：生成当前月份的日历网格（按周划分）
    calendarGrid() {
      const grid = [] // 用于存储日历按周分组的二维数组

      // 1号的日期对象
      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1)
      // 该月第一天是星期几（将 JS 的周日=0 转换为周一=0）
      const startWeekday = (firstDay.getDay() + 6) % 7

      // 获取下月的1号，两个日期相减即可算出本月天数
      const nextMonth = new Date(this.currentYear, this.currentMonth, 1)
      const daysInMonth = Math.floor((nextMonth - firstDay) / (1000 * 60 * 60 * 24))

      const days = []

      // 前置空白格填充
      for (let i = 0; i < startWeekday; i++) {
        days.push(null)
      }

      // 填入当前月份每一天的数据
      for (let d = 1; d <= daysInMonth; d++) {
        const date = new Date(this.currentYear, this.currentMonth - 1, d)
        const solar = Solar.fromDate(date)
        const lunar = solar.getLunar()

        days.push({
          date, // JS 日期对象
          day: d, // 阳历日数字
          lunarDay: lunar.getDayInChinese(), // 农历日（如 初一、十五）
          jieqi: lunar.getJieQi(), // 节气，如果有则显示
          isToday: this.isSameDate(date, this.today), // 是否是今天
        })
      }

      // 后补空白格，确保总格子数是7的倍数
      while (days.length % 7 !== 0) {
        days.push(null)
      }

      // 按7天一组，切分为多周
      for (let i = 0; i < days.length; i += 7) {
        grid.push(days.slice(i, i + 7))
      }

      return grid
    },
  },
  methods: {
    // 判断两个日期是否是同一天
    isSameDate(d1, d2) {
      return (
        d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate()
      )
    },

    // 切换月份：offset 为 +1（下月）或 -1（上月）
    changeMonth(offset) {
      const newDate = new Date(this.currentYear, this.currentMonth - 1 + offset, 1)
      this.currentYear = newDate.getFullYear()
      this.currentMonth = newDate.getMonth() + 1
    },

    // 切换年份：offset 为 +1（明年）或 -1（去年）
    changeYear(offset) {
      this.currentYear += offset
    },

    // 重置为今天
    resetToday() {
      const today = new Date()
      this.currentYear = today.getFullYear()
      this.currentMonth = today.getMonth() + 1
    },
  },
}
</script>

<style scoped>
/* 容器整体样式 */
.calendar-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部按钮区域 */
.calendar-header {
  margin-bottom: 20px;
}

/* 年月标题 */
.calendar-title {
  font-size: 22px;
  font-weight: bold;
}

/* 星期标题行 */
.calendar-week-header {
  margin-bottom: 10px;
}

.calendar-weekday {
  text-align: center;
  font-weight: bold;
  color: #555;
}

/* 每一周的行 */
.calendar-week {
  margin-bottom: 10px;
}

/* 每个日期格 */
.calendar-day {
  padding: 10px;
  height: 80px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 4px rgba(150, 150, 150, 0.1);
  position: relative;
  overflow: hidden;
}

/* 今日样式：高亮渐变背景和阴影 */
.calendar-day.today {
  background: linear-gradient(to bottom right, #fff7c0, #ffd54f);
  box-shadow: 0 0 12px rgba(255, 197, 0, 0.7);
}

/* 空白格子 */
.calendar-day.empty {
  height: 80px;
}

/* 阳历数字 */
.calendar-day-number {
  font-size: 22px;
  font-weight: bold;
  color: #222;
}

/* 农历与节气信息区域 */
.calendar-lunar-info {
  display: flex;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* 节气字体高亮 */
.calendar-jieqi {
  margin-left: 8px;
  color: #ff6d00;
  font-weight: bold;
}
</style>

依赖安装命令
npm i

项目运行：
npm run serve

项目里的代码还是有一部分的，所有的源码 已经打包好了，需要的小伙伴可以自己去下载~
https://wwwoop.com/home/Index/projectInfo?goodsId=95&typeParam=2&subKey=1