Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Calender" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Calender" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Calender [Source Code]
To get the following HTML, CSS & JS code for the Calender project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calender</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calender">
<div class="month">
<div class="date">
<h1></h1>
<p></p>
</div>
</div>
<div class="weekdays">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="dates"> </div>
</div>
<script src="index.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: yellow;
}
.calender {
background-color: black;
color: aliceblue;
width: 450px;
height: 520px;
border-radius: 10px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.month {
width: 100%;
height: 120px;
background-color: slateblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.month h1 {
font-size: 35px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
}
.month p {
font-size: 15px;
}
.weekdays {
display: flex;
width: 100%;
height: 50px;
background-color: aliceblue;
color: slateblue;
}
.weekdays div {
width: 100%;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
.dates {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2px;
}
.dates div {
font-size: 14px;
margin: 3px;
width: 57.5px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px;
}
.dates div:hover:not(.empty) {
border: 2px solid aliceblue;
}
.today {
background-color: slateblue;
}
const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const datesEl = document.querySelector(".dates");
const monthIndex = new Date().getMonth();
const lastDate = new Date(new Date().getFullYear(), monthIndex+1,0).getDate();
const firstDate = new Date(new Date().getFullYear(), monthIndex,1).getDay();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
monthEl.innerText = months[monthIndex];
const newDate = new Date();
fullDateEl.innerText = days[newDate.getDay()] + ", " + newDate.getDate() + " " + months[newDate.getMonth()] + " " + newDate.getFullYear();
let dates="";
for(i=firstDate; i>0; i--){
dates += `<div class="empty"></div>`;
}
for(i=1; i<=lastDate; i++){
if(i === new Date().getDate()){
dates += `<div class="today">${i}</div>`;
}else{
dates += `<div>${i}</div>`;
}
}
datesEl.innerHTML = dates;