Task 04 Calendar

Outcome:
Code:
  1 <!doctype html> 
  2 <html> 
  3 <head> 
  4     <meta charset="utf-8"> 
  5     <title></title> 
  6     <style type="text/css">
  7         *{margin: 10 10 10 10;padding: 0;list-style: none;}
  8         #rili{
  9             float: left;border: 1px solid black;
 10             width: 280px;
 11         }
 12         #n{
 13             width: 100%;height: 20px;
 14             line-height: 20px;text-align: center;
 15         }
 16         .pr{float: left;cursor: pointer;}
 17         .nt{float: right;cursor: pointer;}
 18         #l{
 19             width: 100%;height: 20px;line-height: 20px;float: left;
 20         }
 21         #l span{
 22             float: left;width: 40px;height: 100%;text-align: center;line-height: 20px;
 23         }
 24         #all li{
 25             float: left;width: 40px;height: 40px;text-align: center;line-height: 40px;
 26         }
 27         #all .red{
 28             color: red;
 29         }
 30 
 31     </style>
 32 </head>
 33 <body>
 34 
 35 <script type="text/javascript">
 36     
 37     var innerHtml = [
 38         "<div id='rili'>",
 39             "<div id='n'><span class='pr' id='pr'>prev</span><span id='year'>2016</span>年<span id='Month'>9</span>月<span id='dayNode'>30</span>日<span class='nt' id='nt'>next</span></div>",
 40             "<div id='l'>",
 41                 "<span>一</span>",
 42                 "<span>二</span>",
 43                 "<span>三</span>",
 44                 "<span>四</span>",
 45                 "<span>五</span>",
 46                 "<span style='color:red'>六</span>",
 47                 "<span style='color:red'>日</span>",
 48             "</div>",
 49             "<ul id='all'>",
 50             "</ul>",
 51         "</div>"
 52     ].join('');
 53 
 54     document.body.innerHTML = innerHtml;
 55     window.setMonth = new Date().getMonth();
 56 
 57     pr.onclick = function(){
 58         setMonth--;
 59         setRl();
 60     }
 61     nt.onclick = function(){
 62         setMonth++;
 63         setRl();
 64     }
 65     setRl();
 66     function setRl(){
 67 
 68         var oDate = new Date();
 69         oDate.setMonth(setMonth);
 70         var NowMonth = oDate.getMonth();
 71         var NowYear = oDate.getFullYear();
 72         var NowDays = oDate.getDate();
 73         var oldMonth = setMonth%12;
 74         
 75         if(oldMonth < 0){
 76         oldMonth = (oldMonth % 12) + 12;
 77         }
 78         var oldM = setMonth % 12;
 79         if(oldM < 0){
 80         oldM = (oldM % 12) + 12;
 81         }
 82 
 83         year.innerHTML = NowYear;
 84         Month.innerHTML = NowMonth+1;
 85         dayNode.innerHTML = NowDays;
 86 
 87         oldMonth++;
 88         oDate.setMonth(oldMonth);
 89 
 90         // 0 represents the last day of the last month
 91         oDate.setDate(0);
 92         var allDate = oDate.getDate();
 93 
 94 
 95         oDate.setMonth(oldM);
 96         oDate.setDate(1);
 97 
 98         // Sunday is known in the Chinese calendar as the 7th day in the weeks, while in the western calendar it is the first day.
 99         function toDay(Num){
100             return Num==0 ? 7:Num;
101         }
102         var getDay = toDay(oDate.getDay());
103 
104         all.innerHTML = '';
105         //append blank spaces
106         for(var i = 0;i < getDay-1;i++){
107             var oLi = document.createElement('li');
108             all.appendChild(oLi);
109         }
110 
111 
112         //append dates
113         for(var i = 0;i < allDate;i++){
114             var oLi = document.createElement('li');
115             oLi.innerHTML = i+1;
116             all.appendChild(oLi);
117         }
118 
119         //make the weekends red
120         for(var i=0;i < all.children.length;i++){
121             if(i%7 == 5 || i%7 ==6){
122                 all.children[i].className = 'red';
123             }
124         }
125     }
126 
127 </script>
128 </body>
129 </html>
Source:
https://github.com/JasperZhao901/Calendar