JavaScript custom calendar effect

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

Recommend

Introduction to Nginx log management

Nginx log description Through access logs, you ca...

Detailed tutorial on installing Docker on CentOS 7.5

Introduction to Docker Docker is an open source c...

How to configure static network connection in Linux

Configuring network connectivity for Linux system...

Ajax jquery realizes the refresh effect of a div on the page

The original code is this: <div class='con...

How to add docker port and get dockerfile

Get the Dockerfile from the Docker image docker h...

Detailed explanation of the implementation of nginx process lock

Table of contents 1. The role of nginx process lo...

WHMCS V7.4.2 Graphical Installation Tutorial

1. Introduction WHMCS provides an all-in-one solu...

Rounding operation of datetime field in MySQL

Table of contents Preface 1. Background 2. Simula...

HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)

Without further ado, I will post the code for you...

Several ways to hide Html elements

1. Use CSS Copy code The code is as follows: style...

MySQL paging performance exploration

Several common paging methods: 1. Escalator metho...

Detailed explanation of the use of MySQL paradigm

1. Paradigm The English name of the paradigm is N...

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mal...

Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7

Preface I recently encountered a problem at work....

Not all pop-ups are rogue. Tips on designing website pop-ups

Pop-up news is common in domestic Internet servic...