VUE篇之日历组件

已于 2023-12-14 14:17:20 修改 · 1.1w 阅读 · 33
文章标签：

#vue.js #javascript #前端

于 2023-12-13 17:36:49 首次发布
本文详细介绍了使用Vue编写的日历组件，包括基础版本的日期展示、增强版的上/下月日期处理、选择区间日期以及可自定义日期内容的功能实现。

1.简单日历组件展示

思路：根据当前月的第一天是星期几，来显示日期

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 当月 -->
      <div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },

  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
    }
    .lastday {
      color: gold;
    }
  }
}
</style>

2.日历组件增强版------带有上个月或者下个月日期

较比上一版本，这个版本多了2个方法，主要用于更新上个月剩余日期，以及下个月最新日期

上个月日期：
// 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
 下个月日期：
// 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    }

 整体代码：

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 上个月 -->
      <div v-for="item in firstDay - 1" :key="item + 'pre'" class="lastday">
        {{ preDays - (firstDay - 1 - item) }}
      </div>
      <!-- 当月 -->
      <div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div>
      <!-- 下个月 -->
      <div v-for="item in 7 - nextDays" :key="item + 'next'" class="lastday">
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      preDays: 30,
      nextDays: 7,
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },
  mounted() {
    this.getPreMonthDays();
    this.getNextMonthDays();
  },
  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    // 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
    // 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
    }
    .lastday {
      color: gold;
    }
  }
}
</style>

3.日历组件增强版------可选择区间日期

思路：通过clickCount记录点击区间次数，默认是0，点击第一次是1，第二次是2；如果clickCount==2重置clickCount=0

页面渲染：通过判断日期是否在选择区间的最大和最小之间，来更改背景色

相比较之前，更新的代码：

方法新增一个点击事件

selectDate(year, day) {
      this.clickCount++;
      const date = new Date(`${year}-${this.curMonth}-${day}`);
      if (this.clickCount == 1) {
        this.startTime = date;
      } else if (this.clickCount == 2) {
        this.endTime = date;
        this.clickCount = 0;
      }
      if (this.endTime && +this.startTime > +this.endTime) {
        [this.startTime, this.endTime] = [this.endTime, this.startTime];
      }
      // console.log(
      //   this.clickCount,
      //   moment(this.startTime).format('YYYY-MM-DD'),
      //   moment(this.endTime).format('YYYY-MM-DD')
      // );
    }
  computed: {
    isSelected() {
      return (year, day) => {
        const date = new Date(`${year}-${this.curMonth}-${day}`);
        return (
          (+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime
        );
      };
    }
  },

整体代码：

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 上个月 -->
      <div
        v-for="item in firstDay - 1"
        :key="item + 'pre'"
        :class="['lastday', { select: isSelected(curYear - 1, preDays - (firstDay - 1 - item)) }]"
        @click="selectDate(curYear - 1, preDays - (firstDay - 1 - item))"
      >
        {{ preDays - (firstDay - 1 - item) }}
      </div>
      <!-- 当月 -->
      <div
        v-for="item in curDays"
        :key="item + 'cur'"
        :class="['curday', { select: isSelected(curYear, item) }]"
        @click="selectDate(curYear, item)"
      >
        {{ item }}
      </div>
      <!-- 下个月 -->
      <div
        v-for="item in 7 - nextDays"
        :key="item + 'next'"
        :class="['lastday', { select: isSelected(curYear + 1, item) }]"
        @click="selectDate(curYear + 1, item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      startTime: null, //记录区间开始时间
      endTime: null, //记录区间结束时间
      clickCount: 0, //用于记录点击次数
      preDays: 30, //上个月天数
      nextDays: 7, //下个月天数
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },
  computed: {
    isSelected() {
      return (year, day) => {
        const date = new Date(`${year}-${this.curMonth}-${day}`);
        return (
          (+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime
        );
      };
    }
  },
  mounted() {
    this.getPreMonthDays();
    this.getNextMonthDays();
  },
  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    // 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
    // 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    },
    selectDate(year, day) {
      this.clickCount++;
      const date = new Date(`${year}-${this.curMonth}-${day}`);
      if (this.clickCount == 1) {
        this.startTime = date;
      } else if (this.clickCount == 2) {
        this.endTime = date;
        this.clickCount = 0;
      }
      if (this.endTime && +this.startTime > +this.endTime) {
        [this.startTime, this.endTime] = [this.endTime, this.startTime];
      }
      // console.log(
      //   this.clickCount,
      //   moment(this.startTime).format('YYYY-MM-DD'),
      //   moment(this.endTime).format('YYYY-MM-DD')
      // );
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
    .lastday {
      color: gold;
    }
    .select {
      background: pink;
      color: #fff;
    }
  }
}
</style>

4.日历组件增强版------可自定义日期内容

未完待续

vue原生方式实现日历组件
hyduan_h5的博客
06-02 7075
vue原生实现日历组件
手把手撸一个小而美的日历组件
分享知识和经验，只出精品~
10-24 4480
日历是前端开发中常见的业务组件之一，虽然现在有很多现成的日历组件，但是呢很多时候需要定制的时候就需要我们自己造一个，此时我们便需要了解日历的生成原理。其实也没有想象中的那么复杂。 今天我给大家带来手把手带你撸一个日历组件的教程，本教程使用Vue开发一个小而美的日历，主要讲解实现日历的基本思路，觉得有用的小伙伴记得三连一波啊。使用vue脚手架搭建的vue2.0项目，css预处理器选择scss即可画出日历草图，构建出日历常见的骨架。当然啦，也可以借鉴一些已有的日历的外观，这里我采用较为常见的外观，包含基本的日期
最详细的Vue实现日历组件Calendar（日期点击多选，滑动多选）
徐忠炜的博客
04-01 1万+
1. 成果演示 1.1 日期的切换 1.2 点击多选 1.3 滑动多选 2. 实现基本的日期渲染 2.1 思路 2.1.1 要用到的Date对象方法 new Date(2020, 4, 1).getDay() 计算传入的日期是星期几，返回值0表示星期天，1表示星期一，以此类推… new Date(2020, 4, 0).getDate()计算传入月份的该月总天数，第三个参数为0才是计算总天数！！ 2.1.2 剖析日历日期结构 一个日期表格六行七列，共42个日期，这个是固定的（重要！） 一般情况
建议收藏！整理了五款Vue日历开源组件~
最新发布
小二丶的博客
10-23 1228
本文精选5款实用的Vue日历组件，适用于不同开发场景：1. VueHeatmap - Github风格热力图，适合数据可视化；2. VueFunctionalCalendar - 轻量无依赖日期选择器；3. DayspanVuetify - 专业级日程管理系统组件；4. VCalendar - 现代化设计日历，支持Vue2/3；5. Kalendar - 全功能响应式日历。文章对比了各组件特点、安装方式及适用场景，建议根据项目需求选择合适方案，优先考虑无依赖组件以优化性能。
vue2 实现日历组件，包含新增日程
所学所思
06-09 3045
实现的最终效果： 模板 html 部分 js 部分 css 部分
vue日历插件
05-05
自己实现的vue范围选择日历件。使用方法请至我的博客开发那点事（四）查看
vue 日历组件
zx894554911的博客
05-25 1566
【代码】vue 日历组件。
Vue3+Typescript日历组件
07-29
本篇将详细介绍如何利用Vue3和TypeScript来创建一个功能丰富的日历组件。 首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是...
精选资源
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
VUE实现日历组件功能
08-31
在这篇文章中，我们将介绍如何使用VUE实现日历组件功能。该组件支持月视图，且可以自由地在vue项目中使用。 知识点1：Vue 日历组件的实现 要实现日历组件，需要使用VUE框架。该组件支持月视图，且可以自由地在vue...
精选资源
vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围
07-30
vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围 用法 <calendar @choiseDay="chosieDayCallBack" @close="showCalendar = false" :currectDays="dateParams" :showCalendar="showCalendar"></...
vuefullcalendar一个基于VUE的日历组件
08-11
vue构建的完整日历。不需要jquery。调度事件管理
vue-calendar 日期插件分享
07-21
vue引入日期插件资源
vuefullcalendar一个基于vuejs的全日历组件
08-10
vue-fullcalendar 一个基于vue.js的全日历组件，不需要Jquery或fullCalendar.js。 目前，它只支持月视图。 它的灵感来自fullCalendar.io
vue简单的日历组件
08-12
vue简单的日历组件
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
vue日历组件
Smile_Simba的博客
04-30 3616
日历组件在开发中经常被使用到，这次产品又对之前的日历做了需求升级，开发可真难，满足他的一切吧--------下面开始： 需求大概是这样子： 自定义开始时间和结束时间 自定义频次，即可控制星期几可选 月份切换只能在设置的开始月份和结束月份之间 可传入默认选择的日期，每个日期展示对应状态 不在开始结束范围内、不在设置频次内的点击弹出相应信息 ui是这样的： 首先是画布局，跟前段时间一样的操作方式...
vue日历插件vue-calendar
热门推荐
memory_zzz的博客
09-09 3万+
原始效果： 修改后的效果： 接下来，我们使用它～ 1.安装 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 2.在使用到日历插件的文件中引入 import Calendar from 'vue-calendar-component'; 3.原始效果代码 <template> <div class="con"> <Calen.
vue2 周日历组件
07-23
在 Vue2 生态中，有多个优秀的周日历组件可以满足不同的开发需求。以下是一些推荐的组件及其特点： 1. **Vue-Calendar-Component** 这是一个轻量级、高度可定制的日历组件，支持周视图模式，适合需要灵活样式和功能扩展的项目。该组件基于 Vue2 开发，文档清晰，易于集成[^1]。可以通过自定义插槽来实现复杂的交互逻辑。 2. **Vue2-Hotel-Datepicker** 虽然该组件主要用于日期范围选择，但其周视图功能也非常强大，适合需要展示周范围的场景，例如酒店预订、日程安排等。该组件支持多种自定义选项，如禁用日期、高亮周末等[^1]。 3. **FullCalendar with Vue2 Wrapper** FullCalendar 是一个功能非常丰富的日历库，其 Vue2 的封装版本（如 `vue-fullcalendar`）支持周视图，并提供事件拖拽、资源视图等功能。适合需要复杂日程管理的项目[^1]。 4. **Vue2-Week-Calendar** 这是一个专门针对周视图设计的组件，支持横向和纵向两种布局模式，适合移动端和桌面端应用。该组件提供了事件绑定和点击回调等功能，便于集成到业务逻辑中[^1]。 5. **V-Calendar** V-Calendar 是一个功能全面的日期选择和展示组件，支持周视图、月视图等多种模式。它基于 Vue2 构建，提供了丰富的 API 和高度可定制的主题支持，适合企业级应用[^1]。 ### 示例代码 以下是一个使用 `vue-calendar-component` 的简单示例，展示如何集成周视图： ```html <template> <div> <calendar :week="true" :date.sync="selectedDate" /> <p>Selected Date: {{ selectedDate }}</p> </div> </template> <script> import { Calendar } from 'vue-calendar-component'; export default { components: { Calendar }, data() { return { selectedDate: new Date() }; } }; </script> ``` ### 特性说明 - `:week="true"`：启用周视图模式。 - `:date.sync="selectedDate"`：双向绑定当前选中的日期。 - `selectedDate`：用于存储当前选择的日期值。 ### 选择建议 - 如果项目需要轻量级且快速集成，可以选择 **Vue-Calendar-Component** 或 **Vue2-Week-Calendar**。 - 如果需要更复杂的功能（如事件拖拽、资源管理），建议使用 **FullCalendar** 的 Vue2 封装版本。 - 如果需要高度定制的主题和样式，**V-Calendar** 是一个非常不错的选择。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值