Home>

Calendar displays are used in many places in web pages.Choice, etc. This article uses html, css, javascript to implement a simple calendar.The effect after completion is similar to the effect on the left side of the page.You can switch between last month and next month. Can also be expanded according to the actual situation.

html

The html part is relatively simple,Declare a div, the specific html is generated with javascript. The overall content looks like this:

<! Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="external css file path" />
  <title>demo</title>
</head>
<body>
  <div></div>
  <script type="text/javascript" src="path to external javascript file"></script>
</body>
</html>

css

/* General 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 button icons for last 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 button icon for 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 calendar table style * /
.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 the month * /
.currentmonth {
  color:#999;
}
/* Other month colors * /
.othermonth {
  color:#ede;
}

There is little to say about style settings.Some simple settings.For example, the special icons are "last month" and "next month". They use absolute positioning and use the border property in css to set the style.

javascript date objectBefore starting formal js code,Need to understand the date object in js first, through the date object, you can get the information such as year, month, day, minute, second, and time stampSpecific reference:

var d1=new date ();//Get the current system time My time is Monday, April 25, 2016
 d1.getfullyear ();//Get the year information, 2016
 d1.getmonth ();//Get month information (starting from 0 range:0-11) 3
 d1.getdate ();//Get day information Results here:25
 d1.getday ();//Get weekday information (0-6) Results here:1

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

#Set March 15, 2016
 var d2=new date (2016, 2, 15);//month is counted from 0, Need to decrement
 d2.getfullyear ();//2016
 d2.getmonth ();//2
 d2.getdate ();//15
 d2.tolocaledatestring ();//"2016/3/15" proves the setting is correct

Questions like how many days per month are involved in the calendar,Very simple in js,If you set the year, month and day,Beyond the current month,js will be automatically counted as next month,For example, there are only 30 days in April. If it is set to 31, the date type obtained will be automatically counted as May 1;if it is set to May 0, JS will be processed as April 30, then May-1 Which 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"

javascriptUnderstand the basic usage of the date object in js,The next part is the code implementation.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 dates in the table are all information from dateobj to the 1st corresponding to the year and month.You can determine the position of No. 1 in the first row of the form.Based on this, the data of the last days of the previous month and the data of the current month and the next month are being pushed backward.

Specific steps:

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

2. render html element in calendar div

3. Get the information on the 1st of the month through dateobj,And iterate through all the dates in the table

4. Binding events to previous month and next month icons

(function () {
  /*
   * For recording dates,When displayed,Display year and month based on date in dateobj
   * /
  var dateobj=(function () {
    var _date=new date ();//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 dates 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 previous month next month title
    var bodybox=document.createelement ("div");//table area displays data
    //set the html in the title box
    titlebox.classname="calendar-title-box";
    titlebox.innerhtml="<span></span>" +
      "&Span></span>" +
      "<span></span>";
    calendar.appendchild (titlebox);//Add to calendar div
    //Set the html structure of the table area
    bodybox.classname="calendar-body-box";
    var _headhtml="<tr>" +
              "<th>day</th>" +
              "<th>a</th>" +
              "<th>two</th>" +
              "<th>three</th>" +
              "<th>four</th>" +
              "<th>five</th>" +
              "<th>six</th>" +
            "</tr>";
    var _bodyhtml="";
    //A maximum of 31 days in a month, so a maximum of 6 rows in a month
    for (var i=0;i<6;i ++) {
      _bodyhtml +="<tr>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
            "</tr>";
    }
    bodybox.innerhtml="<table>" +
              _headhtml + _bodyhtml +
              "</table>";
    //added to the calendar div
    calendar.appendchild (bodybox);
  }
  /**
   * Data displayed 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 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 the current month
    for (var i=0;i<_tds.length;i ++) {
      var _thisday=new date (_year, _month-1, i + 1-_firstday.getday ());
      var _thisdaystr=getdatestr (_thisday);
      _tds [i] .innertext=_thisday.getdate ();
      //_tds[i].data=_thisdaystr;
      _tds [i] .setattribute ("data", _thisdaystr);
      if (_thisdaystr == getdatestr (new date ())) {//current day
        _tds [i] .classname="currentday";
      } else if (_thisdaystr.substr (0, 6) == getdatestr (_firstday) .substr (0, 6)) {
        _tds [i] .classname="currentmonth";//current month
      } else {//other months
        _tds [i] .classname="othermonth";
      }
    }
  }
  /**
   * Binding events last month and next month
   * /
  function bindevent () {
    var prevmonth=document.getelementbyid ("prevmonth");
    var nextmonth=document.getelementbyid ("nextmonth");
    addevent (prevmonth, "click", toprevmonth);
    addevent (nextmonth, "click", tonextmonth);
  }
  /**
   * Binding event
   * /
  function addevent (dom, etype, func) {
    if (dom.addeventlistener) {//dom 2.0
      dom.addeventlistener (etype, function (e) {
        func (e);
      });
    } else if (dom.attachevent) {//ie5 +
      dom.attachevent ("on" + etype, function (e) {
        func (e);
      });
    } else {//dom 0
      dom ["on" + etype]=function (e) {
        func (e);
      }
    }
  }
  /**
   * Click on last month icon to trigger
   * /
  function toprevmonth () {
    var date=dateobj.getdate ();
    dateobj.setdate (new date (date.getfullyear (), date.getmonth ()-1, 1));
    showcalendardata ();
  }
  /**
   * Click on the next month icon to trigger
   * /
  function tonextmonth () {
    var date=dateobj.getdate ();
    dateobj.setdate (new date (date.getfullyear (), date.getmonth () + 1, 1));
    showcalendardata ();
  }
  /**
   * Dates are converted to strings, 4 years + 2 months + 2 days
   * /
  function getdatestr (date) {
    var _year=date.getfullyear ();
    var _month=date.getmonth () + 1;//month counts from 0
    var _d=date.getdate ();
    _month=(_month>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 get 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"));
  });
}
  • Previous Usage analysis of rules class validator in Yii data model
  • Next Talking about Python object memory footprint