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

Tips for data statistics in MySQL

As a commonly used database, MySQL requires a lot...

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Table of contents Preface 1. Reasons: 2. Solution...

Button does not specify type as submit. Clicking the button does not jump to the specified URL.

Today, due to project requirements, js is needed t...

How to reduce the memory and CPU usage of web pages

<br />Some web pages may not look large but ...

MySQL 8.0.21 installation tutorial under Windows system (illustration and text)

Installation suggestion : Try not to use .exe for...

Detailed graphic instructions for downloading and installing the unzipped version of MySQL 5.7.18 and starting the MySQL service

Because the distribution package of MySQL Communi...

Examples of correct use of maps in WeChat mini programs

Table of contents Preface 1. Preparation 2. Actua...

Detailed tutorial on installing ElasticSearch 6.x in docker

First, pull the image (or just create a container...

MySQL slow query and query reconstruction method record

Preface What is a slow query and how to optimize ...

Summary of commonly used operators and functions in MySQL

Let’s build the data table first. use test; creat...

A detailed discussion of components in Vue

Table of contents 1. Component Registration 2. Us...

Graphical tutorial on installing JDK1.8 under CentOS7.4

Linux installation JDK1.8 steps 1. Check whether ...

Solve the mysql problem: Unable to continue code execution because MSVCR120.dll is not found

1. Problem The problems encountered when initiali...

How to set and get the number of Mysql connections

Get the number of connections --- Get the maximum...

Specific use of Mysql prepare preprocessing

Table of contents 1. Preprocessing 2. Pretreatmen...