Before that others see with their own hands to make a calendar component to test the learning effect under the company's employees in the group that he wanted to see if I can achieve the effect of their own hands under the calendar.
The final result is shown (only the good according to the arrangement of the calendar week, without any function) (Vue based implementation)
Firstly, under the calendar is how the composition.
The first part of the week the calendar is arranged, that is, the top row shows that a line of text day of the week. This determines how the calendar is arranged, according to the actual situation can be changed to "date" at the beginning or at the beginning of "a."
The date is then arranged into the actual situation.
The layout is simple, with a flex, a large box is arranged vertically, the small box is arranged sideways.
The first line of text is relatively simple, it is filled into seven elements on the line. The following dates will spend part of the effort.
To facilitate processing, with the first date variables are stored.
Because of the day, month and day are linked: leap year, February is 29 days, the non-leap year, February is 28 days; 1, 3, 5, 7, 8, 10, 12 months are 31 days, 4, 6, 9 November is 30 days.
Thus for a month day corresponding to the array, the subscript +1 array corresponding to the month, the element value in the array corresponds to the number of days of the month, and the number of days in the month is determined by introducing a function isLeapYear whether the year displayed calendar is a leap year to determine the number of days in February. I.e. with monthDay [this.month - 1] to indicate the number of days of the month to be displayed.
Then creates the array [1, 2, 3, ... 30 (31)] based on the number of days with cycles.
After creating an array, my initial idea is to create an empty calendar array 6 * 7, and then depending on the value getDay Date Object returned before take to replace element specifies the location of the array element number of days to create, final judgment the first element of the array 36 after replacement (greater than 29 days of the month, calendar day to begin the first day of the month just on Saturday, then this month will be accounted for 6 weeks) and 29 elements (non-leap year February only 28 days to calendar days beginning on February also happens to be Sunday this month it accounts for only 4 weeks) is empty, if the latter is empty by deleting elements.
但是后来发现太过复杂了，就直接用暴力的方法：判断所显示的月份的第一天和最后一天是周几，从而创建两个相应个数的空元素的数组，最后再把这两个数组与之前根据天数创建的数组拼接起来，去替换原来所要显示的数组。
最后mounted()执行下方法就能够根据 year 和 month 来显示指定年份月份的日期了。
顺便说下这个日历的扩展。
这个日历是根据数据指定的年份和月份来显示的，可以通过双向绑定年份和月份，根据年份和月份的变动去触发方法，从而能够显示指定年月的日历。
标识当前日期需要两个判断，一是判断数据的年份和月份是否与实际情况相同，二是判断根据v-for形成的元素的值是否与当前日期相同，也就是说今天是这个月的多少号是否与元素的值相同，即可为这个元素添加一个类，从而区分今天在日历上的显示。
根据判断数组元素的值是否为空来为元素添加相应的类，为空值的则禁用事件，若有值则更改鼠标显示可添加相应的事件处理。