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.
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:
<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> </span> 2023 <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:
- cool Mountain glassy effect calendar design template using Html and CSS
- Glass cool effect calendar design template using Html and CSS
- cool slider image calendar design template in Html and CSS
- Classic Calendar design template using Html and CSS
- Glassmorphism Calendar Design template in Html and CSSMat Calendar Design template using Html and CSS
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> </span> 2023 <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>