Creating an advanced calendar involves a combination of HTML, CSS, and JavaScript to handle the structure, styling, and functionality. Below is a basic example of an advanced calendar with the ability to navigate through months and select dates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Calendar</title>
<style>
.calendar {
font-family: Arial, sans-serif;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
margin: 0 auto;
}
.month {
text-align: center;
margin-bottom: 10px;
}
.prev, .next {
cursor: pointer;
float: left;
}
.days {
display: flex;
flex-wrap: wrap;
}
.day {
width: 14.2857%;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
}
.today {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="calendar">
<div class="month">
<span class="prev" onclick="prevMonth()">❮</span>
<span id="currentMonth"></span>
<span class="next" onclick="nextMonth()">❯</span>
</div>
<div class="days"></div>
</div>
<script>
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
function renderCalendar() {
let monthDays = document.querySelector(".days");
let monthName = document.querySelector("#currentMonth");
monthName.innerHTML = `${getMonthName(currentMonth)} ${currentYear}`;
monthDays.innerHTML = "";
let firstDay = new Date(currentYear, currentMonth, 1);
let lastDay = new Date(currentYear, currentMonth + 1, 0);
let prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
let startingDay = firstDay.getDay();
// Previous month days
for (let i = startingDay; i > 0; i--) {
let day = document.createElement("div");
day.classList.add("day");
day.textContent = prevMonthDays - i + 1;
monthDays.appendChild(day);
}
// Current month days
for (let i = 1; i <= lastDay.getDate(); i++) {
let day = document.createElement("div");
day.classList.add("day");
day.textContent = i;
if (i === currentDate.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear()) {
day.classList.add("today");
}
monthDays.appendChild(day);
}
}
function getMonthName(month) {
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return months[month];
}
function prevMonth() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar();
}
function nextMonth() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar();
}
renderCalendar();
</script>
</body>
</html>
