Javascript calendar component (1)-build calendar logic (by vczero)
1. Analyze the calendar components and interaction elements (1) components: select the year and month, and display the week, including the month (or some days of the previous month and the next month) (2) dynamically draws the calendar panel based on the selected year and month. (3) A calendar 7 (days) * 5 (Weeks) = 35 grid table. (4) a month is a unified panel. The first day of a month must be in the first line of the calendar panel. The location is determined based on the day of the day. (5) The first grid is Monday, and the last grid is Sunday, which is the calendar panel of 5 weeks. Ii. Determine the calendar above the logical design calendar. Why does the June August 1 military building festival appear in this format? Because the number of days in a month is less than five weeks (35 days), the first row must include the first day of a month, the location of the day is determined based on the day of the day. For example, if the first day of July is Tuesday, then the second day of July 1 is on the second day of the first line, and so on, calculate the date displayed on the panel of the previous month and the date displayed on the panel of the next month. Each table can be viewed as a date object. The next step is to calculate the array of date objects displayed on the dashboard based on the input of different years and months. 3. Construct a calendar class (1) first, construct a calendar class that can pass in the dom div. 1 var Calendar = function (div) {2 this. div = document. getElementById (div); 3}; 4 5 Calendar. week = ['monday', 'tuesday', 'wedday', 'thurs', 'Friday', 'saturday']; 6 Calendar. month = ['October 11', 'October 11', 'October 2016', 'October 2016', 'October 2016', 'October 2016', 'October 2016', 'October 2016 ', 'August 11', 'August 11', 'August 11']; (2) calendar panel logic implementation. A calendar panel contains an array of three date objects. The first is preMonth, because the calendar panel may display some dates of the previous month; the second is the current month; the third is the date array of the next month, nextMonth. Define a function monthPanel to represent a calendar panel. The returned value is a combination of three objects. How to calculate how many dates will be displayed in the previous month? First, calculate the first day of the selected month in the first line (starts from 0) occupies the position (4), and then the total number of days of the previous month (31) subtract this position from the above request, that is, 31--3, 31--31 ., the result is 31--3--31-, 1. How to calculate the date displayed in the next month? Well, there are 35 grids in total, so 35-the number of days of the current month-the position n + 1 occupied by the current month is the number of the next date lattice to be displayed. The integrated code is as follows: Copy code 1 Calendar. prototype. monthPanel = function (date) {2 // if the Date object is passed, the month panel is calculated by the Date object. 3 // otherwise, panel 4 var date = date | new Date (), 5 year = date. getFullYear (), 6 month = date. getMonth (), 7 day = date. getDate (), 8 week = date. getDay (), 9 currentDays = new Date (year, month + 1, 0 ). getDate (), 10 preDays = new Date (year, month, 0 ). getDate (), 11 firstDay = new Date (year, month, 1), 12 fi RstCell = firstDay. getDay () = 0? 6: firstDay. getDay ()-bottoffell = 35-currentDays-firstCell; 14 // The number of days displayed in the previous month 15 var preMonth = []; 16 for (var p = firstCell; p> 0; p --) {17 preMonth. push (new Date (year, month-1, preDays-p + 1); 18} 19 // 20th day of this month var currentMonth = []; 21 for (var c = 0; c <currentDays; c ++) {22 currentMonth. push (new Date (year, month, c + 1); 23} 24 // 25 var nextMonth = []; 26 for (var n = 0; n <bottingell; N ++) {27 nextMonth. push (new Date (year, month + 1, n + 1); 28} 29 30 preMonth = preMonth. concat (currentMonth, nextMonth); 31 return preMonth; 32}; copy the code (3) to check whether the code logic is correct, just using node cmd, therefore, it is possible to simply run it under node (for example, put it on Chrome console), but you need to comment out this first. div = document. getElementById (div); this line. Var c = new Calendar (); console. log (c. monthPanel (new Date (2014, 6, 1); in fact, if no parameter is passed, it is the calendar panel that displays the current month. For example. 3. Build the most basic UI (1) dynamically draw 35 tables copy code 1 for (var I = 0; I <35; I ++) {2 var cellDOM = document. createElement ('div '); 3 cellDOM. style. width = cell. width + 'px '; 4 cellDOM. style. height = cell. height + 'px '; 5 cellDOM. style. display = 'inline-Block'; 6 cellDOM. style. float = 'left'; 7 cellDOM. style. border = '1px solid blue '; 8 cellDOM. style. cursor = 'pointer '; this. div. appendChild (cellDOM); 11} copy code (2) display the header of the date and month Copy code 1 Calendar. prototype. showUI = function (date) {2 var width = this. div. style. width | 800, 3 height = this. div. style. height || (600-30), 4 cell = {width: (parseInt (width)-20)/7, height: (parseInt (height)-30-20) /5}, 5 monthArr = this. monthPanel (date); 6 7 this. addHeader (date); 8 for (var I = 0; I <35; I ++) {9 var cellDOM = document. createElement ('div '); 10 cellDOM. style. width = cell. width + 'Px'; 11 cellDOM. style. height = cell. height + 'px '; 12 cellDOM. style. display = 'inline-Block'; 13 cellDOM. style. float = 'left'; 14 cellDOM. style. border = '1px solid blue '; 15 cellDOM. style. cursor = 'pointer '; 16 cellDOM. innerHTML = monthArr [I]. getDate (); 17 this. div. appendChild (cellDOM); 18} 19 20}; 21 22 Calendar. prototype. addHeader = function (date) {23 var header = document. createElement ('div '); 24 hea Der. style. height = '20px '; 25 header. style. width = this. div. style. width | '800px '; 26 header. style. textAlign = 'center'; 27 header. style. fontWeight = 'bold '; 28 header. innerHTML = date. getFullYear () + 'Year' + (date. getMonth () + 1) + 'month'; 29 console. log (header); 30 this. div. appendChild (header); 31} copy code (3) write HTML and the entire logic code HTML: Copy Code <! Doctype html>