How to realize the custom calendar effect with JavaScript

This article mainly explains "how to achieve custom calendar effect in JavaScript". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "JavaScript how to achieve custom calendar effect" bar!

Idea: get the day of the week on the first day of each month, then fill in the previous days blank, cycle through the number of days in each month, determine and add a separate style to the current time, click on the previous month, and change the month next month.

Get the first day of the current month: the return value is an integer between 0 (Sunday) and 6 (Saturday)

Var date = new Date (); var y=date.getFullYear (); var m=date.getMonth (); new Date. GetDay ()

Gets how many days there are in the current month

Var date = new Date (); var y=date.getFullYear (); var m=date.getMonth (); new Date. GetDate () + 1

Finally, click the previous month, the next month plus or minus one, in the execution of the encapsulated calendar function.

All codes:

Document * {margin: 0; padding: 0;} body {background: # 2c3e50;} .calendar-tip {width: 400px; margin: 50px auto;} .calendar-tip {font-size: 16px; text-align: center Color: # fff;} .prev {float: left; cursor: pointer;} .next {float: right; cursor: pointer;}. Calendar-month {text-align: center; margin: 10px 0; color: # fff } ul {list-style: none; display: flex;} li {width: 57px; text-align: center; height: 55px; line-height: 55px; font-size: 16px; color: # fff }. Calendar-day {display: flex;}. Calendar-day span {flex: 1; color: # fff; text-align: center; height: 40px; line-height: 40px;} .calendar-data {display: flex; flex-wrap: wrap } li {width: 57px; cursor: pointer;} li:hover {background: # 2d3436;} .calendar-data .on {color: # d63031 Last month, 2022, next January, May Day, one, two, three, four, five, six 1 1 1 var date = new Date () Var year = document.querySelector ("# year"); var month = document.querySelector (".birthday-month"); var calendarData = document.querySelector (".prev"); var prev = document.querySelector (".prev"); var next = document.querySelector (".next") Var monthArr = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var ymemt mlight dint date.getFullYear dint to daylight; calendar (); function calendar () {y = date.getFullYear () Yearbook [XSS _ clean] = y + "year"; m = date.getMonth (); month [XSS _ clean] = monthArr [m]; day = new Date (y, m, 1). GetDay (); / / get the first day of each month d = new Date (y, m + 1,-1). GetDate () + 1 / / get the number of days html = ""; / / fill the time before the first day of each month as empty for (var I = 0; I < day; iTunes +) {html + = "";} for (var j = 1; j)