Implementation of html simple calendar (with source code)

Implementation of simple html calendar (with source code)

In the web page Calendar display, selection, etc. are used in many places. This article uses html, css, and Javascript to implement a simple calendar. The effect after completion is similar to the effect on the left side of the page, and you can switch between the previous month and the next month. It can also be extended according to the actual situation.

html

The html part is relatively simple, declare a div, and the specific html is generated with Javascript. The overall content is probably like this:

css

/* Overall settings */
 *{margin:0px;padding:0px;}
 /**
  * Set the size of the calendar
  */
 .calendar{
   width: 240px;
   height: 400px;
   display: block;
 }
 /**
  * Set calendar top box
  */
 .calendar .calendar-title-box{
   position: relative;
   width: 100%;
   height: 36px;
   line-height: 36px;
   text-align: center;
   border-bottom: 1px solid #ddd;
 }
 /**
  * Set the button icon for the previous month
  */
 .calendar .prev-month {
   position: absolute;
   top: 12px;
   left: 0px;
   display: inline-block;
   width: 0px;
   height: 0px;
   border-left: 0px;
   border-top: 6px solid transparent;
   border-right: 8px solid #999;
   border-bottom: 6px solid transparent;
   cursor: pointer;
 }
 /**
  * Set the button icon for the next month
  */
 .calendar.next-month {
   position: absolute;
   top: 12px;
   right: 0px;
   display: inline-block;
   width: 0px;
   height: 0px;
   border-right: 0px;
   border-top: 6px solid transparent;
   border-left: 8px solid #999;
   border-bottom: 6px solid transparent;
   cursor: pointer;
 }
 /* Set the style of the calendar table */
 .calendar-table{
   width: 100%;
   border-collapse: collapse;
   text-align: center;
 }
 /* table row height */
 .calendar-table tr{
   height: 30px;
   line-height: 30px;
 }
 /* current day color special display */
 .currentDay {
   color: red;
 }
 /* text color of this month */
 .currentMonth {
   color: #999;
 }
 /* Other month colors */
 .otherMonth{
   color: #ede;
 }

There is basically nothing to say about the style setting, some simple settings. For example, the icons representing “last month” and “next month” are special, using absolute positioning and using the border attribute in css to set the style.

Javascript Date object

Before starting the formal js code, you need to understand the Date object in js first. Through the Date object, you can get the year, month, and day For information such as hours, minutes, seconds, and timestamps, please refer to: http://www.w3school.com.cn/jsref/jsref_obj_date.asp

var d1 = new Date(); // Get the current system time The current time is Monday, April 25, 2016

d1.getFullYear(); // Get year information, 2016

d1.getMonth(); // Get month information (Range from 0: 0-11) 3

d1.getDate(); // Get the day information here The result: 25

d1.getDay(); // Get Week information (0-6) The result here: 1

You can also directly set the year, month and day information during initialization

#Set March 15, 2016

var d2 = new Date(2016, 2, 15); // months start counting from 0, need to subtract one

d2.getFullYear(); // 2016

d2.getMonth(); // 2

d2.getDate(); // 15

d2.toLocaleDateString(); // “2016/3/15” proof setting Correct

The calendar will involve issues such as the number of days in each month, which is very simple in js. If the year, month, and day exceed the current month, js will automatically calculate it as the next month. For example, there are only 30 days in April. If it is set to 31, it will be automatically calculated as May 1 in the obtained Date type; if it is set to May 0, js will process it as April 30, then May-1 That is April 29

var d3 = new Date(2016, 3, 30);
 d3.toLocaleDateString(); // "2016/4/30"
 var d4 = new Date(2016, 3, 31);
 d4.toLocaleDateString(); // "2016/5/1"
 var d5 = new Date(2016, 3, 33);
 d5.toLocaleDateString(); // "2016/5/3"
 var d6 = new Date(2016, 4, 1);
 d6.toLocaleDateString(); // "2016/5/1"
 var d7 = new Date(2016, 4, 0);
 d7.toLocaleDateString(); // "2016/4/30"
 var d8 = new Date(2016, 4, -3);
 d8.toLocaleDateString(); // "2016/4/27"

Javascript

Understanding the basic usage of the Date object in js, the next step is The code implementation part is over, the overall idea is this: define a global dateObj variable to record the year and month information that needs to be displayed in the table. The content in the title is taken from dateObj, and the date in the table is taken from dateObj to get all the information of the 1st corresponding to the year and month, so that the position of the 1st in the first row of the table can be determined, and the last month of the previous month can be reversed. Data for a few days, forward data for this month and next month.

Specific steps:

1. Declare the dateObj variable and assign the initial value to the current system time

2. Render html elements to the calendar div

3. Obtain the information on the 1st of the month through dateObj, and use this to traverse all the dates in the table

strong>

(function  (){
   /*
    * for note�Date, when displayed, according to the year and month of the date in dateObj
    */
   var dateObj = (function(){
     var _date = new Date(); // The default is the current system time
     return {
       getDate : function(){
         return_date;
       },
       setDate : function(date) {
         _date = date;
       }
     };
   })();
   // Set the html part in the calendar div
   renderHtml();
   // Display the date in the table
   showCalendarData();
   // bind event
   bindEvent();
   /**
    * Render html structure
    */
   function renderHtml() {
     var calendar = document. getElementById("calendar");
     var titleBox = document.createElement("div"); // title box, set the title of the previous month and the next month
     var bodyBox = document.createElement("div"); // display data in table area
     // set the html in the title box
     titleBox.className = 'calendar-title-box';
     titleBox.innerHTML = "" +
       "" +
       "";
     calendar.appendChild(titleBox); // add to calendar div
     // Set the html structure of the table area
     bodyBox.className = 'calendar-body-box';
     var_headHtml = "" +
               "day" +
               "one" +
               "two" +
               "Three" +
               "four" +
               "five" +
               "six" +
             "";
     var_bodyHtml = "";
     // There are up to 31 days in a month, so a month can occupy up to 6 rows of tables
     for(var i = 0; i <6; i++) {
       _bodyHtml += "" +
               "" +
               "" +
               "" +
               "" +
               "" +
               "" +
               "" +
             "";
     }
     bodyBox.innerHTML = "" +
               _headHtml + _bodyHtml +
               "";
     // add to calendar div
     calendar.appendChild(bodyBox);
   }
   /**
    * Display data in the table and set the class name
    */
   function showCalendarData() {
     var _year = dateObj.getDate().getFullYear();
     var _mOnth = dateObj.getDate().getMonth() + 1;
     var _dateStr = getDateStr(dateObj. getDate());
     // Set the year and month information in the top title bar
     var calendarTitle = document. getElementById("calendarTitle");
     var titleStr = _dateStr.substr(0, 4) + "year" + _dateStr.substr(4,2) + "month";
     calendarTitle. innerText = titleStr;
     // Set the date data in the table
     var _table = document. getElementById("calendarTable");
     var _tds = _table.getElementsByTagName("td");
     var _firstDay = new Date(_year, _month - 1, 1); // first day of current month
     for(var i = 0; i  9) ? ("" + _month) : ("0" + _month);
     _d = (_d > 9) ? ("" + _d) : ("0" + _d);
     return _year + _month + _d;
   }
 })();
 In this example, the event when the date in the table is clicked is not added. You can add the following code to the bindEvent function to obtain the information of the clicked date
 var table = document. getElementById("calendarTable");
 var tds = table.getElementsByTagName('td');
 for(var i = 0; i <tds. length; i++) {
   addEvent(tds[i], 'click', function(e){
     console.log(e.target.getAttribute('data'));
   });
 }