Last active
October 19, 2019 22:37
-
-
Save ermauliks/4cd5ba4dd9fede6a001e91e6a13ec4b1 to your computer and use it in GitHub Desktop.
monthly calendar with pure javascript
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| table td { | |
| text-align: center; | |
| } | |
| table { | |
| font-family: "arial"; | |
| } | |
| .greyout { | |
| color: grey; | |
| } | |
| .normal { | |
| font-weight: bold; | |
| } | |
| .today { | |
| color: white; | |
| background-color: black; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #texts { | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='calendar' /> | |
| <script id="jsbin-javascript"> | |
| class Calendar { | |
| constructor(selector) { | |
| this.container = document.querySelector(selector); | |
| this.container.innerHTML += this.prepareMarkup(); | |
| this.children = { | |
| calendar: this.container.getElementsByClassName('calendarHolder')[0], | |
| next: this.container.getElementsByClassName('next')[0], | |
| prev: this.container.getElementsByClassName('prev')[0], | |
| texts: document.getElementById('texts') | |
| } | |
| let year = (new Date()).getFullYear(); | |
| let month = (new Date()).getMonth(); | |
| this.prepareMonthTable(year, month); | |
| this.assignPrevNext(year, month); | |
| } | |
| assignPrevNext(year, month) { | |
| this.children.next.addEventListener('click', (e) => { | |
| month++; | |
| if (month > 12) { | |
| year++; | |
| month=0; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| this.children.prev.addEventListener('click', (e) => { | |
| month--; | |
| if (month < 0) { | |
| year--; | |
| month=11; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| } | |
| prepareMarkup() { | |
| return ` | |
| <div id="texts"></div> | |
| <div class="container"> | |
| <div><button class="prev">prev</button></div> | |
| <div class="calendarHolder"></div> | |
| <div><button class="next">next</button></div> | |
| </div> | |
| `; | |
| } | |
| prepareMonthTable(year, month) { | |
| this.children.texts.innerHTML = ''; | |
| this.children.texts.appendChild(document.createTextNode(`${month + 1} / ${year}`)); | |
| let table = document.createElement('table'); | |
| let tableBody = document.createElement('tbody'); | |
| let today = new Date().getDate(); | |
| let daysInMonth = 32 - new Date(year, month, 32).getDate(); | |
| let daysInPrevMonth = 32 - new Date(year, month - 1, 32).getDate(); | |
| let date = daysInPrevMonth - (new Date(year, month)).getDay() + 1; | |
| let isCurrentMonth = false; | |
| let classname; | |
| for (let i = 0; i < 6; i++) { | |
| let tr = document.createElement('tr'); | |
| for (let j = 0; j < 7; j++) { | |
| let td = document.createElement('td'); | |
| if ( | |
| (!isCurrentMonth && date > daysInPrevMonth) || // < prev | |
| isCurrentMonth && date > daysInMonth // > next month | |
| ) { | |
| date = 1; // reset the date if we reach to the current month | |
| isCurrentMonth = !isCurrentMonth; | |
| } | |
| if (!isCurrentMonth) { | |
| classname = 'greyout'; | |
| } else if (month === (new Date()).getMonth() && date === today) { | |
| classname = 'today'; | |
| } else { | |
| classname = 'normal'; | |
| } | |
| td.classList.add(classname); | |
| td.appendChild(document.createTextNode(date)); | |
| tr.appendChild(td); | |
| date++; | |
| } | |
| tableBody.appendChild(tr); | |
| } | |
| table.appendChild(tableBody); | |
| this.children.calendar.innerHTML = ''; | |
| this.children.calendar.appendChild(table); | |
| } | |
| } | |
| new Calendar('#calendar'); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">table td { | |
| text-align: center; | |
| } | |
| table { | |
| font-family: "arial"; | |
| } | |
| .greyout { | |
| color: grey; | |
| } | |
| .normal { | |
| font-weight: bold; | |
| } | |
| .today { | |
| color: white; | |
| background-color: black; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #texts { | |
| text-align: center; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">class Calendar { | |
| constructor(selector) { | |
| this.container = document.querySelector(selector); | |
| this.container.innerHTML += this.prepareMarkup(); | |
| this.children = { | |
| calendar: this.container.getElementsByClassName('calendarHolder')[0], | |
| next: this.container.getElementsByClassName('next')[0], | |
| prev: this.container.getElementsByClassName('prev')[0], | |
| texts: document.getElementById('texts') | |
| } | |
| let year = (new Date()).getFullYear(); | |
| let month = (new Date()).getMonth(); | |
| this.prepareMonthTable(year, month); | |
| this.assignPrevNext(year, month); | |
| } | |
| assignPrevNext(year, month) { | |
| this.children.next.addEventListener('click', (e) => { | |
| month++; | |
| if (month > 12) { | |
| year++; | |
| month=0; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| this.children.prev.addEventListener('click', (e) => { | |
| month--; | |
| if (month < 0) { | |
| year--; | |
| month=11; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| } | |
| prepareMarkup() { | |
| return ` | |
| <div id="texts"></div> | |
| <div class="container"> | |
| <div><button class="prev">prev</button></div> | |
| <div class="calendarHolder"></div> | |
| <div><button class="next">next</button></div> | |
| </div> | |
| `; | |
| } | |
| prepareMonthTable(year, month) { | |
| this.children.texts.innerHTML = ''; | |
| this.children.texts.appendChild(document.createTextNode(`${month + 1} / ${year}`)); | |
| let table = document.createElement('table'); | |
| let tableBody = document.createElement('tbody'); | |
| let today = new Date().getDate(); | |
| let daysInMonth = 32 - new Date(year, month, 32).getDate(); | |
| let daysInPrevMonth = 32 - new Date(year, month - 1, 32).getDate(); | |
| let date = daysInPrevMonth - (new Date(year, month)).getDay() + 1; | |
| let isCurrentMonth = false; | |
| let classname; | |
| for (let i = 0; i < 6; i++) { | |
| let tr = document.createElement('tr'); | |
| for (let j = 0; j < 7; j++) { | |
| let td = document.createElement('td'); | |
| if ( | |
| (!isCurrentMonth && date > daysInPrevMonth) || // < prev | |
| isCurrentMonth && date > daysInMonth // > next month | |
| ) { | |
| date = 1; // reset the date if we reach to the current month | |
| isCurrentMonth = !isCurrentMonth; | |
| } | |
| if (!isCurrentMonth) { | |
| classname = 'greyout'; | |
| } else if (month === (new Date()).getMonth() && date === today) { | |
| classname = 'today'; | |
| } else { | |
| classname = 'normal'; | |
| } | |
| td.classList.add(classname); | |
| td.appendChild(document.createTextNode(date)); | |
| tr.appendChild(td); | |
| date++; | |
| } | |
| tableBody.appendChild(tr); | |
| } | |
| table.appendChild(tableBody); | |
| this.children.calendar.innerHTML = ''; | |
| this.children.calendar.appendChild(table); | |
| } | |
| } | |
| new Calendar('#calendar');</script></body> | |
| </html> |
This file contains 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
| table td { | |
| text-align: center; | |
| } | |
| table { | |
| font-family: "arial"; | |
| } | |
| .greyout { | |
| color: grey; | |
| } | |
| .normal { | |
| font-weight: bold; | |
| } | |
| .today { | |
| color: white; | |
| background-color: black; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #texts { | |
| text-align: center; | |
| } |
This file contains 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(selector) { | |
| this.container = document.querySelector(selector); | |
| this.container.innerHTML += this.prepareMarkup(); | |
| this.children = { | |
| calendar: this.container.getElementsByClassName('calendarHolder')[0], | |
| next: this.container.getElementsByClassName('next')[0], | |
| prev: this.container.getElementsByClassName('prev')[0], | |
| texts: document.getElementById('texts') | |
| } | |
| let year = (new Date()).getFullYear(); | |
| let month = (new Date()).getMonth(); | |
| this.prepareMonthTable(year, month); | |
| this.assignPrevNext(year, month); | |
| } | |
| assignPrevNext(year, month) { | |
| this.children.next.addEventListener('click', (e) => { | |
| month++; | |
| if (month > 12) { | |
| year++; | |
| month=0; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| this.children.prev.addEventListener('click', (e) => { | |
| month--; | |
| if (month < 0) { | |
| year--; | |
| month=11; | |
| } | |
| this.prepareMonthTable(year, month); | |
| }); | |
| } | |
| prepareMarkup() { | |
| return ` | |
| <div id="texts"></div> | |
| <div class="container"> | |
| <div><button class="prev">prev</button></div> | |
| <div class="calendarHolder"></div> | |
| <div><button class="next">next</button></div> | |
| </div> | |
| `; | |
| } | |
| prepareMonthTable(year, month) { | |
| this.children.texts.innerHTML = ''; | |
| this.children.texts.appendChild(document.createTextNode(`${month + 1} / ${year}`)); | |
| let table = document.createElement('table'); | |
| let tableBody = document.createElement('tbody'); | |
| let today = new Date().getDate(); | |
| let daysInMonth = 32 - new Date(year, month, 32).getDate(); | |
| let daysInPrevMonth = 32 - new Date(year, month - 1, 32).getDate(); | |
| let date = daysInPrevMonth - (new Date(year, month)).getDay() + 1; | |
| let isCurrentMonth = false; | |
| let classname; | |
| for (let i = 0; i < 6; i++) { | |
| let tr = document.createElement('tr'); | |
| for (let j = 0; j < 7; j++) { | |
| let td = document.createElement('td'); | |
| if ( | |
| (!isCurrentMonth && date > daysInPrevMonth) || // < prev | |
| isCurrentMonth && date > daysInMonth // > next month | |
| ) { | |
| date = 1; // reset the date if we reach to the current month | |
| isCurrentMonth = !isCurrentMonth; | |
| } | |
| if (!isCurrentMonth) { | |
| classname = 'greyout'; | |
| } else if (month === (new Date()).getMonth() && date === today) { | |
| classname = 'today'; | |
| } else { | |
| classname = 'normal'; | |
| } | |
| td.classList.add(classname); | |
| td.appendChild(document.createTextNode(date)); | |
| tr.appendChild(td); | |
| date++; | |
| } | |
| tableBody.appendChild(tr); | |
| } | |
| table.appendChild(tableBody); | |
| this.children.calendar.innerHTML = ''; | |
| this.children.calendar.appendChild(table); | |
| } | |
| } | |
| new Calendar('#calendar'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment