Notice: A non well formed numeric value encountered in /home/cinemau0/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Here we create Calendar Code javascript For form using php
Step 1:
Create Html Code for calendar as calendar.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCtype html> <!-- JSCalendarSimple.html --> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Calendar</title> <link rel="stylesheet" href="JSCalendarSimple.css"> <script src="JSDateUtil.js"></script> <script src="JSCalendarSimple.js"></script> </head> <body> <h2>Calendar</h2> <form id="frmCalendar"> <select id="selMonth"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <input type="text" id="tfYear" size="4" maxlength="4"><br><br> <input type="button" id="btnPrevYear" value=" << "> <input type="button" id="btnPrevMonth" value=" < "> <input type="button" id="btnToday" value="Today"> <input type="button" id="btnNextMonth" value=" > "> <input type="button" id="btnNextYear" value=" >> "><br><br> <table id="tableCalendar"></table> </form> </body> </html> |
Step 2:
Create Css file for calendar style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* JSCalendarSimple.css */ .today { background: gray; color: white; font-weight: bold } .sunday { color: red } input, select { font-family: Consolas, monospace; font-weight: bold; color: blue } table { font-family: Consolas, monospace; text-align: right; border-collapse:collapse; border: 1px solid black } td, th { padding: 3px 5px; border: 1px solid black } |
Step 3 :
Create dateui.js file for get current date
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// DateUtil.js // Return true if the given year is a leap year function isLeapYear(year) { return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0)); } // Return the number of days in the given month (1-12) of the year (xxxx) function getDaysInMonth(year, month) { if (month === 2) { if (isLeapYear(year)) { return 29; } else { return 28; } } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7) || (month === 8) || (month === 10) || (month === 12)) { return 31; } else { return 30; } } // Get the day of the week given year, month (1-12) and day (1-31) function getDayInWeek(year, month, day) { var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var theDate = new Date(year, month-1, day); return weekdays[theDate.getDay()]; } |
Step 4:
Create calendarjs.js file for javascript function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
window.onload = init; // Global variables // Today's year, month(0-11) and day(1-31) var thisYear, thisMonth, thisDay; // The "onload" handler, run after the page is fully loaded. function init() { setToday(); document.getElementById("selMonth").onchange = setMonth; document.getElementById("tfYear").onchange = setYear; document.getElementById("btnPrevYear").onclick = setPreviousYear; document.getElementById("btnPrevMonth").onclick = setPreviousMonth; document.getElementById("btnNextMonth").onclick = setNextMonth; document.getElementById("btnNextYear").onclick = setNextYear; document.getElementById("btnToday").onclick = setToday; document.getElementById("frmCalendar").onsubmit = function() { return false; // Stay in current page, do not refresh. } } // Set thisYear, thisMonth, thisDay to Today // So that we can highlight today on the calendar function setToday() { var now = new Date(); // today thisDay = now.getDate(); // 1-31 thisMonth = now.getMonth(); // 0-11 thisYear = now.getFullYear(); // 4-digit year document.getElementById("selMonth").selectedIndex = thisMonth; document.getElementById("tfYear").value = thisYear; printCalendar(thisYear, thisMonth); } // Print the month-calendar for the given 4-digit year and month (0-11) function printCalendar(year, month) { var daysInMonth = getDaysInMonth(year, month + 1); // number of days var firstDayOfMonth = (new Date(year, month, 1)).getDay(); // 0-6 for Sun to Sat var tableInnerHTML = "<tr><th class='sunday'>Sun</th><th>Mon</th><th>Tue</th>" + "<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>"; var tdCellCount = 0; // count of table's <td> cells if (firstDayOfMonth !== 0) { // Leave these cells blank tableInnerHTML += "<tr><td colspan='" + firstDayOfMonth + "'></td>"; tdCellCount = firstDayOfMonth; } for (var day = 1; day <= daysInMonth; day++) { if (tdCellCount % 7 === 0) { // new table row tableInnerHTML += "<tr>"; } // Use different style classes for today, sunday and other days if ((day === thisDay) && (month === thisMonth) && (year === thisYear)) { tableInnerHTML += "<td class='today'>" + day + "</td>"; } else if (tdCellCount % 7 === 0) { tableInnerHTML += "<td class='sunday'>" + day + "</td>"; } else { tableInnerHTML += "<td>" + day + "</td>"; } tdCellCount++; if (tdCellCount % 7 === 0) { tableInnerHTML += "</tr>"; } } // print the remaining cells and close the row var remainingCells = 7 - tdCellCount % 7; if (remainingCells < 7) { tableInnerHTML += "<td colspan='" + remainingCells + "'></td></tr>"; } document.getElementById("tableCalendar").innerHTML = tableInnerHTML; } // The onchange handler for the month selection function setMonth() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; printCalendar(year, month); } // The onchange handler for the year textfield function setYear() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; if (isValidYear(year)) { printCalendar(year, month); } } // Validate the year function isValidYear(year) { if (year < 1 || year > 9999) { alert ("Sorry, the year must be between 1 and 9999."); document.getElementById("tfYear").focus(); return false; } else { return true; } } // The onclick handler for the previous-year button function setPreviousYear() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; year--; if (isValidYear(year)) { document.getElementById("tfYear").value = year; printCalendar(year, month); } } // The onclick handler for the next-year button function setNextYear() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; year++; if (isValidYear(year)) { document.getElementById("tfYear").value = year; printCalendar(year, month); } } // The onclick handler for the previous-month button function setPreviousMonth() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; if (month === 0) { month = 11; year--; } else { month--; } if (isValidYear(year)) { document.getElementById("tfYear").value = year; document.getElementById("selMonth").selectedIndex = month; printCalendar(year, month); } } // The onclick handler for the next-year button function setNextMonth() { var year = document.getElementById("tfYear").value; var month = document.getElementById("selMonth").selectedIndex; if (month === 11) { month = 0; year++; } else { month++; } if (isValidYear(year)) { document.getElementById("tfYear").value = year; document.getElementById("selMonth").selectedIndex = month; printCalendar(year, month); } } |
Thats it, enjoy the code.
Demo –