JavaScript to achieve calendar effect

JavaScript to achieve calendar effect

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make a calendar</title>
  <style>
   body{text-align:center;}
   .box{margin:0 auto;width:880px;}
   .title{background: #ccc;}
   table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
  </style>
  <script src="calendar.js"></script>
  <script>
   var year = parseInt(prompt('Enter year:','2019'));//Make a pop-up window document.write(calendar(year));//Call function to generate a calendar for the specified year</script>
 </head>
 <body>
 </body>
</html>

calendar.js

function calendar(y){
 //Get the day of the week on January 1 of the specified year var w = new Date(y,0).getDay();
 var html = '<div class="box">';
 
 //Concatenate the tables for each month for(m=1;m<=12;m++){
  html += '<table>';
  html += '<tr class="title"><th colspan="7">' + y + 'year' + m+' month</th></tr>';
  html += '<tr><td>Sun</td><td>Mon</td><td>Tuesday</td><td>Wed</td><td>Thurs</td><td>Fri</td><td>Saturday</td></tr>'
  
  //Get the total number of days in each month var max = new Date(y,m,0).getDate();
  
  html += '<tr>'; // start <tr> tag for (d=1;d<=max;d++){
   if(w && d== 1){//If the first day of the month is not Sunday, fill in blanks html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   if(w == 6 && d != max){//If Saturday is not the last day of the month, wrap html += '</tr><tr>';
   }else if(d==max){//The last day of the month, close the </tr> tag html += '</tr>';
   }
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>';
 }
 html += '</div>';
 return 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:
  • How to create a perpetual calendar using JS
  • JS makes a calendar with tab switching
  • js to create a complete example of a simple calendar

<<:  Problems encountered when installing mysql-8.0.19-winx64: Can't create directory 'xxxx\Database\'

>>:  How to recover deleted MySQL 8.0.17 root account and password under Windows

Recommend

A brief discussion on read-only and disabled attributes in forms

Read-only and disabled attributes in forms 1. Rea...

Detailed use cases of vue3 teleport

Official Website https://cli.vuejs.org/en/guide/ ...

Teach you the detailed process of installing DOClever with Docker Compose

Table of contents 1. What is Docker Compose and h...

21 MySQL standardization and optimization best practices!

Preface Every good habit is a treasure. This arti...

Linux system MySQL8.0.19 quick installation and configuration tutorial diagram

Table of contents 1. Environment Introduction 2. ...

Detailed explanation of MySQL 8's new feature ROLE

What problems does MySQL ROLE solve? If you are a...

Use href in html to pop up a file download dialog box when clicking a link

I learned a new trick today. I didn’t know it befo...

Shtml Concise Tutorial

Shtml and asp are similar. In files named shtml, s...

17 JavaScript One-Liners

Table of contents 1. DOM & BOM related 1. Che...

HTML6 implements folding menu and accordion menu example code

The main part of the page: <body> <ul id...

Solve the problem of managing containers with Docker Compose

In Docker's design, a container runs only one...

Analyze the method of prometheus+grafana monitoring nginx

Table of contents 1. Download 2. Install nginx an...

Install Docker environment in Linux environment (no pitfalls)

Table of contents Installation Prerequisites Step...

Implementing a simple web clock with JavaScript

Use JavaScript to implement a web page clock. The...