Create a Calendar in HTML and CSS. A calendar is the most vital component for events-related websites. It supports visitors to see event schedule reports for a particular day or date. Besides this, a calendar is also used in the event scheduler, or some other-purpose calendar widget projects. If you are running on such a project in which you need to perform a calendar widget.
In this tutorial, I’ll describe how to create a calendar in HTML, CSS, and JavaScript.
You clearly want a calendar that you can create according to your needs. So, I’ll focus on the customization as well as building the calendar by adding its assets to your project. Anyhow, it uses Font Awesome CSS for the calendar left-right keys.
Create a Calendar in HTML
Before getting started with HTML, I would recommend you check out the demo page given below to see how the calendar works. You can very customize its layout, current date, disabled date, background colors, and Prev/Next buttons navigation as you want.
The HTML Structure
In HTML, load the Reset CSS in order to clear the default browser’s formatting of HTML elements. Similarly, load Roboto fonts and Font Awesome CSS for icons by adding the following CDN links into the head tag of your webpage.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
You need to have a div element in which the calendar will be executed dynamically. So, write a div element with a class name "softcard", place Prev/Next keys, and a div element with another class "soft-btn" inside it.
HTML Code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="softcard">
<div class="calendar-bar">
<button class="prev soft-btn"><i class="fas fa-chevron-left"></i></button>
<div class="current-month"></div>
<button class="next soft-btn"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar">
<div class="weekdays-name">
<div class="days-name">Sa</div>
<div class="days-name">Su</div>
<div class="days-name">Mo</div>
<div class="days-name">Tu</div>
<div class="days-name">We</div>
<div class="days-name">Th</div>
<div class="days-name">Fr</div>
</div>
<div class="calendar-days"></div>
</div>
<div class="goto-buttons">
<button type="button" class="btn prev-year">Prev Year</button>
<button type="button" class="btn today">Today</button>
<button type="button" class="btn next-year">Next Year</button>
</div>
</div>Create CSS Styles for Calendar
After performing the calendar Soft Card in HTML, now it’s time to style the calendar layout. So, select the "softcard" class and define its width, background, padding, and border style properties as follows. You can insert the custom background color according to your choice. I have added gradients colors, you can add a single color as well.
CSS Code:
<style>
* {
margin: 0; padding: 0;}
body {
height: 100vh; background: #ddd; display: flex; justify-content: center;
align-items: center; font-family: "Quicksand", sans-serif; user-select: none;
}
.softcard { width: 316px; height: fit-content;
background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 20px; box-shadow: 0px 0px 10px #000;
}
.calendar-bar { display: flex; justify-content: space-between;
align-items: center; padding: 20px; padding-bottom: 15px;
border-bottom: 19px;
}
.calendar-bar > .current-month {
font-size: 20px; font-weight: bold; color: #ddd;
background:#000; padding:5px; border-radius:10px;
}
.calendar-bar > [class$="soft-btn"] {
width: 40px; aspect-ratio: 1; text-align: center;
line-height: 40px; font-size: 14px; color: #000;
background: #ddd; border: none; border-radius: 50%;
}
.weekdays-name,
.calendar-days { display: flex; flex-wrap: wrap; padding-inline:18px;}
.weekdays-name { padding-top: 12px;}
.calendar-days { padding-bottom: 12px;}
.days-name,
[class$="-day"] { width: 40px; height: 40px; color: #000; text-align: center;
line-height: 40px; font-weight: 500; font-size: 1rem;
}
.days-name { color: #fff; font-weight: 700;}
.current-day {
background-color: #000; color: #fff;
border-radius: 50%; font-weight: 700; transition: 0.5s; cursor: pointer;
}
.padding-day {
color: #a5a5a5; user-select: none;
}
.calendar-bar > [class$="soft-btn"]:hover,
.month-day:hover,
.btn:hover {
border-radius:5px; background-color:#f8f7fa; color:#000; border-radius:15px;
transition: 0.1s; cursor: pointer;
}
.calendar-bar > [class$="soft-btn"]:focus,
.month-day:focus,
.btn:focus { border-radius:15px; background-color: #000; color: #ddd;
}
.goto-buttons {
border-top: solid 2px yellow; padding-block: 18px; display: flex;
justify-content: space-evenly;
}
.btn {
background: #eee border: none; border-radius: 10px;
padding: 11px 13px; color:#000; font-family: "Quicksand", sans-serif;
font-weight: 600; font-size: 0.9rem; margin-right: 1px; box-shadow: 0px 0px 0px #000;
}
</style>The calendar function creates dates organized in a table layout. So, you can simply customize the calendar layout by selecting the div class “calendar bar“.
Read Also: Create Custom Scroll Bar Using CSS
The JavaScript Function
Now everything is fine, it definitely, only requires adding the calendar JavaScript function into your project. Thus, add the following function between <script> tag before closing the body tag.
If you want to add more functionality to it you can adjust the code accordingly. The design of each variable, object, and function is mentioned, so you can quickly surmise what the calendar function does.
JavaScript Code:
<script>
var currentMonth = document.querySelector(".current-month");
var calendarDays = document.querySelector(".calendar-days");
var today = new Date();
var date = new Date();
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
today.setHours(0,0,0,0);
renderCalendar();
function renderCalendar(){
const prevLastDay = new Date(date.getFullYear(),date.getMonth(),0).getDate();
const totalMonthDay = new Date(date.getFullYear(),date.getMonth()+1,0).getDate();
const startWeekDay = new Date(date.getFullYear(),date.getMonth(),1).getDay();
calendarDays.innerHTML = "";
let totalCalendarDay = 6 * 7;
for (let i = 0; i < totalCalendarDay; i++) {
let day = i-startWeekDay;
if(i <= startWeekDay){
// adding previous month days
calendarDays.innerHTML += `<div class='padding-day'>${prevLastDay-i}</div>`;
}else if(i <= startWeekDay+totalMonthDay){
// adding this month days
date.setDate(day);
date.setHours(0,0,0,0);
let dayClass = date.getTime()===today.getTime() ? 'current-day' : 'month-day';
calendarDays.innerHTML += `<div class='${dayClass}'>${day}</div>`;
}else{
// adding next month days
calendarDays.innerHTML += `<div class='padding-day'>${day-totalMonthDay}</div>`;
} }}
document.querySelectorAll(".soft-btn").forEach(function (element) {
element.addEventListener("click", function () {
date = new Date(currentMonth.textContent);
date.setMonth(date.getMonth() + (element.classList.contains("prev") ? -1 : 1));
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
renderCalendar();
});});
document.querySelectorAll(".btn").forEach(function (element) {
element.addEventListener("click", function () {
let btnClass = element.classList;
date = new Date(currentMonth.textContent);
if(btnClass.contains("today"))
date = new Date();
else if(btnClass.contains("prev-year"))
date = new Date(date.getFullYear()-1, 0, 1);
else
date = new Date(date.getFullYear()+1, 0, 1);
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
renderCalendar();
});
});
</script>That’s all! I hope you have strongly discovered how to create an HTML, CSS, and JS calendar widget for a website.