Calendar Code in HTML using JavaScript

This code snippet allows you to create a simple calendar display in HTML using JavaScript. It uses JavaScript date object to determine the current date and dynamically generates the calendar days based on the number of days in the current month. The calendar includes the month and year displayed at the top, followed by the day names (S, M, T, W, T, F, S) and the numbers representing the dates of the month below.

The current date is highlighted with a distinct style. This code is helpful for developers who want to integrate a basic, customizable calendar into their web applications without relying on external libraries or plugins. It provides a clean and straightforward way to showcase and navigate dates efficiently.

How to Create Calendar Widget in HTML CSS & JavaScript

1. Create the HTML structure for the calendar as follows:

<div class="calendar">
	<header class="calendar__header">
		<div class="calendar__month"></div>
		<div class="calendar__year"></div>
	</header>
	<div class="calendar__grid">
		<div class="calendar__day-names">
			<span class="calendar__day-name">S</span>
			<span class="calendar__day-name">M</span>
			<span class="calendar__day-name">T</span>
			<span class="calendar__day-name">W</span>
			<span class="calendar__day-name">T</span>
			<span class="calendar__day-name">F</span>
			<span class="calendar__day-name">S</span>
		</div>
		<div class="calendar__day-numbers"></div>
	</div>
</div>

2. Style the calendar widget using the following CSS styles:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-size: 62.5%;
}
html * {
  box-sizing: inherit;
}

body {
  background-color: #A9DDEB;
  display: grid;
  font-family: Helvetica, sans-serif;
  font-size: 1.6rem;
  min-height: 100vh;
  place-content: center;
}

.calendar {
  background-color: #FFF;
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 1.6rem rgba(35, 131, 157, 0.2);
  padding: 3.2rem;
}
.calendar__header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.2rem;
  padding: 0 0.4rem 1.2rem;
  text-transform: uppercase;
}
.calendar__day-names {
  border-bottom: 0.1rem solid #828889;
  display: flex;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
  padding: 0.8rem 0;
}
.calendar__day-name {
  aspect-ratio: 1;
  color: #828889;
  font-weight: normal;
  text-align: center;
  width: 2.4rem;
}
.calendar__day_numbers {
  display: flex;
  flex-direction: column;
}
.calendar__day-numbers-row {
  display: flex;
  gap: 1.2rem;
  padding: 0.6rem 0;
}
.calendar__day-numbers-row:first-child {
  justify-content: flex-end;
}
.calendar__day-number {
  align-content: center;
  justify-content: center;
  aspect-ratio: 1;
  color: #000;
  display: flex;
  line-height: 1.4;
  text-align: center;
  width: 2.4rem;
}
.calendar__day-number--current {
  background-color: #23839D;
  border-radius: 50%;
  box-shadow: 0 0 0 0.4rem #23839D;
  color: #FFF;
}

3. Finally, add the following JavaScript code just before closing the body tag to generate calendar dates dynamically.

// month abbreviations
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// get current date values
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();

// set month and year
document.querySelector('.calendar__month').innerText = months[currentDate.getMonth()];
document.querySelector('.calendar__year').innerText = currentYear;

// create grid of days
let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
let week = document.createElement('div');
week.classList.add('calendar__day-numbers-row');

for (i = 1; i <= daysInMonth; i++) {
	let day = document.createElement('span');
	day.classList.add('calendar__day-number');
	day.innerText = i;
	(i == currentDay) && day.classList.add('calendar__day-number--current');
	week.append(day);
	
	if (new Date(currentYear, currentMonth, i).getDay() == 6 || i == daysInMonth) {
		document.querySelector('.calendar__day-numbers').append(week);
		
		if (i != daysInMonth) {
			week = document.createElement('div');
			week.classList.add('calendar__day-numbers-row');
		}
	}
}

That’s all! hopefully, you have successfully created a calendar widget using this HTML, CSS, and JavaScript Code. If you have any questions or suggestions, feel free to comment below.