| 9190 | container.appendChild(dayGridContainer); |
| 9191 | } |
| 9192 | _renderMonthGrid(container) { |
| 9193 | const { date } = this.getState(); |
| 9194 | const wrapper = document.createElement("div"); |
| 9195 | wrapper.classList.add("dhx_cal_datepicker_months"); |
| 9196 | const months = []; |
| 9197 | for (let i = 0; i < 12; i++) { |
| 9198 | months.push(new Date(date.getFullYear(), i, 1)); |
| 9199 | } |
| 9200 | const formatLabel = this.scheduler.date.date_to_str("%M"); |
| 9201 | months.forEach((month) => { |
| 9202 | const monthElement = document.createElement("div"); |
| 9203 | monthElement.classList.add("dhx_cal_datepicker_month"); |
| 9204 | if (date.getMonth() === month.getMonth()) { |
| 9205 | monthElement.classList.add("dhx_cal_datepicker_current"); |
| 9206 | } |
| 9207 | monthElement.setAttribute("data-month", month.getMonth()); |
| 9208 | monthElement.innerHTML = formatLabel(month); |
| 9209 | this._domEvents.attach(monthElement, "click", () => { |
| 9210 | const newDate = new Date(month); |
| 9211 | this.setState({ date: newDate, mode: "days" }); |
| 9212 | }); |
| 9213 | wrapper.appendChild(monthElement); |
| 9214 | }); |
| 9215 | container.appendChild(wrapper); |
| 9216 | const doneArea = document.createElement("div"); |
| 9217 | doneArea.classList.add("dhx_cal_datepicker_done"); |
| 9218 | const doneBtn = document.createElement("button"); |
| 9219 | doneBtn.innerText = "Done"; |
| 9220 | doneBtn.classList.add("dhx_cal_datepicker_done_btn"); |
| 9221 | this._domEvents.attach(doneBtn, "click", () => { |
| 9222 | this.setState({ mode: "days" }); |
| 9223 | }); |
| 9224 | doneArea.appendChild(doneBtn); |
| 9225 | container.appendChild(doneArea); |
| 9226 | } |
| 9227 | _renderYearGrid(container) { |
| 9228 | const { date } = this.getState(); |
| 9229 | const startYear = Math.floor(date.getFullYear() / 10) * 10; |