In this Post, you’re about to dive into a cool beginner-level project: creating a Classic Calendar using HTML, CSS, and JavaScript. If you’re into more JavaScript projects like this, there’s a list of the top 10 projects for beginners to intermediates that you might find interesting.
As we all know, a calendar is a visual chart that lays out the days, weeks, and months of a specific year. They’re handy for keeping track of important events like holidays and festivals.
The Classic calendar I’ll walk you through will show the current date and day. Plus, users can explore days from the past, present, or future months by clicking on previous and next icons. What’s exciting is that this calendar is built purely with Vanilla JavaScript, meaning there’s no need for any external libraries to make it work.
HTML :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cool Simple Form Validation</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<header>
<p class="current-date"></p>
<div class="icons">
<span id="prev" class="material-symbols-rounded">chevron_left</span>
<span id="next" class="material-symbols-rounded">chevron_right</span>
</div>
</header>
<div class="calendar">
<ul class="weeks">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="days"></ul>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
padding: 0 10px;
justify-content: center;
min-height: 100vh;
background: #111;
}
.wrapper {
width: 450px;
background: #fff;
/* for black */
/* background: #222; */
/* color: #fff; */
/* border: 2px solid #fff; */
border-radius: 10px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.wrapper header {
display: flex;
align-items: center;
padding: 25px 30px 10px;
justify-content: space-between;
}
header .icons {
display: flex;
}
header .icons span {
height: 38px;
width: 38px;
margin: 0 1px;
cursor: pointer;
color: #878787;
text-align: center;
line-height: 38px;
font-size: 1.9rem;
user-select: none;
border-radius: 50%;
}
.icons span:last-child {
margin-right: -10px;
}
header .icons span:hover {
background: #f2f2f2;
}
header .current-date {
font-size: 1.45rem;
font-weight: 500;
}
.calendar {
padding: 20px;
}
.calendar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
text-align: center;
}
.calendar .days {
margin-bottom: 20px;
}
.calendar li {
color: #333;
/* for black */
/* color: #fff; */
width: calc(100% / 7);
font-size: 1.07rem;
}
.calendar .weeks li {
font-weight: 500;
cursor: default;
}
.calendar .days li {
z-index: 1;
cursor: pointer;
position: relative;
margin-top: 30px;
}
.days li.inactive {
color: #aaa;
}
.days li.active {
color: #fff;
}
.days li::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
height: 40px;
width: 40px;
z-index: -1;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.days li.active::before {
background: #3cafcf;
}
.days li:not(.active):hover::before {
background: #f2f2f2;
/* for black */
/* background: #333; */
}
JAVASCRIPT :
const daysTag = document.querySelector(".days"),
currentDate = document.querySelector(".current-date"),
prevNextIcon = document.querySelectorAll(".icons span");
// getting new date, current year and month
let date = new Date(),
currYear = date.getFullYear(),
currMonth = date.getMonth();
// storing full name of all months in array
const months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
const renderCalendar = () => {
let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(), // getting first day of month
lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // getting last date of month
lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // getting last day of month
lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // getting last date of previous month
let liTag = "";
for (let i = firstDayofMonth; i > 0; i--) { // creating li of previous month last days
liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
}
for (let i = 1; i <= lastDateofMonth; i++) { // creating li of all days of current month
// adding active class to li if the current day, month, and year matched
let isToday = i === date.getDate() && currMonth === new Date().getMonth()
&& currYear === new Date().getFullYear() ? "active" : "";
liTag += `<li class="${isToday}">${i}</li>`;
}
for (let i = lastDayofMonth; i < 6; i++) { // creating li of next month first days
liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`
}
currentDate.innerText = `${months[currMonth]} ${currYear}`; // passing current mon and yr as currentDate text
daysTag.innerHTML = liTag;
}
renderCalendar();
prevNextIcon.forEach(icon => { // getting prev and next icons
icon.addEventListener("click", () => { // adding click event on both icons
// if clicked icon is previous icon then decrement current month by 1 else increment it by 1
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
if(currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11
// creating a new date of current year & month and pass it as date value
date = new Date(currYear, currMonth, new Date().getDate());
currYear = date.getFullYear(); // updating current year with new date year
currMonth = date.getMonth(); // updating current month with new date month
} else {
date = new Date(); // pass the current date as date value
}
renderCalendar(); // calling renderCalendar function
});
});
