Today, We want to share with you how to create dynamic calendar in html.In this post we will show you simple calendar html code, hear for dynamics calendar in javascript with example we will give you demo and example for implement.In this post, we will learn about Create Dynamics Calendar Using JQuery, Ajax And PHP with an example.

How do I create a dynamic calendar in HTML?

Contents

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.monthoftheCalc{
border-collapse:collapse;
background-color:#eef;
}
.monthoftheCalc th{
}
.monthoftheCalc .calendarTitle{
background-color:#ddf;
}
.monthoftheCalc .calendarPrevious{
background-color:#ddf;
}
.monthoftheCalc .calendarNext{
background-color:#ddf;
}
.calendarEmpty{
}
.calendarDay{
background:#fff;
border:1px solid black;
text-align:center;
width:2em;
}
</style>

<script type="text/javascript">
var  daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
var  monthNames=['January','February','March','April','May','June','July','August','September','October','November','December'];

// Returns the number of days in the month in a given year (January=0)
function getDaysInMonth(month,year){
if ((month==1)&&(year%4==0)&&((year%100!=0)||(year%400==0))){
return 29;
}else{
return daysInMonth[month];
}
}

// Performs an action when a date is clicked
function dateClicked(day,month,year){
document.forms.calendar.date.value = day+'/'+month+'/'+year;  

}

// Sets the displayed month
function updatePrintEachMon(month){
if (month<0){
alert('You have reached the beginning of this calendar');
}else if (month>=months){
alert('You have reached the end of this calendar');
}else{
for (var i=0;i<months;i++){
document.getElementById('monthoftheCalc'+i).style.display='none';
}
document.getElementById('monthoftheCalc'+month).style.display='block';
}
}
</script>
</head> 

<body>
<form id="calendar">
<table>
<tr>
<td><label for="date">Date:</label></td>
<td><input type="text" id="date" name="date" value="28/05/2015"></td>
</tr>
<tr><td></td><td>
<script type="text/javascript">
var month=0;
var year=2015;
var months=12;
for (var i=0;i<months;i++){
document.writeln('<table class="monthoftheCalc" '+'id="monthoftheCalc'+i+'" cellspacing="0">');
 document.writeln('<tr>'
          +'<th class="calendarPrevious" onClick="updatePrintEachMon('+(i-1)+')"><</th>'+'<th class="calendarTitle" colspan="5">'            +monthNames[month]+' '+year+'</th>'+'<th class="calendarNext" onClick="updatePrintEachMon('+(i+1)+')">></th>'+'</tr>');

document.writeln('<tr><th>Sun</th><th>Mon</th><th>Tue</th>'+'<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>');
var startDayDate=new Date(year,month,1);
var startDay=startDayDate.getDay();
for (j=0;j<42;j++){
if (j%7==0) document.write('<tr>')
if ((j=startDay+getDaysInMonth(month,year))){
document.write('<td class="calendarEmpty"></td>');
}else{
document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-startDay+1)+','+(month+1)+','+year+')">'+(j-startDay+1)+'');
}
if (j%7==6) document.write('</tr>');
}
document.writeln('</table>');
month++;
if (month>=12){
month=0;
year++;
}
}
updatePrintEachMon(5);
</script>
</td></tr>
</table>
</form>
</body>
</html>

I hope you get an idea about how to create calendar in html using javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Also Read This 👉 5 Common IAM Deployment Challenges

How do I create a dynamic calendar in HTML?

Related posts: