Created
July 14, 2018 21:49
-
-
Save dnkm/0034af40e4e72ae9ed2632e0bbc416da to your computer and use it in GitHub Desktop.
DOM API Calendar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Calendar { | |
| constructor(container) { | |
| this.container = container; | |
| this.today = new Date(); | |
| this.render(); | |
| } | |
| renderHeader() { | |
| let today = this.today; | |
| let container = this.container; | |
| // header | |
| let header = document.createElement("h1"); | |
| container.appendChild(header); | |
| // prev | |
| let prevBtn = document.createElement("button"); | |
| prevBtn.innerText = "<"; | |
| header.appendChild(prevBtn); | |
| prevBtn.addEventListener('click', () => { | |
| today.setMonth(today.getMonth() - 1); | |
| this.render(); | |
| }); | |
| // title | |
| let title = document.createElement("div"); | |
| title.innerText = today.getFullYear() + | |
| " / " + | |
| (today.getMonth() + 1); | |
| header.appendChild(title); | |
| // next | |
| let nextBtn = document.createElement("button"); | |
| nextBtn.innerText = ">"; | |
| header.appendChild(nextBtn); | |
| nextBtn.addEventListener('click', () => { | |
| today.setMonth(today.getMonth() + 1); | |
| this.render(); | |
| }); | |
| } | |
| renderMonthlyView() { | |
| let today = this.today; | |
| let container = this.container; | |
| // create empty cells | |
| for(let i=0; i<DateUtils.getDayOfFirst(today); i++) { | |
| let day = document.createElement("div"); | |
| day.classList.add("day"); | |
| container.appendChild(day); | |
| } | |
| // creates date cells | |
| for (let i = 0; i < DateUtils.getDaysInMonth(today); i++) { | |
| let day = document.createElement("div"); | |
| day.innerText = i + 1; | |
| day.classList.add("day"); | |
| container.appendChild(day); | |
| } | |
| // create empty cells | |
| let numTrailingCells = | |
| 7 - (DateUtils.getDayOfFirst(today) + | |
| DateUtils.getDaysInMonth(today)) % 7; | |
| for(let i=0; i<numTrailingCells; i++) { | |
| let day = document.createElement("div"); | |
| day.classList.add("day"); | |
| container.appendChild(day); | |
| } | |
| } | |
| render() { | |
| let today = this.today; | |
| let container = this.container; | |
| container.innerHTML = ''; | |
| this.renderHeader(); | |
| this.renderMonthlyView(); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const DateUtils = {} | |
| DateUtils.getDaysInMonth = function(date) { | |
| let clone = new Date(date); | |
| clone.setDate(1); | |
| clone.setMonth(clone.getMonth()+1); | |
| clone.setDate(0); | |
| return clone.getDate(); | |
| } | |
| DateUtils.getDayOfFirst = function(date) { | |
| let clone = new Date(date); | |
| clone.setDate(1); | |
| return clone.getDay(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>Calendar</h1> | |
| <div class="calendar"></div> | |
| <script src="date.js"></script> | |
| <script src="calendar.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let calendarContainer = document.querySelector(".calendar"); | |
| let calendar = new Calendar(calendarContainer); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .calendar { | |
| border: 5px solid gold; | |
| display: flex; | |
| flex-wrap: wrap; | |
| background: skyblue; | |
| } | |
| .calendar h1 { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .calendar .day { | |
| width: calc(100% / 7); | |
| height: 40px; | |
| background: beige; | |
| border: 1px solid black; | |
| margin: -1px 0 0 -1px; | |
| box-sizing: border-box; | |
| flex-grow: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment