如何独立开发一个Vue.js日历组件？

本文共计1805个文字，预计阅读时间需要8分钟。

在先前项目中，我曾使用过日历控件，因时间问题而无法深入开发。后来，便萌生了编写一个日历控件的念头。本文将介绍日历数据的处理，包括去除月份天数判断等。

之前项目中有用到日历控件，当时由于时间问题，是在网上找到一个demo，然后二次开发的，从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理，去除月份天数判断以及是否闰年判断。

设计（以最常用的按月份的日历）

日历其实大家都很熟悉，一切的设计都是从功能出发，这是根本。日历的功能分为两大块。

• 日历头部：当前年份/月份。
• 日历主体：当前月份的具体的日期信息。
• 日历主体的行数：现在我们看到的日历基本上为6行，因为一个月最多为31天，假设当前月的第一天为上一月最后一周的最后一天。如果是五行数据的话则只显示了29天，这也是为什么显示6行数据的原因。
  

功能点

• 日历初始渲染日期为当前月份
• 头部的左右滑动，日历数据需要显示对应月份的信息
• 点击日期本身可以进行相关数据操作，并且记录操作内容
• 可以根据调用这设置日历的每周数据以星期*为开始，星期天或者星期一。