Hello Coders, Welcome Back. Today in this article we are going to learn how to create a monthly calendar using html, css and javascript. This will be very easy tutorial and easy to follow.
We will be using the JavaScript’s Date object to get the current month and year and generate a calendar according to the month. Below I have provided both video tutorial as well as the step by step code tutorial and you can also download the code of this project by clicking on the download button at the end of this article.
Build a Monthly Calendar Using HTML, CSS and JavaScript | Video Tutorial
How to Create a Monthly Calendar using HTML, CSS and JavaScript | Step by Step Source Code Tutorial
Create three files: index.html, styles.css, script.js. Make sure you have linked the css and js files using the link tag and the script tag.
Step 1: Setting up the HTML
Add the boiler plate of the html document and inside body create container div. Inside this container div we will create an h2 tag where it will display the current month and year. We will use table tag to build the calendar for the current month and year.
<!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>2 Month Calendar</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h2 id="info"></h2>
<table id="calendar">
<thead id="days"></thead>
<tbody id="dates"></tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding JavaScript
Before we get into styling the project. Lets add javascript because all the data that we are going to display is going to come from the javascript.
In our function called createCalendar which accepts year and month as input parameters. First we will define three variables date, days and monthNames. Date will contain the current date, days and monthNames will contain the name of the days and name of the months respectively. See the below code for reference.
Next we will create a variable called year_and_month which will be a string which contains the current month and the year. date.getMonth() will return the current index of the month. Using that index we will get the name of the month.
Next we will add the day names to the html using the for loop for days.
So now to create a calendar we need to know the firstDay of the month and the numberOfDays it is going to have. Using the firstDay of the month we will add the date to the day on which it starts. Using numberOfDays we will add rest of the dates to the calendar.
Finally we will pass the currentYear and currentMonth to call the function.
function createCalendar(year, month) {
const date = new Date(year, month - 1)
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let year_and_month = `${monthNames[date.getMonth()]} ${year}\n`
document.getElementById("info").textContent = year_and_month
let tableDays = document.getElementById("days")
for (let i = 0; i < days.length; i++) {
let td = document.createElement("td")
td.textContent = days[i]
tableDays.appendChild(td)
}
let firstDay = new Date(year, month - 1, 1).getDay()
let numberOfDays = new Date(year, month, 0).getDate()
let tableDates = document.getElementById("dates")
for (let i = 0; i < firstDay; i++) {
let td = document.createElement("td")
tableDates.appendChild(td)
}
for (let i = 1; i <= numberOfDays; i++) {
let td = document.createElement("td")
td.textContent = i
tableDates.appendChild(td)
if ((i + firstDay) % 7 == 0) {
let tr = document.createElement("tr")
tableDates.appendChild(tr)
}
}
}
let currentYear = new Date().getFullYear()
let currentMonth = new Date().getMonth() + 1
createCalendar(currentYear, currentMonth)
Step 3: Styling the Calendar
Here comes the easy part, Styling. Refer the below css styles or else you can add your own styles.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 5rem 0;
background-color: #ebebeb;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
table {
margin-top: 2rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container #calendar #days * {
padding: 0.5rem;
background-color: #000;
color: #fff;
text-align: center;
font-size: 1.5rem;
}
.container #calendar #dates td {
text-align: center;
padding: 0.8rem;
font-size: 1.5rem;
}
That’s it. Congratulations on Completing this project. You can download the source code from the below button. Feel free to checkout my other articles. Thank you.
