JS css+html to achieve simple calendar

JS css+html to achieve simple calendar _javascript skills

Last Update:2017-01-19 Source: Internet

Author: User

Tags getdate prev

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Many places in the Web page will use the calendar display, the choice and so on, this article uses the HTML, the CSS, the JavaScript implements the simple calendar. The effect will be the same as the left side of the page, you can switch last month, next month. can also be extended according to the actual situation.

Html
The HTML section is simpler, declares a div, and the concrete HTML is generated with JavaScript. The overall content is probably this:

<!doctype html>

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 last month's button icon */. 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 next month's button icon * * * 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 High/calendar-table tr{height:30px;
line-height:30px;

/* The current day color special display/* Currentday {color:red}

* * This month text color/currentmonth {color: #999;}
 * * Other month colors/othermonth{color: #ede;}

The style setup basically has no lesson to say, some simple settings. For example, the special is "last month", "next month" icon, using the absolute positioning, using the CSS border property to set the style.

JavaScript Date Object
start the formal JS code, you need to first understand the Date object in JS, through the Date object, you can get to the date of the month and a minute and time stamps and other information, specific reference: http://www.w3school.com.cn/jsref/jsref_obj_date.asp

 var D1 = new Date ();  Get current system time my present time is April 25, 2016 Monday
 D1.getfullyear ();    Obtain the year information, 2016
 d1.getmonth ();      Get the month information (starting from 0:0-11) 3
 d1.getdate ();      Get Day Info here results:
 d1.getday ();      Get week info (0-6) Here results: 1

It is also possible to set the date of the year in the initialization

 # set March 15, 2016
 var d2 = new Date (2016, 2);    The month is counted starting from 0, which needs minus one
 d2.getfullyear ();          2016
 D2.getmonth ();            2
 d2.getdate ();
 d2.tolocaledatestring ();      "2016/3/15" proof set correctly

The calendar will cover issues like how many days of the month, in JS is very simple, if set year day, more than the month, JS will automatically be counted as next month, for example, April only 30 days, if set to 31st, the date of the type is automatically counted as May 1; If set to 0 days, JS will be processed into April 30, then May-1st is April 29

var d3 = new Date (2016, 3);
D3.tolocaledatestring ();      "2016/4/30"
var d4 = new Date (2016, 3);
D4.tolocaledatestring ();      "2016/5/1"
var d5 = new Date (2016, 3);
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
understands the basic usage of the Date object in JS, followed by the Code implementation section, where the overall idea is to define a global dateobj variable that records the year and month information that is needed to be displayed in the table. The contents of the title are based on the dateobj, and the date in the table dateobj the number 1th of the year in the form to determine the position of the number 1th in the first row of the table, pushing back the data for the last days of last month, pushing this month and the next month.
Concrete steps:
1. Declare the dateobj variable and assign the initial value to the current system time
2. Render HTML elements in the calendar Div
3. Get the information for the month 1th by Dateobj and iterate through all the dates in the table
4. Bind an event to the previous month, next month icon

(function () {/* * * * is used to record the date, displayed, according to the date in the Dateobj/var dateobj = (function () {var _date = new Date ();
      Default view current system time return {Getdate:function () {return _date;
      }, Setdate:function (date) {_date = date;
  }
    };

  })();
  Set the HTML portion of the Calendar Div renderhtml ();
  The table shows the date showcalendardata ();

  Binding event bindevent ();
    /** * Render HTML structure/function renderhtml () {var calendar = document.getElementById ("Calendar");  var titlebox = document.createelement ("div");  Title box set last month title var Bodybox = document.createelement ("div");
    The table area displays data//sets the HTML Titlebox.classname = ' Calendar-title-box ' in the title box; titlebox.innerhtml = "<span class= ' prev-month ' id= ' prevmonth ' ></span>" + "<span class= ' Calendar-title"
    ' id= ' calendartitle ' ></span> ' + ' <span id= ' nextmonth ' class= ' next-month ' ></span> ';    Calendar.appendchild (Titlebox);

   Add to Calendar div Sets the HTML structure of the table area Bodybox.classname = ' Calendar-body-box ';
              var _headhtml = "<tr>" + "<th> Day </th>" + "<th> one </th>" +
              "<th> two </th>" + "<th> three </th>" + "<th> four </th>" +
    "<th> five </th>" + "<th> six </th>" + "</tr>";

    var _bodyhtml = ""; One months up to 31 days, so one months up to 6 rows of table for (var i = 0; i < 6; i++) {_bodyhtml = + <tr> "+" <td> </td> "+" <td></td> "+" <td></td> "+" &LT;TD&GT;&L T;/td> "+" <td></td> "+" <td></td> "+" <td><
    /TD> "+" </tr> "; } bodybox.innerhtml = "<table id= ' calendartable ' class= ' calendar-table ' >" + _headhtml + _bodyhtml + "&LT;/TABLE&Gt; ";
  Add to Calendar div calendar.appendchild (bodybox);
    /** * Table Displays the data and sets 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 date data in a table var _table = document.getElementById ("calendartable");
    var _tds = _table.getelementsbytagname ("TD");  var _firstday = new Date (_year, _month-1, 1); The 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 month _tds[i].classname = ' othermonth '; }}/** * Binding next month Event/function bindevent () {var prevmonth = document.getElementById ("Prevmonth")
    ;
    var nextmonth = document.getElementById ("Nextmonth");
    Addevent (Prevmonth, ' click ', Toprevmonth);
  Addevent (Nextmonth, ' click ', Tonextmonth); /** * Bind Event/function addevent (DOM, EType, func) {if (Dom.addeventlistener) {//DOM 2.0 Dom.adde
      Ventlistener (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 last month icon Trigger/function Toprevmonth () {var date = dateobj.getdate ();
    Dateobj.setdate (New Date (Date.getfullyear (), Date.getmonth ()-1, 1));
  Showcalendardata ();
    /** * Click Next month icon to trigger/function Tonextmonth () {var date = dateobj.getdate ();
    Dateobj.setdate (New Date (Date.getfullyear (), Date.getmonth () + 1, 1));
  Showcalendardata ();
    /** * Date converted to string, 4-bit year + 2-bit month + 2-bit/function getdatestr (date) {var _year = date.getfullyear ();    var _month = date.getmonth () + 1;
    
    The month counts starting from 0 var _d = date.getdate (); _month = (_month > 9)?
    ("" + _month): ("0" + _month); _d = (_d > 9)?
    ("" + _d): ("0" + _d);
  Return _year + _month + _d;
 }
})();

In this case, there is no event in the click of the date in the table, and you can add the following code to the Bindevent function to get information about the date clicked

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 '));}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More