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:

js css+html to realize a simple calendar
A guide to using calendar.js, a lightweight native js calendar plugin
JS learning a simple calendar control
Vue.js creates Calendar effect
JS Calendar Recommendation
Pure js simple calendar implementation code
js calendar control (accurate to the minute)
PHP+javascript calendar control
How to create a simple calendar with js+html
JS implements a simple calendar

<<: Zen coding resource update function enhancement

>>: Google Translate Tool: Quickly implement multilingual websites

JavaScript custom calendar effect

jQuery implements accordion effects

Analysis of the principles of docker containers

Detailed explanation of MySQL database transaction isolation levels

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

js to upload pictures to the server

The role and opening of MySQL slow query log

Implementation steps for building a local web server on Centos8

Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version

Example code for CSS columns to achieve two-end alignment layout

How to connect to virtual machine MySQL using VScode in window environment

Recommend

Windows uses VMware to create a Linux virtual machine and install the CentOS7.2 operating system

React Routing Link Configuration Details

How to change MySQL character set utf8 to utf8mb4

Use of Linux tr command

Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)

Web Design Experience: 5 Excellent Web Design Concepts Full Analysis (Pictures)

React uses emotion to write CSS code

Detailed explanation of mysql5.6 master-slave setup and asynchronous issues

In-depth understanding of the use of r2dbc in MySQL

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Use viewport in meta tag to define screen css

How to install centOS8 in VMware12 (tutorial on installing centos8 in vm virtual machine)

MySQL case when usage example analysis

0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages

How to build a K8S cluster and install docker under Hyper-V