Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Custom Animated Calendar</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #8e44ad, #3498db);
color: #fff;
}
.calendar {
width: 350px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
color: #333;
}
.calendar-header {
background: #3498db;
padding: 20px;
text-align: center;
color: #fff;
position: relative;
}
.calendar-header h1 {
margin: 0;
font-size: 1.5rem;
}
.calendar-header button {
background: none;
border: none;
color: #fff;
font-size: 1.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 10px;
}
.day {
text-align: center;
padding: 5px;
margin: 5px;
border-radius: 5px;
transition: transform 0.2s, background-color 0.2s;
}
.day:hover {
background: #8e44ad;
color: #fff;
transform: scale(1.1);
}
.today {
background: #f39c12;
color: #fff;
}
.day-name {
font-weight: bold;
}
</style>
</head>
<body>
<div class=”calendar”>
<div class=”calendar-header”>
<button class=”prev-btn”><</button>
<h1 id=”month-year”>January 2025</h1>
<button class=”next-btn”>></button>
</div>
<div class=”calendar-grid” id=”calendar-grid”>
<!– Days will be populated dynamically –>
</div>
</div>
<script>
const calendarGrid = document.getElementById(‘calendar-grid’);
const monthYearDisplay = document.getElementById(‘month-year’);
const prevBtn = document.querySelector(‘.prev-btn’);
const nextBtn = document.querySelector(‘.next-btn’);
const months = [
‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’,
‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’
];
let currentDate = new Date();
function renderCalendar(date) {
const year = date.getFullYear();
const month = date.getMonth();
const firstDayOfMonth = new Date(year, month, 1).getDay();
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
const lastDayOfLastMonth = new Date(year, month, 0).getDate();
monthYearDisplay.textContent = `${months[month]} ${year}`;
calendarGrid.innerHTML = ”;
// Days of the week
[‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’].forEach(day => {
const dayElement = document.createElement(‘div’);
dayElement.classList.add(‘day’, ‘day-name’);
dayElement.textContent = day;
calendarGrid.appendChild(dayElement);
});
// Previous month’s days
for (let i = firstDayOfMonth; i > 0; i–) {
const dayElement = document.createElement(‘div’);
dayElement.classList.add(‘day’);
dayElement.textContent = lastDayOfLastMonth – i + 1;
dayElement.style.opacity = ‘0.3’;
calendarGrid.appendChild(dayElement);
}
// Current month’s days
for (let i = 1; i <= lastDateOfMonth; i++) {
const dayElement = document.createElement(‘div’);
dayElement.classList.add(‘day’);
dayElement.textContent = i;
if (
i === currentDate.getDate() &&
year === currentDate.getFullYear() &&
month === currentDate.getMonth()
) {
dayElement.classList.add(‘today’);
}
calendarGrid.appendChild(dayElement);
}
}
prevBtn.addEventListener(‘click’, () => {
currentDate.setMonth(currentDate.getMonth() – 1);
renderCalendar(currentDate);
});
nextBtn.addEventListener(‘click’, () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
});
renderCalendar(currentDate);
</script>
</body>
</html>
