Recently, I have been watching native javascript and ES6 and haven’t masturbated for a long time. Suddenly, I saw an article on Zhihu and a writer said “# I feel I have learned all the basic knowledge of javascript. Why can’t I write the homework for a calendar?” At that time, I had an idea to try their hand out of a calendar component, so it took two days to masturbate, after testing and optimization finally came out, is currently compatible with the mainstream browser such as IE11 is no problem. However, THE original intention of MY choice of PO is that I want more friends who are better than me to help me point out the shortcomings and better writing method, please give me more advice on the shortcomings!

The core code is attached below:

// Get the days of the selected month

`getCurMonthDay: function(month) { var days; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days = 31; break; case 4: case 6: case 9: case 11: days = 30; break; case 2: days = this.fnToggleYear(this.current.year) ? 29:28; break; } return days; } `Copy the code

Gets the total number of days in the current month

getDays: function(month) { // month = parseInt(month_2); this.current.month = month; this.days = this.getCurMonthDay(month); var html = '', total = 42; Let {year, _month, day} = this.current; var start_week = new Date(year, month - 1, 1).getDay(); var prev_year = (month - 1) > 0 ? year : year - 1, prev_month = (month - 1) > 0 ? (month - 1) : 12, prev_month_days = this.getCurMonthDay(prev_month); var next_month_days = total - this.days - start_week, next_year = (month + 1) > 12 ? year + 1 : year, next_month = (month + 1) > 12 ? 1 : (month + 1); For (var I = start_week; i >= 0; i--) { let _day = this.formatDay(prev_month_days - i); let date = { prev_year, prev_month, _day }; html += '<li class="prev" ymd="' + (Object.values(date).join('-')) + '">' + _day + '</li>' } for (var i = 1; i <= this.days; i++) { let f_day = this.formatDay(i); let date = { year, month, f_day }; html += '<li class="' + (day == i ? 'select' : ') + '" ymd = "' + (Object) values (date). The join (' - ')) + '" >' + f_day + '< / li >'} / / behind the date of the supplement for (var I = 1; i < next_month_days; i++) { let f_day = this.formatDay(i); let date = { next_year, next_month, f_day }; html += '<li class="next" ymd="' + (Object.values(date).join('-')) + '">' + f_day + '</li>' } this.setHtml('set-day' + this._el, html); this.fnChooseDay(); }

// Select a date

`fnChooseDay: function() { var vm = this; let lis = document.querySelectorAll('#set-day' + this._el + ' li'); for (let item of lis) { item.onclick = function() { let cls = this.className; this.className = cls.indexOf('select') ! = 1? cls : cls + ' select'; vm.current.day = this.innerText; if (cls.indexOf('prev') ! = -1 || cls.indexOf('next') ! = -1) { let date = this.getAttribute('ymd').split('-').map(item => parseInt(item)); let [year, month, day] = date; vm.current = { year, month, day }; vm.year_el.value = year; vm.getDays(month) vm.month_el.options[month - 1].selected = true; } for (let child of lis) { if (child ! = this) { let c_cls = child.className; if (c_cls.indexOf('select') ! = -1) { child.className = c_cls.replace(/select/g, ""); }}}}}} 'Copy the code

New Calendar(‘test1’, ‘2021-11-01’);

Copy the code

Source code address: gitee.com/aliceeason/… Use Git to download by yourself, please kindly point out the shortcomings