JavaScript custom calendar effect

This article shares the specific code of JavaScript custom calendar effect for your reference. The specific content is as follows

Implementation idea: Get the day of the week on the first day of each month, then fill the previous days as empty, get the number of days in each month, fill in a loop, judge and add a separate style to the current time, and change the month when clicking the previous month and the 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(y,m,1).getDay();

Get the number of days in the current month

var date = new Date();
var y=date.getFullYear();
var m=date.getMonth();
new Date(y,m+1,-1).getDate()+1;

Finally, click on the previous month or the next month to add or subtract one and execute the encapsulated calendar function.

Full code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #2c3e50;
        }

        .calendar {
            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;
        }
    </style>
</head>

<body>
    <div class="calendar">
        <div class="calendar-tip">
            <span class="prev">Previous month</span>
            <em id="year">2022</em>
            <span class="next">Next month</span>
        </div>
        <div class="calendar-month">May</div>
        <div class="calendar-day">
            <span>Day</span>
            <span>一</span>
            <span>Two</span>
            <span>three</span>
            <span>Four</span>
            <span>Five</span>
            <span>six</span>
        </div>
        <ul class="calendar-data">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <script>
        var date = new Date();
        var year = document.querySelector("#year");
        var month = document.querySelector(".calendar-month");
        var calendarData = document.querySelector(".calendar-data");
        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 y,m,day,d,html,today;
        calendar();

        function calendar() {
            y = date.getFullYear();
            year.innerHTML = y + "年";

            m = date.getMonth();
            month.innerHTML = 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 into empty for (var i = 0; i < day; i++) {
                html += "<li> </li>";
            }

            for (var j = 1; j <= d; j++) {
                if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) {
                    html += "<li class='on'>" + j + "</li>";
                } else {
                    html += "<li>" + j + "</li>";
                }

            }
            calendarData.innerHTML = html;
        }

        prev.onclick = function () {
            date.setMonth(date.getMonth() - 1);
            calendar();
        }

        next.onclick = function () {
            date.setMonth(date.getMonth() + 1);
            calendar();
        }
    </script>
</body>

</html>

Effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: