Open In App

How to Design a Simple Calendar using JavaScript ?

Last Updated : 09 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date.

Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS, and JavaScript

The task at hand is to create a webpage that displays a calendar. The calendar should have the functionality to navigate to the previous and next months. The calendar should also be able to display the current date in a different color.

Approach:

  • Create an HTML structure for the calendar using a table and appropriate list elements.
  • Create JavaScript variables to keep track of the current month and year, as well as elements to display the current month and year on the page.
  • Use JavaScript to create a function to display the current month’s calendar. This function should take in the current month and year as arguments and use them to determine the number of days in the current month, and the first day of the month, and fill in the appropriate number of days in the calendar.
  • Create JavaScript functions to navigate to the next and previous months.
  • Use JavaScript to add event listeners to the appropriate elements (next and previous buttons) to call the appropriate navigation functions when clicked.

Implementation: Below is the implementation of the above approach:

  • index.html: This file contains the skeleton of calendar
  • style.css: This file contains CSS to improve the look of the calendar
  • script.js: This file contains the code to make the calendar dynamic

 Example: Here is the implementation of the above-explained steps.

HTML




<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
        href=
"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>
 
<body>
    <div class="calendar-container">
        <header class="calendar-header">
            <p class="calendar-current-date"></p>
            <div class="calendar-navigation">
                <span id="calendar-prev"
                      class="material-symbols-rounded">
                    chevron_left
                </span>
                <span id="calendar-next"
                      class="material-symbols-rounded">
                    chevron_right
                </span>
            </div>
        </header>
 
        <div class="calendar-body">
            <ul class="calendar-weekdays">
                <li>Sun</li>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
            </ul>
            <ul class="calendar-dates"></ul>
        </div>
    </div>
</body>
</html>


CSS




* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
 
body {
    display: flex;
    background: #ef62da;
    min-height: 100vh;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
}
 
.calendar-container {
    background: #fff;
    width: 450px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
 
.calendar-container header {
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between;
}
 
header .calendar-navigation {
    display: flex;
}
 
header .calendar-navigation span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 1.9rem;
}
 
.calendar-navigation span:last-child {
    margin-right: -10px;
}
 
header .calendar-navigation span:hover {
    background: #f2f2f2;
}
 
header .calendar-current-date {
    font-weight: 500;
    font-size: 1.45rem;
}
 
.calendar-body {
    padding: 20px;
}
 
.calendar-body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
}
 
.calendar-body .calendar-dates {
    margin-bottom: 20px;
}
 
.calendar-body li {
    width: calc(100% / 7);
    font-size: 1.07rem;
    color: #414141;
}
 
.calendar-body .calendar-weekdays li {
    cursor: default;
    font-weight: 500;
}
 
.calendar-body .calendar-dates li {
    margin-top: 30px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
 
.calendar-dates li.inactive {
    color: #aaa;
}
 
.calendar-dates li.active {
    color: #fff;
}
 
.calendar-dates li::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
 
.calendar-dates li.active::before {
    background: #6332c5;
}
 
.calendar-dates li:not(.active):hover::before {
    background: #e4e1e1;
}


Javascript




let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
 
const day = document.querySelector(".calendar-dates");
 
const currdate = document
    .querySelector(".calendar-current-date");
 
const prenexIcons = document
    .querySelectorAll(".calendar-navigation span");
 
// Array of month names
const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];
 
// Function to generate the calendar
const manipulate = () => {
 
    // Get the first day of the month
    let dayone = new Date(year, month, 1).getDay();
 
    // Get the last date of the month
    let lastdate = new Date(year, month + 1, 0).getDate();
 
    // Get the day of the last date of the month
    let dayend = new Date(year, month, lastdate).getDay();
 
    // Get the last date of the previous month
    let monthlastdate = new Date(year, month, 0).getDate();
 
    // Variable to store the generated calendar HTML
    let lit = "";
 
    // Loop to add the last dates of the previous month
    for (let i = dayone; i > 0; i--) {
        lit +=
            `<li class="inactive">${monthlastdate - i + 1}</li>`;
    }
 
    // Loop to add the dates of the current month
    for (let i = 1; i <= lastdate; i++) {
 
        // Check if the current date is today
        let isToday = i === date.getDate()
            && month === new Date().getMonth()
            && year === new Date().getFullYear()
            ? "active"
            : "";
        lit += `<li class="${isToday}">${i}</li>`;
    }
 
    // Loop to add the first dates of the next month
    for (let i = dayend; i < 6; i++) {
        lit += `<li class="inactive">${i - dayend + 1}</li>`
    }
 
    // Update the text of the current date element
    // with the formatted current month and year
    currdate.innerText = `${months[month]} ${year}`;
 
    // update the HTML of the dates element
    // with the generated calendar
    day.innerHTML = lit;
}
 
manipulate();
 
// Attach a click event listener to each icon
prenexIcons.forEach(icon => {
 
    // When an icon is clicked
    icon.addEventListener("click", () => {
 
        // Check if the icon is "calendar-prev"
        // or "calendar-next"
        month = icon.id === "calendar-prev" ? month - 1 : month + 1;
 
        // Check if the month is out of range
        if (month < 0 || month > 11) {
 
            // Set the date to the first day of the
            // month with the new year
            date = new Date(year, month, new Date().getDate());
 
            // Set the year to the new year
            year = date.getFullYear();
 
            // Set the month to the new month
            month = date.getMonth();
        }
 
        else {
 
            // Set the date to the current date
            date = new Date();
        }
 
        // Call the manipulate function to
        // update the calendar display
        manipulate();
    });
});


Output:

 

Click here to see live code output



Similar Reads

How to design calendar for web page using jQuery EasyUI ?
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn how to design a calendar feature for our webpage interface. Downloads for EasyUI for jQuer
2 min read
Design a calendar using HTML and CSS
In this article, we will create a calendar using HTML, and CSS. HTML is a standard for creating the structure of web pages and defining elements like headings, paragraphs, and links whereas CSS (Cascading Style Sheets) complements HTML by controlling the visual presentation, enabling styling and layout customization for a more visually appealing we
5 min read
Design a simple counter using HTML CSS and JavaScript
A simple counter is a numeric display that increments or decrements based on user interaction. To design one using HTML, CSS, and JavaScript, create a display area and buttons. Use JavaScript to increment or decrement the counter value and update the display accordingly. Here is the Sample Image of the counter that we are going to make: [caption wi
4 min read
ReactJS UI Ant Design Calendar Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. The calendar component is used as a container for displaying data in the form of the calendar. We can use the following approach in ReactJS to use the Ant Design Calendar Component. Calendar Props: dateCellRender: It is used to customize the display of the da
3 min read
How to show calendar only click on icon using JavaScript ?
Bootstrap is one of the widely preferred CSS frameworks for the development of an interactive user interface. Bootstrap comes bundled with a wide range of components, plugin, and utilities that make designing a webpage much easier. The date-picker is one such interactive feature provided by Bootstrap to select a date from a drop-down calendar which
4 min read
Simple Portfolio Website Design using HTML
Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like: About us sectionYour projectsYour achievementsYour c
7 min read
How to create A Dynamic Calendar in HTML CSS & JavaScript?
In this article, we will see how we can create A Dynamic Calendar with the help of HTML CSS &amp; JavaScript. We will be designing and implementing a straightforward yet effective dynamic calendar, offering seamless month navigation and quick access to the current month. With a visually appealing design, and user can also jump directly to any day,
10 min read
5 Simple Steps to Create Wireframe in Software Design
Designing a website is not an easy task if a UX designer does not pay attention to the entire layout of the system. In companies many times it happens that UX designers get frustrated with the client just because of the frequent request they get to change various things in an application. The reason why the conflict arises between the stakeholder a
8 min read
Create Holiday Calendar using HTML and PHP
In this article, we will create a holiday calendar for a given month using the concept of tables in HTML, CSS for styling the calendar, and PHP. We will also display all the holidays in a given month, highlight them using a different color and display the holiday name whenever the mouse hovers over the highlighted date. We will use PHP for iteratin
2 min read
How to create Glassmorphism Calendar using CSS ?
In this article, we will see how to create a calendar using glassmorphism effects in CSS &amp; will understand its implementation through the example. You can easily create Glassmorphism Calendar using Glassmorphism UI design which is the latest emerging trend in designing. It is a modern way of styling web elements of any web page and providing a
3 min read