diff --git a/index.html b/index.html index 4dc84c4..02bcbb4 100644 --- a/index.html +++ b/index.html @@ -1,122 +1,152 @@ - - + + Calendar - + - - - - -
-
+ + + +
+

- + - - - - - - - + + + + + + + - - - + - +
SunMonTueWedThuFriSatMonTueWedThuFriSatSun
+ - - - +
-
+
- - + + - -
+ + +
-
- - - - - - - - - + + - - \ No newline at end of file + + + + + + + diff --git a/scripts.js b/scripts.js index 90e54f4..09555e5 100644 --- a/scripts.js +++ b/scripts.js @@ -4,78 +4,88 @@ let currentYear = today.getFullYear(); let selectYear = document.getElementById("year"); let selectMonth = document.getElementById("month"); -let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; +let months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", +]; let monthAndYear = document.getElementById("monthAndYear"); showCalendar(currentMonth, currentYear); - function next() { - currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear; - currentMonth = (currentMonth + 1) % 12; - showCalendar(currentMonth, currentYear); + currentYear = currentMonth === 11 ? currentYear + 1 : currentYear; + currentMonth = (currentMonth + 1) % 12; + showCalendar(currentMonth, currentYear); } function previous() { - currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear; - currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1; - showCalendar(currentMonth, currentYear); + currentYear = currentMonth === 0 ? currentYear - 1 : currentYear; + currentMonth = currentMonth === 0 ? 11 : currentMonth - 1; + showCalendar(currentMonth, currentYear); } function jump() { - currentYear = parseInt(selectYear.value); - currentMonth = parseInt(selectMonth.value); - showCalendar(currentMonth, currentYear); + currentYear = parseInt(selectYear.value); + currentMonth = parseInt(selectMonth.value); + showCalendar(currentMonth, currentYear); } function showCalendar(month, year) { - - let firstDay = (new Date(year, month)).getDay(); - let daysInMonth = 32 - new Date(year, month, 32).getDate(); - - let tbl = document.getElementById("calendar-body"); // body of the calendar - - // clearing all previous cells - tbl.innerHTML = ""; - - // filing data about month and in the page via DOM. - monthAndYear.innerHTML = months[month] + " " + year; - selectYear.value = year; - selectMonth.value = month; - - // creating all cells - let date = 1; - for (let i = 0; i < 6; i++) { - // creates a table row - let row = document.createElement("tr"); - - //creating individual cells, filing them up with data. - for (let j = 0; j < 7; j++) { - if (i === 0 && j < firstDay) { - let cell = document.createElement("td"); - let cellText = document.createTextNode(""); - cell.appendChild(cellText); - row.appendChild(cell); - } - else if (date > daysInMonth) { - break; - } - - else { - let cell = document.createElement("td"); - let cellText = document.createTextNode(date); - if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) { - cell.classList.add("bg-info"); - } // color today's date - cell.appendChild(cellText); - row.appendChild(cell); - date++; - } - - - } - - tbl.appendChild(row); // appending each row into calendar body. + let firstDay = new Date(year, month).getDay(); + let daysInMonth = 32 - new Date(year, month, 32).getDate(); + + let tbl = document.getElementById("calendar-body"); // body of the calendar + + // clearing all previous cells + tbl.innerHTML = ""; + + // filing data about month and in the page via DOM. + monthAndYear.innerHTML = months[month] + " " + year; + selectYear.value = year; + selectMonth.value = month; + + // creating all cells + let date = 1; + for (let i = 0; i < 6; i++) { + // creates a table row + let row = document.createElement("tr"); + + //creating individual cells, filing them up with data. + for (let j = 0; j < 7; j++) { + console.log(firstDay); + if (i === 0 && j < firstDay - 1) { + let cell = document.createElement("td"); + let cellText = document.createTextNode(""); + cell.appendChild(cellText); + row.appendChild(cell); + } else if (date > daysInMonth) { + break; + } else { + let cell = document.createElement("td"); + let cellText = document.createTextNode(date); + if ( + date === today.getDate() && + year === today.getFullYear() && + month === today.getMonth() + ) { + cell.classList.add("bg-info"); + } // color today's date + cell.appendChild(cellText); + row.appendChild(cell); + date++; + } } -} \ No newline at end of file + tbl.appendChild(row); // appending each row into calendar body. + } +}