The previous words
Simple calendar is a common application of Date objects in JavaScript and has a wide range of uses. This article will explain in detail the implementation ideas of simple calendars.
Effect demonstration
HTML Description
Use the two inputs of type=number as input controls for year and month respectively, so that the adjustment button is included in the advanced browser
Arrange the week in order from Sunday to Monday
<div> <header class='control'> <input id="conYear" type="number" min="1900" max="2100" step="1"/> <input id="conMonth" type="number" min="1" max="12" step="1"/> </header> <div> <header class='week'> <div>Sunday</div> <div>Monday</div> <div>Tue</div> <div>Thursday</div> <div>Friday</div> <div>Saturday</div> </header> <section id='dayBox'> <div id="day1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> <div>25</div> <div>26</div> <div>27</div> <div>28</div> <div>29</div> <div id="day30">30</div> <div id="day31">31</div> </section> </div> </div> </div>
CSS Description
For the implementation of a simple calendar, first determine the arrangement of the divs of class="day" in the calendar to be floating. This allows all divs of the same level to follow the movement by changing the position of the first day divs.
body{ margin: 0;}input{ border: none; padding: 0;}.box{ width: 354px; margin: 30px auto 0; }.DateBox{ height: 300px; border: 2px solid black;} .week{ overflow: hidden; border-bottom: 1px solid black; line-height: 49px;}.week-in{ height: 49px; float: left; width: 50px; text-align: center;}.dayBox{ overflow: hidden;}.day{ float: left; height: 50px; width: 50px; font:20px/50px 'Microsoft Yahei'; text-align: center;}.control{ overflow: hidden;}.con-in{ height: 50px; float: left; width: 100px; text-align: center; font: 20px/50px "Microsoft Yahei";}JS Description
A total of 5 implementations are required for the JS logic of simple calendars:
【1】You need to obtain the number of days of the month, and what day of the first day, 30th day, and 31st day is the week
【2】According to the week of the first day of the month, change the margin-left value of the first day and move the first day to the corresponding position; due to the floating relationship, the rest of the days will also move to the corresponding position as well.
【3】Hide extra days according to the number of days in the month; of course, the days that may be hidden in other months should be displayed before hiding.
[4] If the 30th of the month is Sunday, a new line will be occupied. At this time, by changing the margin value of the 30th day, it will be moved to the first line (if the 31st day may occupy a new line, similar treatment will be done)
【5】After loading the page, get the current year and month to display the calendar of the current month; when changing the year or month, get the changed value and update the calendar
//Preparation: Get the current style function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style];}//Implementation 1: Get the number of days of the month, and the day of the week on the first day, 30th and 31st of the month function get_data(year,month){ var result = {}; var d = new Date(); //If it is February if(month == 2){ //If it is a leap year if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){ result.days = 29; //If it is a common year}else{ result.days = 28; } //If it is the 4th, 6th, 9th, and November}else if(month == 4 || month == 6 ||month == 9 ||month == 11){ result.days = 30; }else{ result.days = 31; //The 31st day of the month is the week result.day31week = d.getDay(d.setFullYear(year,month-1,31)); } //The first day of the month is the week result.day1week = d.getDay(d.setFullYear(year,month-1,1)); if(month != 2){ //The 30th day of the month is the week result.day30week = d.getDay(d.setFullYear(year,month-1,30)); } return result;}//Implementation 2: According to the week x of the first day of the month, set the margin-left of the first day = width *x so that it corresponds to the correct week position function move_day1(year,month){ var week1 = get_data(year,month).day1week; day1.style.marginLeft = week1%7*parseInt(getCSS(day1,'width'))+ 'px';}//Implementation 3: hide the number of extra days according to the number of days in the month. Of course, first of all, we must first display the number of days hidden in other months function hide_days(year,month){ //Restore the number of days that may be hidden in other months for(var i = 28; i<31; i++){ dayBox.children[i].style.display = 'block'; } //Hide the number of days excess in the month var days = get_data(year,month).days; for(var i = days;i<31;i++){ dayBox.children[i].style.display = 'none'; }};//Implementation 4: If the 30th or 31st of the month is Sunday, a new row will be occupied. Move the newly occupied day to the first row by setting margin-top function move_day30(year,month){ //If the 30th of the month is Sunday if(get_data(year,month).day30week === 0){ day30.style.marginTop = parseInt(getCSS(day30,'height')) *(-5) + 'px'; day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px'; day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px'; day31.style.marginLeft= getCSS(day31,'width'); return; }else{ day30.style.marginTop = day31.style.marginTop = day31.style.marginLeft ='0'; } //If the 31st of the month is Sunday if(get_data(year,month).day31week === 0){ day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px'; }else{ day31.style.marginTop = '0'; }}//Implementation 5: When loading the page, get the current year and month, display the current month calendar; when changing the year or month, get the changed year and month calendar var year= conYear.value=new Date().getFullYear();var month= conMonth.value = new Date().getMonth() + 1;move_day1(year,month);hide_days(year,month);move_day30(year,month);conYear.onchange = conMonth.onchange = function(){ var year = conYear.value; var month = conMonth.value; if(year<1900 || year >2100 ){ year = conYear.value=new Date().getFullYear(); } if(month<1 || month > 12){ month = conMonth.value=new Date().getMonth() + 1; } move_day1(year,month); hide_days(year,month); move_day30(year,month);}Source code demonstration
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.