Creating a dynamic calendar is a great way to enhance your web development skills and can be a valuable addition to any website or application. In this tutorial, we'll walk through building a functional calendar from scratch using HTML, CSS, and JavaScript. By the end, you'll have a calendar that displays the current month and allows users to navigate between months.

Project Overview
Setting Up the Project
Creating the HTML Structure
Styling the Calendar with CSS
Adding Functionality with JavaScript
Enhancements and Final Touches
Conclusion

Project Overview

We will create a calendar that:

Displays the current month and year.
Shows all the days of the current month.
Allows users to navigate to previous and next months.

Technologies Used:

HTML: For the structure of the calendar.
CSS: For styling the calendar.
JavaScript: For dynamic rendering and interactivity.

Setting Up the Project

First, let's set up our project directory with the following files:

index.html: The main HTML file.
styles.css: The CSS file for styling.
script.js: The JavaScript file for functionality.

Directory Structure

/calendar-project
|-- index.html
|-- styles.css
|-- script.js

Creating the HTML Structure

Open index.html and set up the basic HTML template.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Calendar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="calendar">
    <div class="calendar-header">
      <button id="prev-month">‹</button>
      <div id="month-year"></div>
      <button id="next-month">›</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-weekdays">
        <!-- Weekday Names -->
      </div>
      <div class="calendar-dates">
        <!-- Dates will be populated here -->
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Explanation

Calendar Container: The main wrapper with the class calendar.
Header: Contains navigation buttons and displays the current month and year.
Weekdays: A row displaying the names of the weekdays.
Dates: The grid where all the dates will be populated dynamically.

Styling the Calendar with CSS

Open styles.css and add the following styles.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.calendar {
  width: 350px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.calendar-header button {
  background-color: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
}
#month-year {
  font-size: 1.2em;
  font-weight: bold;
}
.calendar-weekdays, .calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-weekdays div, .calendar-dates div {
  text-align: center;
  padding: 10px;
}
.calendar-weekdays {
  background-color: #eaeef3;
}
.calendar-weekdays div {
  font-weight: bold;
}
.calendar-dates div {
  border-bottom: 1px solid #eaeef3;
  cursor: pointer;
}
.calendar-dates div:hover {
  background-color: #f1f1f1;
}

Explanation

Layout: The calendar is centered on the page with a fixed width.
Header: Styles for the navigation buttons and the month-year display.
Grid System: Using CSS Grid to create a 7-column layout for weekdays and dates.
Interactivity: Hover effects on the dates for better user experience.

Adding Functionality with JavaScript

Now, let's make our calendar dynamic. Open script.js and start coding.

Initializing Variables

const calendarDates = document.querySelector('.calendar-dates');
const monthYear = document.getElementById('month-year');
const prevMonthBtn = document.getElementById('prev-month');
const nextMonthBtn = document.getElementById('next-month');

let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();

const months = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

Rendering the Calendar

Function to Render the Calendar

function renderCalendar(month, year) {
  calendarDates.innerHTML = '';
  monthYear.textContent = `${months[month]} ${year}`;

  // Get the first day of the month
  const firstDay = new Date(year, month, 1).getDay();

  // Get the number of days in the month
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Create blanks for days of the week before the first day
  for (let i = 0; i < firstDay; i++) {
    const blank = document.createElement('div');
    calendarDates.appendChild(blank);
  }

  // Populate the days
  for (let i = 1; i <= daysInMonth; i++) {
    const day = document.createElement('div');
    day.textContent = i;
    calendarDates.appendChild(day);
  }
}

Initial Render

renderCalendar(currentMonth, currentYear);

Navigating Between Months

Event Listeners for Navigation Buttons

prevMonthBtn.addEventListener('click', () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar(currentMonth, currentYear);
});

nextMonthBtn.addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar(currentMonth, currentYear);
});

Displaying Weekday Names

Back in index.html, within the .calendar-weekdays div, add the weekday names.

<div class="calendar-weekdays">
  <div>Sun</div>
  <div>Mon</div>
  <div>Tue</div>
  <div>Wed</div>
  <div>Thu</div>
  <div>Fri</div>
  <div>Sat</div>
</div>

Enhancements and Final Touches

Highlighting the Current Date

Modify the renderCalendar function to highlight the current date.

function renderCalendar(month, year) {
  // ... existing code ...

  // Get today's date
  const today = new Date();

  // Populate the days
  for (let i = 1; i <= daysInMonth; i++) {
    const day = document.createElement('div');
    day.textContent = i;

    // Highlight today's date
    if (
      i === today.getDate() &&
      year === today.getFullYear() &&
      month === today.getMonth()
    ) {
      day.classList.add('current-date');
    }

    calendarDates.appendChild(day);
  }
}

Add the following CSS to styles.css:

.current-date {
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
}

Adding Click Events to Dates

Suppose we want to alert the date when a user clicks on it.

calendarDates.addEventListener('click', (e) => {
  if (e.target.textContent !== '') {
    alert(`You clicked on ${e.target.textContent} ${months[currentMonth]} ${currentYear}`);
  }
});

Responsive Design

Adjust the calendar width for smaller screens.

@media (max-width: 400px) {
  .calendar {
    width: 100%;
    margin: 0 10px;
  }
}

Conclusion

Congratulations! You've built a dynamic and interactive calendar using HTML, CSS, and JavaScript. This project covers important concepts such as DOM manipulation, event handling, and working with dates in JavaScript.

Key Takeaways:

DOM Manipulation: Creating and appending elements dynamically.
Date Object: Using JavaScript's Date object to handle dates.
Event Handling: Adding interactivity with event listeners.

Possible Extensions:

Allow users to select dates for scheduling events.
Integrate with an API to display holidays.
Add a feature to switch between different calendar views (e.g., yearly, weekly).

Follow me on YouTube for more tutorials

Creating a Dynamic Calendar Using HTML, CSS, and JavaScript

Table of Contents

Project Overview

Setting Up the Project

Directory Structure

Creating the HTML Structure

Explanation

Styling the Calendar with CSS

Explanation

Adding Functionality with JavaScript

Initializing Variables

Rendering the Calendar

Function to Render the Calendar

Initial Render

Navigating Between Months

Event Listeners for Navigation Buttons

Displaying Weekday Names

Enhancements and Final Touches

Highlighting the Current Date

Adding Click Events to Dates

Responsive Design

Conclusion