Dynamic Calendar Using HTML CSS and JavaScript

By
Asif Ali
-
0

Hey guys, today we will learn Dynamic Calendar Using HTML CSS and JavaScript from scratch. Creating a dynamic calendar using HTML, CSS, and JavaScript is a great way to display events, appointments, or important dates in an interactive and visually appealing manner.

In this tutorial, I’ll guide you through the essential steps to build a dynamic calendar without providing actual code. However, I’ll explain the concepts and guide you on the key components and logic you’ll need to create your dynamic calendar.

Dynamic Calendar Using HTML CSS and JavaScript

However, I’ve been sharing different types of projects using HTML, CSS, and JavaScript, these projects are small projects, and you can use them inside the website if you are interested in making an attractive and professional website. I also mentioned different projects inside the websites, so you should try to include them.

Dynamic Calendar Using HTML CSS and JavaScript

I’ve made the complete video tutorial on how to make a dynamic calendar using HTML, CSS, and JavaScript, inside that I’ve used very basic logic to create it. There are many tutorials published on the same topic, but they share different logics, So, I’ve been trying to share with you an easy way to create a project.

I hope you’ve watched the complete tutorial, hope you’ve learned many new things from the tutorial. However, If you face any problems, you can check out the source code for the project below.

You May Also Like:

Step 1: Setting up the HTML Structure

Begin by creating the basic HTML structure for your calendar. You’ll typically need a container element to hold the calendar grid and some navigation controls for switching between months or years. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <script defer src="js/script.js"></script>
    <title>Dynamic Calander using HTML, CSS & JS</title>
  </head>
  <body>
    <div class="calendar dark">
      <div class="calendar_inner">
        <div class="calendar_controls">
          <div class="calendar_headings">
            <i class="fa-solid fa-arrow-left" id="prev"></i>
            <h2 class="months_year"></h2>
            <i class="fa-solid fa-arrow-right" id="next"></i>
          </div>
          <div class="current_datetime">
            <p class="daytxt">Today</p>
            <p class="datetxt">Tue, 10, Oct 2023</p>
          </div>
          <div class="days_date">
            <ul class="days">
              <li>Sun</li>
              <li>Mon</li>
              <li>Tue</li>
              <li>Wed</li>
              <li>Thu</li>
              <li>Fri</li>
              <li>Sat</li>
            </ul>
            <ul class="dates">
              <!-- <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li class="active">5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
              <li>11</li>
              <li>12</li>
              <li>13</li>
              <li>14</li>
              <li>15</li>
              <li>17</li>
              <li>18</li>
              <li>19</li>
              <li>20</li>
              <li>21</li>
              <li>22</li>
              <li>23</li>
              <li>24</li>
              <li>25</li>
              <li class="dummy">26</li>
              <li class="dummy">27</li>
              <li class="dummy">28</li>
              <li class="dummy">29</li>
              <li class="dummy">30</li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Step 2: Styling with CSS

Apply CSS styles to make your calendar visually appealing. You can define the appearance of days, headers, events, and navigation controls. Use CSS for layout, fonts, colors, and any additional design elements to give your calendar a professional look.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

:root {
  --calendar-bg-color: #262829;
  --calendar-font-color: #fff;
  --weekdays-border-bottom-color: #404040;
  --calendar-date-hover-color: #b3b3b3;
  --calendar-dummy-color: #505050;
  --calendar-current-date-color: #1b1f21;
  --calendar-today-color: linear-gradient(to bottom, #03a9f4, #2196f3);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "poppins", sans-serif;
  overflow: hidden;
}

.calendar {
  background-color: var(--calendar-bg-color);
  color: var(--calendar-font-color);
  border-radius: var(--calendar-border-radius);
  max-width: 450px;
  width: 100%;
  border-radius: 5px;
  box-shadow: 5px 5px 10px var(--calendar-bg-color);
}

.calendar_inner {
  padding: 2rem;
}

.calendar_headings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.fa-solid.fa-arrow-left,
.fa-solid.fa-arrow-right {
  cursor: pointer;
  font-size: 1.2rem;
}

.current_datetime {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--calendar-current-date-color);
  padding: 0.7rem;
  margin-bottom: 1rem;
  border-radius: 5px;
}

.current_datetime .daytxt {
  background-color: green;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  color: var(--calendar-font-color);
}

.days_date ul {
  list-style-type: none;
}

.days_date .days,
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.days_date .days {
  margin: 1rem 0;
}

.days_date .days li {
  border-bottom: 2px solid var(--weekdays-border-bottom-color);
  margin: 0 0.2rem;
}

.dates li {
  padding: 0.5rem;
  margin: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  color: var(--calendar-font-color);
}

.days_date .dates li:hover {
  background-color: var(--calendar-date-hover-color);
  color: var(--calendar-bg-color);
}

.days_date .dates li.active {
  background: var(--calendar-today-color);
}

.days_date .dummy {
  color: var(--calendar-dummy-color);
}

Step 3: JavaScript for Dynamic Functionality

JavaScript is the heart of your dynamic calendar. Here’s what you can implement using JavaScript:

"use strict";

const datetxtEl = document.querySelector(".datetxt");
const datesEl = document.querySelector(".dates");
const btnEl = document.querySelectorAll(".calendar_headings .fa-solid");
const monthYearEl = document.querySelector(".month_year");

let dmObj = {
  days: [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ],

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

// date object
let dateObj = new Date();

let dayName = dmObj.days[dateObj.getDay()]; // day
let month = dateObj.getMonth(); // month
let year = dateObj.getFullYear(); // year
let date = dateObj.getDate(); // dates;

// today date
datetxtEl.innerHTML = `${dayName},${date}, ${dmObj.months[month]}, ${year}`;

const displayCalendar = () => {
  let firtDayOfMonth = new Date(year, month, 1).getDay(); // first day of the month
  let lastDateofMonth = new Date(year, month + 1, 0).getDate(); // last date of the month
  let lastDayofMonth = new Date(year, month, lastDateofMonth).getDay(); // last day of month
  let lastDateofLastMonth = new Date(year, month, 0).getDate(); // last date of previous month
  let days = "";

  // previous month last days
  for (let i = firtDayOfMonth; i > 0; i--) {
    days += `<li class="dummy">${lastDateofLastMonth - i + 1}</li>`;
  }

  for (let i = 1; i <= lastDateofMonth; i++) {
    let checkToday =
      i === dateObj.getDate() &&
      month === new Date().getMonth() &&
      year === new Date().getFullYear()
        ? "active"
        : "";

    days += `<li class="${checkToday}">${i}</li>`;
  }

  //next month first days
  for (let i = lastDayofMonth; i < 6; i++) {
    days += `<li class="dummy">${i - lastDayofMonth + 1}</li>`;
  }

  // display all days inside the HTML file
  datesEl.innerHTML = days;

  // display current month & year
  monthYearEl.innerHTML = `${dmObj.months[month]}, ${year}`;
};

displayCalendar();

// previous and next month
btnEl.forEach((btns) => {
  btns.addEventListener("click", () => {
    month = btns.id === "prev" ? month - 1 : month + 1;

    if (month < 0 || month > 11) {
      date = new Date(year, month, new Date().getDate());
      year = date.getFullYear();
      month = date.getMonth();
    } else {
      date = new Date();
    }

    displayCalendar();
  });
});

Always test your calendar thoroughly to ensure that it functions as expected. Test it on various browsers and devices to catch any compatibility issues. Debug any errors or unexpected behavior in your JavaScript code.

If you plan to share your calendar with others, provide documentation or a user guide explaining how to use it. This should include instructions for adding and managing events, navigating the calendar, and any customization options.

In conclusion, creating a dynamic calendar using HTML, CSS, and JavaScript involves designing the structure, styling it, implementing JavaScript functionality, testing, documenting, and deploying. While this tutorial doesn’t contain specific code, you now have a roadmap to create your own custom dynamic calendar based on your project’s requirements.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.