SoFunction
Updated on 2025-03-08

JavaScript implements simple calendar effects

JavaScript implements simple calendar effects

Updated: September 25, 2016 15:38:53 Author: tianzitianxie
This article is sharing with you a simple calendar template made by JavaScript. Friends can continue to supplement according to their needs. I hope you like it.

It's just a simple calendar template, you can add the required functions as needed. This template provides more of acquiring functions about year, month, day, beginning, end of month, and week. You can get it yourself as needed. Welcome to provide easier ways and learn from each other! Thank you ~~

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>calendar</title>
 <style type="text/css">
 * {
  cursor: default;
 }
 div {
  overflow: hidden;
 }
 .mainArea {
  margin: 30px auto 0;
  border: 1px solid #666;
  height: 230px;
  width: 210px;
  background-color: #eee;
  font-family: 'microsoft yahei';
 }

 .top {
  height: 30px;
  background-color: #aaa;
 }

 .top span {
  cursor: default;
 }

 .top span:hover {
  background-color: red;
 }

 .top .selectFlagLeft span,
 .top .selectFlagRight span {
  display: block;
  float: left;
  line-height: 30px;
  text-align: center;
 }

 .top  {
  width: 50%;
 }

 .top  {
  width: 60px;
  height: 30px;
  display: block;
  float: left;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
 }

 .top  {
  display: block;
  height: 30px;
  margin-left: 60px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
 }

 .top .selectFlagLeft {
  float: left;
  width: 60px;
  height: 30px;
 }

 .top .selectFlagRight {
  float: right;
  width: 60px;
  height: 30px;
  margin-top: -30px;
 }

 .top .selectMiddle {
  height: 30px;
  margin-left: 60px;
  margin-right: 60px;
 }

 .dayTb {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #fff;
  ~display: none;
 }

 .dayTb thead {
  background-color: #675;
  color: #eee;
 }

 .dayTb tr {
  height: 24px;
 }

 .dayTb td {
  border: 1px solid #ddd;
  cursor: default;
  background-color: #dadada;
  font-weight: 100;
  color: rgba(102, 102, 102, 0.6);
 }
 /* .dayTb td:hover, */
 .dayTb :hover,
 .dayTb :hover,
 .dayTb :hover {
  background-color: #0fa;
 }

 .dayTb  {
  background-color: #c0f0f0;
  color: #60f;
 }

 .dayTb  {
  color: #f06;
 }

 .dayTb  {
  color: #00a080;
 }

 .footer {
  line-height: 27px;
  text-align: right;
  padding-right: 5px;
 }
 .footer span {
  border: 1px solid #bbb;
  padding: 2px 5px;
  font-size: 12px;
 }
 .selectYears {
  height: 168px;
  width: 100%;
  background-color: #333;
  text-align: center;
  display: none;
 }
 .selectYears {
  color: #fff;
  margin: 0;
  padding: 0;
 }
 .selectYears .contentYears span {
  font-size: 16px;
  padding: 7px 0;
  width: 25%;
  display: block;
  float: left;
 }
 .selectYears span:hover {
  background-color: red;
 }
 .selectFooter span{
  padding: 0 6px;
 }
 .selectYears .returnPage {
  font-size: 12px;
  display: block;
  float: right;
  margin-top: -22px;
  margin-right: 10px;
  padding: 2px 6px;
 }
 </style>
</head>
<body>
 <div class="mainArea">
 <div class="top">
  <div class="selectFlagLeft">
  <span class="selectFlag" >◄</span>
  <span class="selectFlag" ><</span>
  </div>
  <div class="selectMiddle">
  <span class="selectYear" >
  </span>
  <span class="selectMonth" >
  </span>
  </div>
  <div class="selectFlagRight">
  <span class="selectFlag" >></span>
  <span class="selectFlag" >►</span>
  </div>
 </div>
 <table class="dayTb"  border=0 cellspacing=0 cellpadding=0>
  <thead>
  <tr>
   <th>day</th>
   <th>one</th>
   <th>two</th>
   <th>three</th>
   <th>Four</th>
   <th>five</th>
   <th>six</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  </tbody>
 </table>
 <div class="selectYears">
  <div class="contentYears">
  <span>2015</span>
  <span>2014</span>
  <span>2013</span>
  <span>2012</span>
  <span>2011</span>
  <span>2010</span>
  <span>2009</span>
  <span>2008</span>
  <span>2007</span>
  <span>2006</span>
  <span>2005</span>
  <span>2004</span>
  <span>2003</span>
  <span>2002</span>
  <span>2001</span>
  <span>2000</span>
  </div>
  <div class="selectFooter">
  <span>←</span>
  <span>→</span>
  </div>
  <span class="returnPage">Close</span>
 </div>
 <div class="footer">
  <span>今day</span>
  <span>Clear</span>
  <span>Sure</span>
  <span>return</span>
 </div>
 </div>


 <script type="text/javascript">
  = function() {

 /**
   * Time array
   */
  = function() 
 {  
   var now = this; 
   var dateAry = Array(); 
   dateAry[0] = (); 
   dateAry[1] = (()+1<10?"0":"")+(()+1); 
   dateAry[2] = (()<10?"0":"")+(); 
   dateAry[3] = (()<10?"0":"")+(); 
   dateAry[4] = (()<10?"0":"")+(); 
   dateAry[5] = (()<10?"0":"")+(); 
   dateAry[6] = (); 
   return dateAry; 
 };

 /**
   * Maximum number of days in the month
   */
 function getMaxDayOfMonth(iYear, iMonth) {
  var newDate = new Date(iYear,iMonth,0);
  var dateAry = ();
  return parseInt(dateAry[2]);
 };

 /**
   * What is the first day of the month?
   */
 function getFirstDay(iYear, iMonth) {
  var newDate = new Date(iYear,iMonth,1);
  var dateAry = ();
  return parseInt(dateAry[6]);
 };

 var tdNodes = ("td");
 var selectYearNode = ("selectYear");
 var selectMonthNode = ("selectMonth");
 var prevYearNode = ("prevYear");
 var prevMonthNode = ("prevMonth"); 
 var nextMonthNode = ("nextMonth"); 
 var nextYearNode = ("nextYear"); 

 var now = new Date();
 var ary = ();

 function changeYearOrMonth(iYearDiff, iMonthDiff) {
  var currentYear = parseInt();
  var currentMonth = parseInt();
  var newDate = new Date(currentYear+iYearDiff,currentMonth+iMonthDiff-1,1);
  var dateAry = ();
  insertAllMonth(dateAry[0], dateAry[1]);
 };

 function insertAllMonth(iYear, iMonth) {
   = iYear;
   = iMonth;

  var firstDay = getFirstDay(iYear, parseInt(iMonth)-1);
  var maxDay = getMaxDayOfMonth(iYear, iMonth);
  var prevMonthMaxDay = getMaxDayOfMonth(iYear, parseInt(iMonth)-1);

  var i = 0;
  for(i=firstDay;i>0;i--) {
  tdNodes[i-1].innerHTML = prevMonthMaxDay--;
  tdNodes[i-1].className = "";
  }
  for(i=1+firstDay;i<=maxDay+firstDay;i++) {
  tdNodes[i-1].innerHTML = i-firstDay;
  if(iYear == ary[0] && iMonth == ary[1] && i-firstDay == ary[2]) {
   tdNodes[i-1].className = "currentMonth currentDay";
  }else if(i%7 < 2){
   tdNodes[i-1].className = "currentMonth week";
  }else {
   tdNodes[i-1].className = "currentMonth";
  }
  }
  var one = 1;
  for(;i<=;i++) {
  tdNodes[i-1].innerHTML = one++;
  tdNodes[i-1].className = "";
  }
 };

 insertAllMonth(ary[0], ary[1]);

  = function() {
  changeYearOrMonth(-1,0);
 };
  = function() {
  changeYearOrMonth(0,-1);
 };
  = function() {
  changeYearOrMonth(0,1);
 };
  = function() {
  changeYearOrMonth(1,0);
 };

 
 };
 </script>
</body>
</html>

  • JavaScript
  • calendar

Related Articles

  • bootstrap drop-down paging style with jump page code

    This article mainly introduces the bootstrap drop-down paging style in detail, with jump page number, which has certain reference value. Interested friends can refer to it.
    2018-12-12

  • BootStrap intelligent form practical series (eight) form configuration json detailed explanation

    This article mainly introduces the relevant information of the BootStrap intelligent form practical series (eight) form configuration json detailed explanation. This chapter belongs to the advanced part and introduces some configuration knowledge in the form. It is very good and has reference value. Friends who need it can refer to it.
    2016-06-06

  • Memory release issues that need to be paid attention to when programming in IE JS

    In JS programming under IE, the following programming methods will cause the problem that even if IE is turned off, the memory cannot be released. The following classification is given
    2009-06-06

  • Examples of method of loader packaging various files in Webpack

    This article mainly introduces you to the relevant information about loader packaging various files in Webpack, including methods for processing css files, less files, scss files, URL addresses and ES6 advanced syntax. Friends who need it can refer to it
    2019-09-09

  • WeChat applet implements QR code generator

    This article mainly introduces in detail how to develop a simple QR code generator through WeChat applets. The sample code in the article is explained in detail. Interested friends can learn it with the editor.
    2023-01-01

  • How to implement Javascript Request to get request parameters

    When using Javascript Request to obtain parameters, there is always an error. This article provides a detailed solution to this problem. Friends who need to know can refer to it.
    2012-11-11

  • Sample code for making calendars in JavaScript

    This article mainly introduces the sample code for JavaScript making calendars. The sample code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2012-05-05

  • Detailed explanation of how to set private properties in JavaScript

    This article mainly introduces in detail how to set private attributes in JavaScript. The sample code in the article is explained in detail, which has certain reference value. Friends who need it can refer to it.
    2024-03-03

  • js issue of generating random Chinese characters

    2008-02-02

  • WeChat public platform development tutorial (IV) Example introduction: Robot reply (with source code)

    This article mainly introduces the development robot of WeChat public platform, which can enable simple conversations and weather query, etc. You can learn about it if you need it.
    2016-12-12

Latest Comments