之前在群里看到了说别人用自己动手做一个日历组件来考下公司员工的学习效果，自己就想试试能否自己动手实现下日历的效果。
最终结果如图所示（这个只是根据星期排列好的日历，不带任何功能）（基于Vue实现的）
首先分析下日历是怎么组成的。
日历的第一个部分就是星期排列，就是最上面一行的表明星期几的一行文字。这个确定了日历是怎么排列的，根据实际情况可以改成"日"开头或者"一"开头。
然后是把日期按照实际情况排列进去。
布局很简单，用flex，大框内是竖着排列，小框内是横着排列。
第一行文字的比较简单，就是把七个元素填充进去就行了。而下面的日期部分就要花点功夫了。
为了便于处理，先把年月日都用个变量存储下。
因为年与日、月与日都是有联系的：闰年2月是29天，非闰年2月是28天；1、3、5、7、8、10、12月都是31天，4、6、9、11月都是30天。
因此做一个月日对应数组，数组的下标+1对应着月份，数组的元素值对应着该月份的天数，而2月份的天数通过引入函数isLeapYear来判断所显示日历的年份是否是闰年从而判断2月的天数。即用 monthDay[this.month - 1] 来表示所要显示的月份的天数。
然后根据天数用循环创建数组[1, 2, 3, ... 30 (, 31)]。
创建好数组后，我一开始的想法是先创建一个6*7的空日历数组，然后再根据Date对象的getDay方法返回的值，拿之前根据天数创建的数组去替换指定位置的元素，最后判断替换后的数组的第36位元素（月份天数大于29，日历以日开始，月份第一天恰好在周六的话，这个月份就会占6个星期）和第29位元素（非闰年二月份只有28天，日历以日开始，二月一日也恰好是周日，这个月份就只占4个星期）是否为空，若为空则删去后面的元素。
但是后来发现太过复杂了，就直接用暴力的方法：判断所显示的月份的第一天和最后一天是周几，从而创建两个相应个数的空元素的数组，最后再把这两个数组与之前根据天数创建的数组拼接起来，去替换原来所要显示的数组。
最后mounted()执行下方法就能够根据 year 和 month 来显示指定年份月份的日期了。
顺便说下这个日历的扩展。
这个日历是根据数据指定的年份和月份来显示的，可以通过双向绑定年份和月份，根据年份和月份的变动去触发方法，从而能够显示指定年月的日历。
标识当前日期需要两个判断，一是判断数据的年份和月份是否与实际情况相同，二是判断根据v-for形成的元素的值是否与当前日期相同，也就是说今天是这个月的多少号是否与元素的值相同，即可为这个元素添加一个类，从而区分今天在日历上的显示。
根据判断数组元素的值是否为空来为元素添加相应的类，为空值的则禁用事件，若有值则更改鼠标显示可添加相应的事件处理。