Calender Using HTML, CSS & JavaScript

5 min read
Calendar Demo

Project Overview

This project presents a dynamic and interactive Calendar built using HTML, CSS, and JavaScript. It provides a clean and functional interface for displaying a monthly calendar, allowing users to navigate through different months and years. The calendar highlights the current day and is designed to be visually appealing and user-friendly.

Key features include a header displaying the current month and year, navigation arrows to move to the previous or next month, and a grid layout for days of the week and individual dates. The JavaScript handles the logic for generating the calendar days, identifying the first day of the month, and marking the current day. The CSS ensures a compact and aesthetically pleasing design with clear visual distinctions for weekdays, blank days, and the current date. This project is an excellent example of combining HTML structure, CSS styling, and JavaScript functionality to create a practical web component.

HTML Structure

The HTML structure for the Calendar is straightforward, consisting of a main `div` with the ID `calendar`. Inside this, there's a `calendar_header` containing navigation icons (`i` elements with Font Awesome classes) and an `h1` for displaying the month and year. Below the header, `div` elements with IDs `calendar_weekdays` and `calendar_content` are used to dynamically populate the days of the week and the dates, respectively, via JavaScript. This clean and semantic HTML provides the basic layout for the calendar, which is then brought to life with CSS and JavaScript.


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>calendar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="calendar">
  <div id="calendar_header">
    <i class="icon-chevron-left"></i>
    <h1></h1>
    <i class="icon-chevron-right"></i>
  </div>
  <div id="calendar_weekdays"></div>
  <div id="calendar_content"></div>
</div>
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="app.js"></script>

</body>
</html>

CSS Styling

The CSS for the Calendar is responsible for its clean and compact visual design. It centers the calendar on the page and defines the overall width. Styles are applied to the `calendar_header` for its background color, padding, and rounded corners, and to the `h1` and navigation icons within it. The `calendar_weekdays` and `calendar_content` sections are styled to create a grid-like layout for the days, with each day having a fixed width and height. Specific styles are applied to differentiate blank days (`.blank`) and the current day (`.today`), including background colors and text colors. Hover effects are also included for interactive feedback. The use of `display: inline-block` and `float: left` helps in arranging the day elements horizontally.


body {
    background-color: #F5F1E9;
}
#calendar {
    margin-left: auto;
    margin-right: auto;
    width: 320px;
    font-family: "Lato", sans-serif;
}
#calendar_weekdays div {
    display: inline-block;
    vertical-align: top;
}
#calendar_content,
#calendar_weekdays,
#calendar_header {
    position: relative;
    width: 320px;
    overflow: hidden;
    float: left;
    z-index: 10;
}

#calendar_weekdays div,
#calendar_content div {
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-align: center;
    background-color: #FFFFFF;
    color: #787878;
}
#calendar_content {
    -webkit-border-radius: 0px 0px 12px 12px;
    -moz-border-radius: 0px 0px 12px 12px;
    border-radius: 0px 0px 12px 12px;
}
#calendar_content div {
    float: left;
}
#calendar_content div:hover {
    background-color: #F8F8F8;
}
#calendar_content div.blank {
    background-color: #E8E8E8;
}
#calendar_header,
#calendar_content div.today {
    zoom: 1;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
#calendar_content div.today {
    color: #FFFFFF;
}
#calendar_header {
    width: 100%;
    height: 37px;
    text-align: center;
    background-color: #FF6860;
    padding: 18px 0;
    -webkit-border-radius: 12px 12px 0px 0px;
    -moz-border-radius: 12px 12px 0px 0px;
    border-radius: 12px 12px 0px 0px;
}
#calendar_header h1 {
    font-size: 1.5em;
    color: #FFFFFF;
    float: left;
    width: 70%;
}
i[class^="icon-chevron"] {
    color: #FFFFFF;
    float: left;
    width: 15%;
    border-radius: 50%;
}

JavaScript

The JavaScript for the Calendar is responsible for its dynamic functionality, including generating the days, handling month/year navigation, and highlighting the current date. The code uses jQuery for DOM manipulation. The `c()` function is the main rendering function, which clears previous content, determines the starting day of the month, and populates the calendar grid with dates and blank spaces. Helper functions like `h()` calculate the days and their corresponding weekdays, `p()` populates the weekdays header, and `d()` handles responsive sizing. Functions `v()`, `m()`, `g()`, and `y()` assist with date calculations and comparisons. The `b()` function initializes the calendar to the current month and year. Event listeners are attached to the chevron icons in the header to allow users to navigate between months, updating the calendar display accordingly.


$(function () {
    function c() {
        p();
        var e = h();
        var r = 0;
        var u = false;
        l.empty();
        while (!u) {
            if (s[r] == e[0].weekday) {
                u = true;
            } else {
                l.append('<div class="blank"></div>');
                r++;
            }
        }
        for (var c = 0; c < 42 - r; c++) {
            if (c >= e.length) {
                l.append('<div class="blank"></div>');
            } else {
                var v = e[c].day;
                var m = g(new Date(t, n - 1, v))
                    ? '<div class="today">'
                    : "<div>";
                l.append(m + "" + v + "</div>");
            }
        }
        var y = o[n - 1];
        a.css("background-color", y)
            .find("h1")
            .text(i[n - 1] + " " + t);
        f.find("div").css("color", y);
        l.find(".today").css("background-color", y);
        d();
    }
    function h() {
        var e = [];
        for (var r = 1; r < v(t, n) + 1; r++) {
            e.push({ day: r, weekday: s[m(t, n, r)] });
        }
        return e;
    }
    function p() {
        f.empty();
        for (var e = 0; e < 7; e++) {
            f.append("<div>" + s[e].substring(0, 3) + "</div>");
        }
    }
    function d() {
        var t;
        var n = $("#calendar").css("width", e + "px");
        n.find((t = "#calendar_weekdays, #calendar_content"))
            .css("width", e + "px")
            .find("div")
            .css({
                width: e / 7 + "px",
                height: e / 7 + "px",
                "line-height": e / 7 + "px",
            });
        n.find("#calendar_header")
            .css({ height: e * (1 / 7) + "px" })
            .find('i[class^="icon-chevron"]')
            .css("line-height", e * (1 / 7) + "px");
    }

    function v(e, t) {
        return new Date(e, t, 0).getDate();
    }
    function m(e, t, n) {
        return new Date(e, t - 1, n).getDay();
    }
    function g(e) {
        return y(new Date()) == y(e);
    }
    function y(e) {
        return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();
    }
    function b() {
        var e = new Date();
        t = e.getFullYear();
        n = e.getMonth() + 1;
    }

    var e = 480;
    var t = 2013;
    var n = 9;
    var r = [];
    var i = [
        "JANUARY",
        "FEBRUARY",
        "MARCH",
        "APRIL",
        "MAY",
        "JUNE",
        "JULY",
        "AUGUST",
        "SEPTEMBER",
        "OCTOBER",
        "NOVEMBER",
        "DECEMBER",
    ];
    
    var s = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];

    var o = [
        "#16a085",
        "#1abc9c",
        "#c0392b",
        "#27ae60",
        "#FF6860",
        "#f39c12",
        "#f1c40f",
        "#e67e22",
        "#2ecc71",
        "#e74c3c",
        "#d35400",
        "#2c3e50",
    ];
    var u = $("#calendar");
    var a = u.find("#calendar_header");
    var f = u.find("#calendar_weekdays");
    var l = u.find("#calendar_content");
    b();
    c();
    a.find('i[class^="icon-chevron"]').on("click", function () {
        var e = $(this);
        var r = function (e) {
            n = e == "next" ? n + 1 : n - 1;
            if (n < 1) {
                n = 12;
                t--;
            } else if (n > 12) {
                n = 1;
                t++;
            }
            c();
        };
        if (e.attr("class").indexOf("left") != -1) {
            r("previous");
        } else {
            r("next");
        }
    });
});

Live Demo: Calendar

Watch a live demonstration of the Calendar below.

Final Thoughts

This Calendar project offers a robust and visually appealing solution for displaying dates in a web application. Its dynamic generation of days and intuitive navigation make it a versatile component for various uses, from scheduling tools to personal organizers. The clean separation of HTML, CSS, and JavaScript ensures maintainability and extensibility.

You can easily customize this component by:

  • Integrating event handling to allow users to add or view events on specific dates.
  • Adding different calendar views (e.g., week view, year view).
  • Customizing the color scheme and fonts to match your application's design.
  • Implementing internationalization to support different date formats and languages.

Pro Tip

For more advanced calendar functionalities like recurring events, drag-and-drop scheduling, or integration with external APIs, consider using a dedicated JavaScript calendar library such as FullCalendar or TUI Calendar. These libraries offer extensive features and customization options, saving significant development time.

Ready to Use This Project?

Click the button below to download the full source code. Download will be ready in 10 seconds.

Stay Updated

Receive coding tips and resources updates. No spam.

We respect your privacy. Unsubscribe at any time.