Custom Calendar using HTML, CSS & JavaScript

Calendars are an integral part of our daily lives. From scheduling meetings to planning events, they provide an organized way to track dates and plan activities.

While many ready-to-use calendar widgets and libraries are available, building a custom calendar from scratch allows you to have full control over its design and functionality.

It’s also an excellent opportunity to deepen your understanding of web development and hone your skills in HTML, CSS, and JavaScript.

Creating a custom calendar from scratch involves three core web technologies:

HTML: Provides the basic structure of the calendar, defining elements like days, months, and navigation buttons.
CSS: Enhances the visual appeal of the calendar by styling its components, including colors, layouts, and fonts, to make it visually engaging.
JavaScript: Powers the functionality of the calendar, enabling features such as navigating between months, highlighting the current date, and dynamically rendering the correct number of days in each month.

This project is particularly useful for developers looking to build lightweight, customizable calendar components tailored to specific requirements, whether for personal use, client projects, or web applications. By coding your own calendar, you can experiment with features such as event tracking, multi-language support, or integrations with other APIs like Google Calendar.

In this tutorial, we will guide you through the process of building a responsive, interactive calendar that not only displays dates but also includes navigation buttons to move between months. You’ll also learn how to handle leap years, align the first day of each month with the correct weekday, and format dates dynamically using JavaScript.

By the end of this project, you’ll have a fully functional calendar and a deeper understanding of how front-end technologies can work together to create interactive web components. Whether you’re a beginner stepping into the world of JavaScript or an experienced developer looking for a creative project, this tutorial will provide a practical and engaging learning experience.

Let us start with the HTML code first

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    

    <title>Custom Calendar using HTML, CSS & JavaScript</title>
</head>

<body>
    <div class="container">
        <div class="calendar">
            <div class="month">
                <i class="fas fa-angle-left prev"></i>
                <div class="date">
                    <h1></h1>
                    <p></p>
                </div>
                <i class="fas fa-angle-right next"></i>
            </div>
            <div class="weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
            </div>
            <div class="days"></div>
        </div>
    </div>

     
</body>

</html>

Let us see how the output will look like after the html code , remembwe we have not added any styling or JavaScript to it. So the output is just a raw.

Now, let us add some styling to the above raw output, to make it look beautiful

CSS Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

html {
    font-size: 62.5%;
}

.container {
    width: 100%;
    height: 100vh;
    background-color: #12121f;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar {
    width: 45rem;
    height: 52rem;
    background-color: #222227;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

.month {
    width: 100%;
    height: 12rem;
    background-color: deepskyblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.month i {
    font-size: 2.5rem;
    cursor: pointer;
}

.month h1 {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 1rem;
}

.month p {
    font-size: 1.6rem;
}

.weekdays {
    width: 100%;
    height: 5rem;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
}

.weekdays div {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    width: calc(44.2rem / 7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem;
}

.days div {
    font-size: 1.4rem;
    margin: 0.3rem;
    width: calc(40.2rem / 7);
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
    transition: background-color 0.2s;
    border-radius: 10px;
}

.days div:hover:not(.today) {
    background-color: #262626;
    border: 0.2rem solid #777;
    cursor: pointer;
}

.prev-date,
.next-date {
    opacity: 0.5;
}

.today {
    background-color: deepskyblue;
    border-radius: 10px;
}

To see the output do not forget to add the css file name in the html code like below

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="voice.css">

    <title>Custom Calendar using HTML, CSS & JavaScript</title>
</head>

<body>
    <div class="container">
        <div class="calendar">
            <div class="month">
                <i class="fas fa-angle-left prev"></i>
                <div class="date">
                    <h1></h1>
                    <p></p>
                </div>
                <i class="fas fa-angle-right next"></i>
            </div>
            <div class="weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
            </div>
            <div class="days"></div>
        </div>
    </div>

     
</body>

</html>

Output:

Now that’s still incomplete, let us complete it by adding some functionality to it using JavaScript.

JavaScript Code:

const date = new Date();

const renderCalendar = () => {
    date.setDate(1);

    const monthDays = document.querySelector(".days");

    const lastDay = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const prevLastDay = new Date(
        date.getFullYear(),
        date.getMonth(),
        0
    ).getDate();

    const firstDayIndex = date.getDay();

    const lastDayIndex = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDay();

    const nextDays = 7 - lastDayIndex - 1;

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

    document.querySelector(".date h1").innerHTML = `${months[date.getMonth()]} ${date.getFullYear()}`;
    document.querySelector(".date p").innerHTML = new Date().toDateString();

    let days = "";

    for (let x = firstDayIndex; x > 0; x--) {
        days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
    }

    for (let i = 1; i <= lastDay; i++) {
        if (
            i === new Date().getDate() &&
            date.getMonth() === new Date().getMonth()
        ) {
            days += `<div class="today">${i}</div>`;
        } else {
            days += `<div>${i}</div>`;
        }
    }

    for (let j = 1; j <= nextDays; j++) {
        days += `<div class="next-date">${j}</div>`;
    }

    monthDays.innerHTML = days;
};

document.querySelector(".prev").addEventListener("click", () => {
    date.setMonth(date.getMonth() - 1);
    renderCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
    date.setMonth(date.getMonth() + 1);
    renderCalendar();
});

renderCalendar();

Add the JavaScript file to the html code and see the beautiful output like below

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="voice.css">

    <title>Custom Calendar using HTML, CSS & JavaScript</title>
</head>

<body>
    <div class="container">
        <div class="calendar">
            <div class="month">
                <i class="fas fa-angle-left prev"></i>
                <div class="date">
                    <h1></h1>
                    <p></p>
                </div>
                <i class="fas fa-angle-right next"></i>
            </div>
            <div class="weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
            </div>
            <div class="days"></div>
        </div>
    </div>

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

</html>

Output:

Explanation of the code:

HTML Structure:

<!doctype html>:
- Declares the document as an HTML5 file, ensuring modern browser compatibility.
<html lang="en">:
- Sets the primary language of the document to English for accessibility tools and search engines.

Head Section (`<head>`):

Meta Tags (<meta>):
- <meta charset="utf-8">: Specifies the character encoding as UTF-8, ensuring compatibility with a wide range of characters.
- <meta name="viewport" content="width=device-width, initial-scale=1">: Ensures the page is responsive by scaling correctly on all devices, especially mobile screens.
Font Awesome Icons (<link>):
- Links to the Font Awesome library for adding scalable vector icons (e.g., navigation arrows in the calendar).
- integrity and crossorigin attributes: Ensure secure and proper cross-origin resource sharing for external assets.
Google Fonts:
- Two <link> tags preconnect to Google’s font services and load the “Poppins” font, enhancing the text’s visual appearance.
Custom Stylesheet:
- <link rel="stylesheet" href="voice.css">: Links to a custom CSS file named voice.css, which contains styles for the page elements.
<title>:
- Sets the title of the webpage as “Custom Calendar using HTML, CSS & JavaScript,” displayed on the browser tab.

Body Section (`<body>`):

Container (<div class="container">):
- Acts as a wrapper for the calendar, ensuring proper alignment and spacing.
Calendar Layout (<div class="calendar">):
- The main container for all calendar elements.

Month Navigation (`<div class="month">`):

Left Navigation Button (<i class="fas fa-angle-left prev"></i>):
- A Font Awesome icon for navigating to the previous month.
- The class prev is used for JavaScript functionality.
Current Month and Date Display (<div class="date">):
- <h1>: Dynamically displays the current month and year.
- <p>: Displays the current date in a readable format (e.g., “Mon Dec 02 2024”).
- These are populated via JavaScript.
Right Navigation Button (<i class="fas fa-angle-right next"></i>):
- A Font Awesome icon for navigating to the next month.
- The class next is used for JavaScript functionality.

Weekday Names (`<div class="weekdays">`):

Days of the Week:
- Seven <div> elements represent the names of the days (Sun to Sat).
- This static structure is styled and aligned using CSS.

Days of the Month (`<div class="days">`):

Days Container:
- A dynamic container where the days of the current month, previous month’s trailing days, and next month’s leading days will be displayed.
- Populated dynamically using JavaScript.

JavaScript Integration:

External JavaScript File (<script src="money.js"></script>):
- Links to the money.js JavaScript file, which contains logic to render and control the calendar.
- This file likely includes features such as rendering dates, navigating between months, and managing user interactions.

General Notes:

Separation of Concerns:
- HTML handles structure, CSS styles the elements, and JavaScript adds interactivity, adhering to best practices.
Dynamic Content:
- The calendar dynamically adjusts based on the current date, ensuring accurate rendering of days, months, and navigation.
Responsive Design:
- The inclusion of meta tags and external CSS ensures the calendar is visually appealing on various devices.

This structure lays the foundation for an interactive, well-designed custom calendar.

Building a custom calendar using HTML, CSS, and JavaScript is a practical and rewarding project that highlights the core principles of web development. This project integrates structure, styling, and functionality, demonstrating how these technologies work together to create an interactive and visually appealing application.

Through this project, you learn to:

Structure the Content:
- HTML forms the backbone by organizing the calendar’s layout, defining the navigation buttons, month, and date containers, as well as static elements like weekdays.
- The semantic structure ensures that the calendar is accessible and easy to understand.
Style the Design:
- CSS enhances the visual appeal by defining the layout, colors, typography, and responsiveness of the calendar.
- Using external libraries like Font Awesome and Google Fonts further refines the design, adding professional elements like icons and custom fonts.
Add Interactivity:
- JavaScript breathes life into the calendar, making it dynamic and functional.
- Features like navigating between months, dynamically rendering dates, and marking the current day involve DOM manipulation and date/time API usage, deepening your understanding of JavaScript’s capabilities.

Real-World Applications

Custom calendars have many real-world applications, including:

Appointment schedulers
Event planners
Task trackers
Reservation systems

This project can also serve as a foundation for creating more advanced applications by integrating backend technologies for persistent data storage or libraries like Money.js for enhanced date handling.

Key Takeaways

Hands-On Learning: Building a calendar is an excellent way to practice and improve your HTML, CSS, and JavaScript skills.
Dynamic UI Development: This project showcases how to create an interactive and user-friendly interface.
Scalability: The design can be extended to include additional features like recurring events, time zones, or themes.

By completing this project, you gain both the technical skills and the confidence to tackle more complex web development tasks. Whether you’re a beginner or an experienced developer, crafting a custom calendar demonstrates your ability to combine creativity with functionality, producing a tool that’s not only practical but also elegant and responsive.

This journey emphasizes that with the right mix of HTML, CSS, and JavaScript, even a basic concept like a calendar can transform into a polished and versatile web application.

CodeMagnet

CodeMagnet

Custom Calendar using HTML, CSS & JavaScript – Full Source Code

HTML Structure:

Head Section (`<head>`):

Body Section (`<body>`):

Month Navigation (`<div class="month">`):

Weekday Names (`<div class="weekdays">`):

Days of the Month (`<div class="days">`):

JavaScript Integration:

General Notes:

Real-World Applications

Key Takeaways

Like this:

Author

Leave a ReplyCancel reply

Hangman Game in Python: Beginner-Friendly Project with Source Code

Python Google Trends Analysis Made Easy with TrendSpy-Lite 0.0.3

Pydantic v3: The New Standard for Data Validation in Python (Why Everything Changed in 2025)

Trending

Hangman Game in Python: Beginner-Friendly Project with Source Code

Python Google Trends Analysis Made Easy with TrendSpy-Lite 0.0.3

Pydantic v3: The New Standard for Data Validation in Python (Why Everything Changed in 2025)

Data Cleaning with Pandas in Python – A Complete Guide

CodeMagnet

Subscribe to CodeMagnet! 🔔

Custom Calendar using HTML, CSS & JavaScript – Full Source Code

HTML Structure:

Head Section (<head>):

Body Section (<body>):

Month Navigation (<div class="month">):

Weekday Names (<div class="weekdays">):

Days of the Month (<div class="days">):

JavaScript Integration:

General Notes:

Real-World Applications

Key Takeaways

Share this:

Like this:

Author

Leave a ReplyCancel reply

Trending

Head Section (`<head>`):

Body Section (`<body>`):

Month Navigation (`<div class="month">`):

Weekday Names (`<div class="weekdays">`):

Days of the Month (`<div class="days">`):