Create HTML Page :
<!DOCTYPE html><html> <head> <meta http-equiv= »CONTENT-TYPE » content= »text/html; charset=UTF-8″> <title> Monthly </title> <link href= »css/calendar.css » rel= »stylesheet » /> </head> <body onload=’currentDate();’> <h1> Monthly Schedule </h1> <input type= »button » id= »yesterday » value= »❮″ onclick= »yesterday() »> <label for= »today »> Today : </label> <input type= »date » id= »myDate » onchange = »changeDate(event); »> <input type= »button » id= »tomorrow » value= »❯″ onclick= »tomorrow() »> <br /> <br /> <script > function changeDate(e){ alert (« Date changed ! » ); var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate(); alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function yesterday (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1; var d = currentDate.getDate() -1; //check current date is the first day of month or not. And if it’s the first day of the current month , it’s the last day of the previous month if (d == 0){ m = m-1 ; // m – 1 cuz month 0-11 d = getDaysInMonth(m-1,y) ; } //alert ( » Month : » + m); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function tomorrow (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate() + 1; //check current date is the last day of month or not. And if it’s the last day of the current month , it’s the first day of the previous month if (d == getDaysInMonth(m-1,y) + 1){ m = m+1 ; // m – 1 cuz month 0-11 d = « 01 » ; } //alert ( » Month : » + m); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function tdClick(el){ // alert (« Cell Index : » + el.cellIndex + » Text : » + el.innerText); el.style.backgroundColor = ‘#007d00’; var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = el.innerText; //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function CreateTable(yy, mm, dd) { //if exists table entries for the div, delete them if (table = document.getElementById(« empTable »)) { //table.destroy(); //Just clean data in the table it enough document.getElementById(« empTable »).innerHTML = « »; //alert (« Table exists ! »); /* // CREATE DYNAMIC TABLE. var table = document.createElement(‘table’); // SET THE TABLE ID. // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE. table.setAttribute(‘id’, ’empTable’); */ }else { // CREATE DYNAMIC TABLE. var table = document.createElement(‘table’); // SET THE TABLE ID. // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE. table.setAttribute(‘id’, ’empTable’); } var arrHead = new Array(); arrHead = [‘Sun’,’Mon’, ‘Tue’, ‘Wed’,’Thu’,’Fri’,’Sat’]; var arrValue = new Array(); arrValue.push([’01’, ’02’, ’03’,’04’,’05’,’06’,’07’]); arrValue.push([’08’, ’09’, ’10’,’11’,’12’,’13’,’14’]); arrValue.push([’15’, ’16’, ’17’,’18’,’19’,’20’,’21’]); arrValue.push([’22’, ’23’, ’24’,’25’,’26’,’27’,’28’]); arrValue.push([’29’, ’30’, ’01’,’02’,’03’,’04’,’05’]); var tr = table.insertRow(-1); var th = document.createElement(‘th’); // TABLE HEADER. th.innerHTML = « ❮ »; var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « prev(); »; // Set the value of the class attribute th.setAttributeNode(att); th.classList.add(« active »); tr.appendChild(th); var th = document.createElement(‘th’); var months = [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]; var monthIndex = mm-1; th.innerHTML = months[monthIndex] + ‘<br><span style= »font-size:18px »>’ + yy + ‘</span>’; th.classList.add(« active »); var att = document.createAttribute(« colspan »); // Create a « class » attribute att.value = « 5 »; // Set the value of the class attribute th.setAttributeNode(att); // Add the class attribute to <h1> tr.appendChild(th); var th = document.createElement(‘th’); th.innerHTML = « ❯ »; var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « next(); »; // Set the value of the class attribute th.setAttributeNode(att); th.classList.add(« active »); tr.appendChild(th); var tr = table.insertRow(-1); for (var h = 0; h < arrHead.length; h++) { var th = document.createElement(‘th’); // TABLE HEADER. th.innerHTML = arrHead[h]; tr.appendChild(th); } var n = 1; var nbDays = getDaysInMonth(mm-1,yy) ; //alert (« number of days » + nbDays); var firstPos = (new Date(yy+ »-« +mm+ »-01″)).getDay(); var lastPos = (new Date(yy+ »-« +mm+ »-« +nbDays)).getDay(); //alert (« First day » +firstPos + » / Last Day : » +lastPos ); var row = 6 ; for (var c = 0; c < row; c++) { tr = table.insertRow(-1); for (var j = 0; j < 7; j++) { var td = document.createElement(‘td’); // TABLE DEFINITION. td = tr.insertCell(-1); var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « tdClick(this); »; // Set the value of the class attribute td.setAttributeNode(att); //td.innerHTML = arrValue[c][j]; // ADD VALUES TO EACH CELL. if (c == 0 ){ if(j < firstPos){ td.innerHTML = « »; td.classList.add(« blank »); }else { if (n == dd){ td.classList.add(« active »); } td.innerHTML = n; n += 1 ; } }else { if (n > nbDays){ //n = 1 ; td.innerHTML = » »; td.classList.add(« blank »); row = row – 1; }else if (n == dd){ td.innerHTML = n; td.classList.add(« active »); }else if (n == nbDays && lastPos == j){ td.innerHTML = n; row = row – 1; }else { // n += 1 ; td.innerHTML = n; } n += 1 ; } //td.innerHTML = n; //n += 1 ; } } // NOW CREATE AN INPUT BOX TYPE BUTTON USING createElement() METHOD. var button = document.createElement(‘input’); // SET INPUT ATTRIBUTE ‘type’ AND ‘value’. button.setAttribute(‘type’, ‘button’); button.setAttribute(‘value’, ‘Read Table Data’); // ADD THE BUTTON’s ‘onclick’ EVENT. button.setAttribute(‘onclick’, ‘GetTableValues()’); // FINALLY ADD THE NEWLY CREATED TABLE AND BUTTON TO THE BODY. document.body.appendChild(table); //document.body.appendChild(button); //Pass value to update dropdown var mLength = mm.toString().length; if (mLength < 2){ mm = « 0 » + mm.toString(); } var dLength = dd.toString().length; if (dLength < 2){ dd = « 0 » + dd.toString(); } document.getElementById(« myDate »).value = yy + « -« +mm+ »-« +dd; } function getDaysInMonth(m, y) { // months in JavaScript start at 0 so decrement by 1 e.g. 11 = Dec–m; // if month is Sept, Apr, Jun, Nov return 30 days if( /8|3|5|10/.test( m ) ) return 30; // if month is not Feb return 31 days if( m != 1 ) return 31; // To get this far month must be Feb ( 1 ) // if the year is a leap year then Feb has 29 days if( ( y % 4 == 0 && y % 100 != 0 ) || y % 400 == 0 ) return 29; // Not a leap year. Feb has 28 days. return 28;} function currentDate() { var currentDate = new Date(); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var mLength = m.toString().length; if (mLength < 2){ m = « 0 » + m.toString(); } var d = currentDate.getDate(); var dLength = d.toString().length; if (dLength < 2){ d = « 0 » + d.toString(); } //alert (d.toString().length); document.getElementById(« myDate »).value = y + « -« +m+ »-« +d; CreateTable(y,+m,d); } function prev (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1; var d = currentDate.getDate(); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m-1,d); } function next (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate(); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m+1,d); } </script> </body></html>
Create CSS files
H1 { padding: 10px; white-space: nowrap; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color: #FFFFFF; color: #444444; text-align: center; justify-content: center; text-transform: uppercase;}INPUT { font-family: »Segoe Print », Verdan, Arial; -moz-border-radius:4px; border:1px solid gray; border-radius:4px; background-image:url(images/papier1.jpg); padding-left:8px; max-width: 100px;}table, th, td { font: 17px Calibri; border: solid 1px #DDD; border-collapse: collapse; padding: 2px 3px; text-align: center; margin: 10px 0; } th { font-weight:bold; background-color: #ddd; text-align: center; margin: 0; padding: 10px 0; }TD { padding: 10px 0; width : 10%; background: #eee; margin: 0;}.active { padding: 5px; background: #1abc9c; color: white !important}.blank { padding: 5px; background: #333 ; color: white !important}* {box-sizing: border-box;}@media screen and (max-width: 420px) { .weekdays li, .days li {width: 12.5%;} .days td .active {padding: 2px;}}@media screen and (max-width: 290px) { .weekdays td, .days td {width: 12.2%;}}
eShop 