How to Create a Calendar with HTML,CSS
and JavaScript
As all of you know, a schedule is a graph that shows the day, weeks, and months of a specific year. Schedules additionally assist you with reminding significant occasions, like occasions and celebrations.
In my dynamic schedule, clients can see the ongoing date and day. They can likewise see the times of the present, past, or future month utilizing the past and next symbols. These all are finished with Vanilla JavaScript which implies no outer library is utilized to make this schedule.
Video Tutorial of Creating Calendar
Calendar [Source Codes]
To Create a Calendar with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Create Calendar with JavaScript</title>
- <link rel="stylesheet" href="style.css">
- <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="wrapper">
- <header>
- <p class="current-date"></p>
- <div class="icons">
- <span id="prev" class="material-symbols-rounded">chevron_left</span>
- <span id="next" class="material-symbols-rounded">chevron_right</span>
- </div>
- </header>
- <div class="calendar">
- <ul class="weeks">
- <li>Sun</li>
- <li>Mon</li>
- <li>Tue</li>
- <li>Wed</li>
- <li>Thu</li>
- <li>Fri</li>
- <li>Sat</li>
- </ul>
- <ul class="days"></ul>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- padding: 0 10px;
- justify-content: center;
- min-height: 100vh;
- background: #282A35;
- }
- .wrapper{
- width: 600px;
- background: #f2f2f2;
- border-radius: 8px;
- }
- .wrapper header{
- display: flex;
- align-items: center;
- padding: 25px 30px 10px;
- justify-content: space-between;
- }
- header .icons{
- display: flex;
- }
- header .icons span{
- height: 38px;
- width: 38px;
- margin: 0 1px;
- cursor: pointer;
- color: #878787;
- text-align: center;
- line-height: 38px;
- font-size: 1.9rem;
- user-select: none;
- border-radius: 50%;
- }
- .icons span:last-child{
- margin-right: -10px;
- }
- header .icons span:hover{
- background: #f2f2f2;
- }
- header .current-date{
- font-size: 1.45rem;
- font-weight: 500;
- }
- .calendar{
- padding: 20px;
- }
- .calendar ul{
- display: flex;
- flex-wrap: wrap;
- list-style: none;
- text-align: center;
- }
- .calendar .days{
- margin-bottom: 20px;
- }
- .calendar li{
- color: #333;
- width: calc(100% / 7);
- font-size: 1.07rem;
- }
- .calendar .weeks li{
- font-weight: 500;
- cursor: default;
- }
- .calendar .days li{
- z-index: 1;
- cursor: pointer;
- position: relative;
- margin-top: 30px;
- }
- .days li.inactive{
- color: #aaa;
- }
- .days li.active{
- color: #fff;
- }
- .days li::before{
- position: absolute;
- content: "";
- left: 50%;
- top: 50%;
- height: 40px;
- width: 40px;
- z-index: -1;
- border-radius: 50%;
- transform: translate(-50%, -50%);
- }
- .days li.active::before{
- background: #785BF8;
- }
- .days li:not(.active):hover::before{
- background: #f2f2f2;
- }
Now paste the following codes into your script.js file
- const daysTag = document.querySelector(".days"),
- currentDate = document.querySelector(".current-date"),
- prevNextIcon = document.querySelectorAll(".icons span");
-
- let date = new Date(),
- currYear = date.getFullYear(),
- currMonth = date.getMonth();
-
- const months = ["January", "February", "March", "April", "May", "June", "July",
- "August", "September", "October", "November", "December"];
-
- const renderCalendar = () => {
- let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(),
- lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(),
- lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(),
- lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();
- let liTag = "";
-
- for (let i = firstDayofMonth; i > 0; i--) {
- liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
- }
-
- for (let i = 1; i <= lastDateofMonth; i++) {
- let isToday = i === date.getDate() && currMonth === new Date().getMonth()
- && currYear === new Date().getFullYear() ? "active" : "";
- liTag += `<li class="${isToday}">${i}</li>`;
- }
-
- for (let i = lastDayofMonth; i < 6; i++) {
- liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`
- }
- currentDate.innerText = `${months[currMonth]} ${currYear}`;
- daysTag.innerHTML = liTag;
- }
- renderCalendar();
-
- prevNextIcon.forEach(icon => {
- icon.addEventListener("click", () => {
- currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
-
- if(currMonth < 0 || currMonth > 11) {
- date = new Date(currYear, currMonth, new Date().getDate());
- currYear = date.getFullYear();
- currMonth = date.getMonth();
- } else {
- date = new Date();
- }
- renderCalendar();
- });
- });
If you face any difficulties while creating a Calendar or your code is not working as expected, you can download the source code files by clicking download button.