Calendar Code javascript For form using php DeveloperDesks

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>

<!DOCtype html>

<head>

<title>JavaScript Calendar</title>

</head>

<body>

<h2>Calendar</h2>

<option>January</option>

<option>February</option>

<option>March</option>

<option>April</option>

<option>August</option>

<option>September</option>

<option>October</option>

<option>November</option>

<option>December</option>

</select>

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

/* 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()];
}

// 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);
   }
}

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 –

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

Calendar Code javascript For form using php

Related Posts

How to Create Like & Unlike code like FB using PHP, MySQL and jQuery

File upload with Progress bar using ajax

Simple Table sorting in jquery with mysql data