HTML calendar templates are used by web designers who want to add a great design help of HTML code to display the current month using table tag and div tag and get by the JavaScript.


 

HTML code to display current month using javascript

Let's see the tutorial, day to day life the calendar is almost every business has an online presence and the business will give you a more clear vision of appointments and doubtful days to be noted.

you are just given some piece graphics to design and help apply the code using HTML format and unique and user-friendly at the same time, you can always go for the HTML calendar, and easy to design and also. 

 



HTML code to display current month using javascript

HTML Code:




<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>
<body>
<div class="calendar">
<div class="date">
<h3><span id="month"><i class="bi bi-arrow-left-circle"></i>&nbsp;&nbsp;</span> 2023&nbsp;&nbsp; <span><i class="bi bi-arrow-right-circle"></i></span>
</h3>
<div class="days">
   <div class="day">Sun</div>
   <div class="day">Mon</div>
   <div class="day">Tue</div>
   <div class="day">Wed</div>
   <div class="day">Thu</div>
   <div class="day">Fri</div>
   <div class="day">Sat</div>
   <div id="number">
   </div> 
   </div>
<div class="image">
<img src="2.jpg">
</div>
<div>
</div>
</body>
 </html>


Style Css Code:



body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background: rgb(134,147,171);
background: linear-gradient(90deg, rgba(134,147,171,1) 0%, rgba(189,212,231,1) 100%);
font-family:'poppins',sans-serif;
background-attachment: fixed;
}

.calendar
{
position:relative;
background:#fff;
width:800px;
height:450px;
display:flex;
justify-content:space-between;   
align-items:center;
background-color: rgba(255, 255, 255, 0.05);  
backdrop-filter: blur(10px);
border-radius:20px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.calendar .date{
width:400px;
padding:30px;
box-sizing:border-box;
}
.calendar .image{
position:absolute;
top:0;
right:0;
width:400px;
height:100%;
background:#000;
}
.calendar .image img{
width:400px;
height:100%;
background-position:contain;
} 

.calendar .date h3{
margin:0 0 20px;
padding:0;
font-size:24px;
font-weight:500;
text-align:center;
color:#fff;
}

.calendar .date .days{
display:flex;
flex-wrap:wrap;
color:#fff;
}
.calendar .date .days .day

{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
}

#number {  padding:10px 0;margin:0 auto; } 
td { padding:13px;color:#fff; } 
.active { 
background: #352b48; 
color:#fff;
border-radius:50%;
cursor:pointer;} 


Read also:



Script Code:



const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var n= new Date();
let m = month[n.getMonth()];
document.getElementById("month").innerHTML = m;
var days= document.getElementById('number'); 
var table=document.createElement("table"); 
var rows=5; 
var cols=7; 
var counter=1; 
var todaysDate = new Date().getDate(); 
for(var i=1;i<=rows;i++){ 
var tr=document.createElement("tr"); 
for(var j=1;j<=cols;j++) 
{ 
var td=document.createElement("td"); 
var cellText =document.createTextNode(counter); 
if(counter==todaysDate)
{
td.className="active";
} 
if(counter<=31)
{ 
++counter; 
} 
else 
{ 
break; 
} 
td.appendChild(cellText); 
tr.appendChild(td); 
} 
table.appendChild(tr); 
} 
days.appendChild(table);


Display current Month Html Full Code:


<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<style>
body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background: rgb(134,147,171);
background: linear-gradient(90deg, rgba(134,147,171,1) 0%, rgba(189,212,231,1) 100%);
font-family:'poppins',sans-serif;
background-attachment: fixed;
}

.calendar
{
position:relative;
background:#fff;
width:800px;
height:450px;
display:flex;
justify-content:space-between;   
align-items:center;
background-color: rgba(255, 255, 255, 0.05);  
backdrop-filter: blur(10px);
border-radius:20px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.calendar .date{
width:400px;
padding:30px;
box-sizing:border-box;
}
.calendar .image{
position:absolute;
top:0;
right:0;
width:400px;
height:100%;
background:#000;
}
.calendar .image img{
width:400px;
height:100%;
background-position:contain;
} 

.calendar .date h3{
margin:0 0 20px;
padding:0;
font-size:24px;
font-weight:500;
text-align:center;
color:#fff;
}

.calendar .date .days{
display:flex;
flex-wrap:wrap;
color:#fff;
}
.calendar .date .days .day

{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
}

#number {  padding:10px 0;margin:0 auto; } 
td { padding:13px;color:#fff; } 
.active { 
background: #352b48; 
color:#fff;
border-radius:50%;
cursor:pointer;} 
</style>
</head>
<body>
<div class="calendar">
<div class="date">
<h3><span id="month"><i class="bi bi-arrow-left-circle"></i>&nbsp;&nbsp;</span> 2023&nbsp;&nbsp; <span><i class="bi bi-arrow-right-circle"></i></span>
</h3>
<div class="days">
   <div class="day">Sun</div>
   <div class="day">Mon</div>
   <div class="day">Tue</div>
   <div class="day">Wed</div>
   <div class="day">Thu</div>
   <div class="day">Fri</div>
   <div class="day">Sat</div>
   <div id="number">
   </div> 
   
   
   </div>
<div class="image">
<img src="2.jpg">
</div>
<div>
</div>
<script>
const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var n= new Date();
let m = month[n.getMonth()];
document.getElementById("month").innerHTML = m;
var days= document.getElementById('number'); 
var table=document.createElement("table"); 
var rows=5; 
var cols=7; 
var counter=1; 
var todaysDate = new Date().getDate(); 
for(var i=1;i<=rows;i++){ 
var tr=document.createElement("tr"); 
for(var j=1;j<=cols;j++) 
{ 
var td=document.createElement("td"); 
var cellText =document.createTextNode(counter); 
if(counter==todaysDate)
{
td.className="active";
} 
if(counter<=31)
{ 
++counter; 
} 
else 
{ 
break; 
} 
td.appendChild(cellText); 
tr.appendChild(td); 
} 
table.appendChild(tr); 
} 
days.appendChild(table);
</script>
</body>
 </html>

Previous Post Next Post