1.  
2. class DatePicker {
3.   constructor(id, callback) {
4.     this.date = undefined;
5.     this.id = id;
6.     this.callback = callback;
7.   }
8.  
9.   render(date) {
10.     this.date = date;
11.     this.update();
12.   }
13.  
14.   createDayInMonth() {
15.     const td = document.createElement('td');
16.     td.setAttribute('onmouseover', 'MouseOverCell(event);');
17.     td.setAttribute('onmouseout', 'MouseOutCell(event);');
18.     td.addEventListener('click', (event) => {
19.       const attribute = event.target.getAttribute("class");
20.       if (!attribute) {
21.         this.callback(this.id, {
22.           year: this.date.getFullYear(),
23.           month: this.date.getMonth() + 1,
24.           day: event.target.textContent
25.         });
26.       }
27.       var tdList = document.getElementsByClassName('chooseDay')
28.       for (var i = 0; i < tdList.length; i++) {
29.         tdList[i].classList.remove('chooseDay');
30.         td.setAttribute('class', 'ThisMonth')
31.       }
32.       td.setAttribute('class','chooseDay')
33.     });
34.     return td;
35.   }
36.   createDayNotInMonth() {
37.     const td = document.createElement('td');
38.     td.setAttribute('onmouseover', 'MouseOverCell(event);');
39.     td.setAttribute('onmouseout', 'MouseOutCell(event);');
40.     td.addEventListener('click', (event) => {
41.       const attribute = event.target.getAttribute("class");
42.       if (!attribute) {
43.         this.callback(this.id, {
44.           year: this.date.getFullYear(),
45.           month: this.date.getMonth() + 1,
46.           day: event.target.textContent
47.         });
48.       }
49.     });
50.     return td;
51.   }
52.  
53.  
54.   update() {
55.     const root = document.getElementById(this.id);
56.     const table = document.createElement('table');
57.     root.appendChild(table);
58.     const headers = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'];
59.     table.style.border = '1';
60.  
61.     //Thêm tiêu đề cho lịch
62.     const topRow = document.createElement('tr');
63.     const header = document.createElement('tr');
64.     topRow.setAttribute('class', 'TopRow');
65.     table.appendChild(topRow);
66.     table.appendChild(header);
67.  
68.     const top = document.createElement('th');
69.     top.setAttribute('class', 'TopTitle');
70.     top.setAttribute('colspan', '7');
71.     const topTitle = document.createElement('span');
72.     topTitle.setAttribute('class', 'TopTitleText');
73.     topTitle.textContent = `${this.date.getMonth() + 1}/${this.date.getFullYear()}`;
74.     topTitle.setAttribute(onmouseover, 'MouseOverTitle(event);');
75.     topTitle.setAttribute(onmouseout, 'MouseOutTitle(event);');
76.     topRow.appendChild(top);
77.  
78.     const lastButton = document.createElement('button');
79.     lastButton.setAttribute("id", "left-button")
80.     const nextButton = document.createElement('button');
81.     nextButton.setAttribute("id", "right-button")
82.     lastButton.addEventListener("click", () => {
83.       this.date.setMonth(this.date.getMonth() - 1);
84.       this.update();
85.       table.remove();
86.     });
87.     lastButton.textContent = '<';
88.     nextButton.addEventListener('click', () => {
89.       this.date.setMonth(this.date.getMonth() + 1);
90.       this.update();
91.       table.remove();
92.     });
93.     nextButton.textContent = '>';
94.     top.appendChild(lastButton);
95.     top.appendChild(topTitle);
96.     top.appendChild(nextButton);
97.  
98.     for (var day of headers) {
99.       const e = document.createElement('th');
100.       e.textContent = day;
101.       header.appendChild(e);
102.     }
103.  
104.    
105.     const date = new Date(this.date);
106.     date.setDate(1);
107.     const first_row = document.createElement('tr');
108.     let i = 0;
109.  
110.     //Hoàn thành ngày của tháng về trước
111.     date.setDate(date.getDate() - date.getDay());
112.     for (; date.getMonth() !== this.date.getMonth(); ++i) {
113.      
114.       const cell = this.createDayNotInMonth();
115.       cell.setAttribute('class', 'NotThisMonth');
116.       cell.textContent = date.getDate();
117.       first_row.appendChild(cell);
118.       date.setDate(date.getDate() + 1);
119.     }
120.  
121.     // Các ngày trong tháng
122.     let row = first_row;
123.     while (this.date.getMonth() === date.getMonth()) {
124.       for (; i < 7 && this.date.getMonth() === date.getMonth(); i++) {
125.        
126.         const cell = this.createDayInMonth();
127.         cell.setAttribute('class', 'ThisMonth')
128.          cell.textC
129.         // cell.appendChild(p);
130.         date.setDate(date.getDate() + 1);
131.         row.appendChild(cell);
132.       }
133.       table.appendChild(row);
134.       if (i >= 7) {
135.         row = document.createElement('tr');
136.         i = 0;
137.       }
138.     }
139.  
140.     while (date.getDay() > 0) {
141.      
142.       const cell = this.createDayInMonth();
143.       cell.setAttribute('class', 'NotThisMonth');
144.       // cell.appendChild(p);
145.       row.appendChild(cell);
146.       cell.textContent = date.getDate();
147.       date.setDate(date.getDate() + 1);
148.     }
149.   }
150. }
151.  
152. function MouseOverCell(event) {
153.   event.target.setAttribute("id", "MouseOver");
154. }
155.  
156. function MouseOutCell(event) {
157.   event.target.removeAttribute("id");
158. }
159.  
160. function MouseOutTitle(event) {
161.   event.target.removeAttribute("Title");
162. }
163.  
164. function MouseOverTitle(event) {
165.   event.target.setAttribute("id", "Title");
166. }