Glassmorphism Calendar | HTML, CSS & JavaScript Project.
This tutorial will guide you through Glassmorphism Calendar | HTML, CSS & JavaScript Project. Follow all the given step :
Step 1 : Create Index.html and add given html code on it.
Step 2 : Create style.css and add given css code on it.
Step 3 : Create index.js and add given JavaScript code on it.
HTML
HTML Code for Glassmorphism Calendar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorhpism Calendar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
<div class="setting">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/>
</svg>
</div>
<div class="toggle">
<button class="active">Weekly</button>
<button>Monthly</button>
</div>
<div class="month">
<div class="month-name" id="month"></div>
<div class="month-day" id="today"></div>
</div>
<div class="days">
<span>Sun</span>
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
</div>
<div class="arc-area">
<svg class="arc-svg" viewBox="15 13 320 90" preserveAspectRatio="none">
<path d="M20 40 Q180 70 340 40" />
</svg>
<div class="dates" id="dates"></div>
</div>
<div class="month-grid hidden" id="monthGrid"></div>
<div class="footer">
<div>✏️ Add a notes...</div>
<button class="add">＋ New Event</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
CSS Code for Glassmorphism Calendar .
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
.calendar{
width: 360px;
border-radius: 28px;
padding: 20px;
background: #ffffff40;
backdrop-filter: blur(22px);
border: 1px solid #ffffff59;
box-shadow: 0 30px 80px #00000026;
position: relative;
overflow: hidden;
}
.calendar::before{
content: "";
position: absolute;
inset: -60px;
background: #ffffff;
background: radial-gradient(circle, rgb(255, 79, 155) 0%, #6bb0ff 100%);
filter: blur(90px);
z-index: -1;
}
.setting{
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffffa6;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(10px);
box-shadow: 0 6px 20px #00000033;
transition: 0.3s;
}
.setting:hover{
transform: rotate(20deg) scale(1.05);
}
.toggle{
display: flex;
background: rgba(255,255,255,0.3);
border-radius: 14px;
padding: 4px;
width: 80%;
}
.toggle button{
flex: 1;
border: none;
background: none;
padding: 8px;
border-radius: 10px;
}
.toggle .active{
background: white;
}
.month{
margin-top: 20px;
color: white;
display: flex;
align-items: flex-end;
gap: 12px;
}
.month-name{
font-size: 44px;
font-weight: 600;
}
.month-day{
font-size: 56px;
font-weight: 600;
}
.days{
margin-top: 10px;
display: flex;
justify-content: space-between;
color: white;
opacity: 0.8;
font-size: 14px;
}
.arc-area{
position: relative;
height: 90px;
margin-top: 15px;
}
.arc-svg{
position: absolute;
inset: 0;
}
.arc-svg path{
stroke: #ffffff45;
stroke-width: 50;
fill: none;
}
.month-grid{
margin-top: 15px;
display: grid;
grid-template-columns: repeat(7,1fr);
gap: 10px;
color: white;
}
.month-grid div{
text-align: center;
padding: 10px 0;
border-radius: 50%;
opacity: 0.7;
}
.month-grid .today{
background: linear-gradient(135deg, #ff3d81, #ff9f3d);
opacity: 1;
font-weight: 600;
}
.hidden{
display: none;
}
.dates{
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
top: 20px;
}
.date{
width: 50px;
text-align: center;
color: white;
opacity: 0.75;
font-size: 13px;
}
.date.active{
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #ff3d81, #ff9f3d);
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
opacity: 1;
box-shadow: 0 12px 28px #00000059;
}
.footer{
margin-top: 25px;
justify-content: space-between;
align-items: center;
color: white;
display: flex;
}
.add{
background: white;
border: none;
padding: 10px 16px;
border-radius: 20px;
cursor: pointer;
}
JavaScript
JavaScript code for Glassmorphism Calendar .
const datesEl = document.getElementById("dates");
const monthGrid = document.getElementById("monthGrid");
const monthEl = document.getElementById("month");
const todayEl = document.getElementById("today");
const weeklyBtn = document.querySelector(".toggle button:nth-child(1)");
const monthlyBtn = document.querySelector(".toggle button:nth-child(2)");
const arcArea = document.querySelector(".arc-area");
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const today = now.getDate();
monthEl.textContent = now.toLocaleString("default",{month:"long"});
todayEl.textContent = today;
function loadWeekly(){
datesEl.innerHTML="";
arcArea.classList.remove("hidden");
monthGrid.classList.add("hidden");
const start = new Date(now);
start.setDate(today - now.getDay());
const offsets = [-10, 4, 15, 25, 15, 4, -10];
for(let i=0;i<7;i++){
const d = new Date(start);
d.setDate(start.getDate() + i);
const el = document.createElement("div");
el.className = "date";
el.textContent = d.getDate();
el.style.transform = `translateY(${offsets[i]}px)`;
if(
d.getDate() === today &&
d.getMonth() === month &&
d.getFullYear() === year
){
el.classList.add("active");
el.style.transform = `translateY(${offsets[i] - 6}px)`;
}
datesEl.appendChild(el);
}
}
function loadMonthly(){
monthGrid.innerHTML="";
arcArea.classList.add("hidden");
monthGrid.classList.remove("hidden");
const firstDay = new Date(year,month,1).getDay();
const daysInMonth = new Date(year,month+1,0).getDate();
for(let i=0;i{
weeklyBtn.classList.add("active");
monthlyBtn.classList.remove("active");
loadWeekly();
};
monthlyBtn.onclick = ()=>{
monthlyBtn.classList.add("active");
weeklyBtn.classList.remove("active");
loadMonthly();
};
loadWeekly();
document.querySelector(".setting").onclick = () => {
alert("Setting clicked");
};
What is HTML
HTML, or HyperText Markup Language, is the standard markup language used to create and design documents on the World Wide Web. It's essentially the backbone of web pages, providing the structure and content that web browsers interpret and display.
HTML consists of a series of elements, which are enclosed by tags to define their purpose and function on a webpage. These elements can include headings, paragraphs, images, links, lists, forms, and more. By using a combination of HTML elements, web developers can organize and present information in a structured and visually appealing manner.
HTML is not a programming language but rather a markup language. This means it doesn't have the capability to perform calculations or execute complex logic like programming languages do. Instead, HTML focuses on describing the structure and content of a document, leaving the presentation and functionality to other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.
In summary, HTML serves as the foundation for building web pages, providing the structure and content necessary for browsers to render and display information to users on the internet.
What is CSS
CSS, or Cascading Style Sheets, is a language used to style the presentation of web documents written in HTML and XML. It provides a way to control the layout, colors, fonts, and other visual aspects of a webpage, enabling developers to create attractive and responsive designs. By separating content from presentation, CSS promotes cleaner code, easier maintenance, and greater flexibility in website design. With CSS, developers can achieve consistent branding, improved user experience, and better accessibility across various devices and screen sizes.
What is JavaScript
JavaScript is a versatile programming language used for creating dynamic and interactive web content. It enables developers to manipulate HTML elements, respond to user actions, and build seamless web applications. With its extensive ecosystem of libraries and frameworks, JavaScript powers both client-side and server-side development, making it an essential tool for modern web development.