Tag

calendar code jquery

Browsing

Calendar Code javascript For form using php
Here we create Calendar Code javascript For form using php
Step 1:
Create Html Code for calendar as calendar.html

<!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

/* 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

// 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

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 –

See the Pen jPLVqG by Rajaseka G (@SekarG) on CodePen.