Simple Calendar with HTML, CSS, and JavaScript. This Calendar change date daily with Day, Date, Month, and Year. You can add this small code on your website and it looks simple and minimal.Simple Calendar using HTML, CSS, and JavaScript
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Calender</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="calender">
<p id="calender-day">
</p>
<p id="calender-date">
</p>
<p id="calender-month-year">
</p>
</div>
</body>
</html>
Style.css
#calender{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 130px;
height: 180px;
background-color: cornflowerblue;
border:#fff;
border-radius: 5%;
box-shadow: 0 4px 4px 0 rgba(50,50,50,0.4);
}
#calender>p{
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 10px 0;
margin: 0;
color:#fff;
text-align: center;
}
#calender-day{
font-size:16px;
}
#calender-month-year{
font-size: 14px;
}
#calender-date{
font-size:64px;
padding-top:10px;
padding-bottom: 0;
}
Script.js
function calender(){
var day=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var month= ["January","February","March","April","May","June","July",
"August","September","October","November","December"];
var d=new Date();
setText('calender-day',day[d.getDay()]);
setText('calender-date',d.getDate());
setText('calender-month-year',month[d.getMonth()]+' '+(1900+d.getYear()));
};
function setText(id, val){
if(val<10){
val='0'+val;
}
document.getElementById(id).innerHTML=val;
};
// call calender()
window.onload=calender;
Output
So, it is a simple calendar using HTML, CSS, and JavaScript. To download the code click on the following download button.Download
ou may also like,
Hey