Learn how to create a customizable calendar widget using HTML, CSS, and JavaScript. Step-by-step guide with code examples.
Table of Contents
A calendar widget is a versatile and practical tool that allows users to view dates. By incorporating a calendar widget into your website, you can provide visitors with an intuitive and efficient way to interact with date-related information.
In this comprehensive guide, we will explore the process of creating a calendar widget using HTML, CSS, and JavaScript. Whether you're a beginner or an experienced web developer, this tutorial will walk you through the steps required to build a functional and customizable calendar widget that seamlessly integrates with your website.
Creating a calendar widget from scratch offers numerous advantages. Not only will you have complete control over the design and functionality, but you can also customize it to match your website's overall style and branding. Furthermore, by incorporating HTML, CSS, and JavaScript, you'll have the flexibility to implement additional features and fine-tune the widget's behavior according to your requirements.
Throughout this tutorial, we'll provide you with clear instructions, code snippets, and explanations to ensure you have a solid understanding of each step. Whether you're interested in building a calendar widget for a personal blog, an e-commerce site, or a scheduling application, this guide will equip you with the necessary skills to accomplish your goals.
Let's dive into the process of creating a calendar widget using HTML, CSS, and JavaScript and unlock the potential for improved user experience and efficient date management on your website.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our calendar widget.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here is an explanation of each part:
1. <!DOCTYPE html>: This is the document type declaration and indicates that the document is an HTML5 document.
2. <html lang="en">: This opening tag represents the root element of the HTML document. The lang attribute specifies the language of the document, which is set to English ("en" represents English).
3. <head>: This section contains meta-information about the web page, such as the title, character encoding, and viewport settings.
4. <title>Calendar Widget</title>: This tag specifies the title of the web page, which will be displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag defines the character encoding for the web page, ensuring proper interpretation of special characters and symbols.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport width to the device width, ensuring proper rendering and responsiveness on different devices.
7. <link rel="stylesheet" href="styles.css" />: This tag is used to link an external CSS file named "styles.css" to the HTML document. It defines the styles that will be applied to the elements on the page.
8. <body>: This section represents the body of the HTML document, which contains the visible content of the web page.
9. <div class="calendar">: This <div> element serves as the container for the calendar widget.
10. <header class="calendar__header">: This <header> element represents the header section of the calendar widget.
11. <div class="calendar__month"></div> and <div class="calendar__year"></div>: These two <div> elements represent the placeholders for displaying the month and year in the calendar header.
12. <div class="calendar__grid">: This <div> element represents the main grid area of the calendar, where the days will be displayed.
13. <div class="calendar__day-names">: This <div> element represents the row that contains the names of the days of the week.
14. <span class="calendar__day-name">S</span>, <span class="calendar__day-name">M</span>, etc.: These <span> elements represent individual day name labels (abbreviations) for each day of the week (Sunday, Monday, etc.).
15. <div class="calendar__day-numbers"></div>: This <div> element serves as a placeholder for displaying the numerical dates of the calendar.
16. <script src="script.js"></script>: This <script> tag is used to link an external JavaScript file named "script.js" to the HTML document. It allows adding interactive functionality to the web page.
This is the basic structure of our calendar widget using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the calendar widget is in place, the next step is to add styling to the calendar widget using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our calendar widget.
Let's go through each section and explain what each part does:
1. The first block of code sets some default styles for the HTML element. It includes:
- -moz-osx-font-smoothing: grayscale;: This property smooths the fonts on macOS browsers like Firefox by applying grayscale anti-aliasing.
- -webkit-font-smoothing: antialiased;: This property smooths the fonts on webkit-based browsers (such as Safari and Chrome) by applying anti-aliasing.
- box-sizing: border-box;: This property includes padding and border in the element's total width and height.
- font-size: 62.5%;: This sets the base font size for the document to 62.5% of the default font size, which means it sets 1rem (root em) to be equal to 10 pixels. This makes it easier to use rem units throughout the styles.
2. The html * selector applies styles to all elements inside the HTML document and sets box-sizing to inherit, which means the elements inherit the box-sizing value from their parent element. This ensures consistent box-sizing behavior throughout the document.
The styles for the body element include:
- background-color: #A9DDEB;: This sets the background color of the body to a light blue shade.
- display: grid;: This sets the display property of the body to grid layout.
- font-family: Helvetica, sans-serif;: This sets the font family for the body text to Helvetica or any sans-serif font.
- font-size: 1.6rem;: This sets the font size for the body text to 1.6rem (16 pixels).
- min-height: 100vh;: This sets the minimum height of the body to 100% of the viewport height, ensuring it covers the entire screen.
- place-content: center;: This centers the grid items both horizontally and vertically within the body.
3. The .calendar class defines styles for a calendar container. It includes:
- background-color: #FFF;: This sets the background color of the calendar to white.
- border-radius: 0.8rem;: This adds a border radius of 0.8rem (8 pixels) to give the calendar container rounded corners.
- box-shadow: 0 0.8rem 1.6rem rgba(35, 131, 157, 0.2);: This adds a box shadow effect to the calendar container, creating a soft shadow around it.
- padding: 3.2rem;: This adds 3.2rem (32 pixels) of padding inside the calendar container.
4. The .calendar__header class styles the header section of the calendar. It includes:
- font-weight: bold;: This sets the font weight of the header text to bold.
- display: flex;: This displays the header content as a flex container.
- justify-content: space-between;: This aligns the header content with equal space between the elements.
- letter-spacing: 0.2rem;: This adds a letter-spacing of 0.2rem (2 pixels) to the header text.
- padding: 0 0.4rem 1.2rem;: This adds padding to the header, with 0 at the top, 0.4rem (4 pixels) at the sides, and 1.2rem (12 pixels) at the bottom.
- text-transform: uppercase;: This transforms the header text to uppercase.
5. The .calendar__day-names class styles the row containing the names of the days in the calendar. It includes:
- border-bottom: 0.1rem solid #828889;: This adds a bottom border of 0.1rem (1 pixel) with the color #828889 to separate the day names from the calendar dates.
- display: flex;: This displays the day names as a flex container.
- gap: 1.2rem;: This sets the gap (spacing) between the day names to 1.2rem (12 pixels).
- margin-bottom: 0.8rem;: This adds a margin of 0.8rem (8 pixels) at the bottom of the day names row.
- padding: 0.8rem 0;: This adds padding of 0.8rem (8 pixels) at the top and bottom of the day names row.
6. The .calendar__day-name class styles each individual day name element. It includes:
- aspect-ratio: 1;: This sets the aspect ratio of the day name element to 1:1, making it a square shape.
- color: #828889;: This sets the color of the day name text to #828889 (a shade of gray).
- font-weight: normal;: This sets the font weight of the day name text to normal.
- text-align: center;: This centers the day name text horizontally.
- width: 2.4rem;: This sets the width of the day name element to 2.4rem (24 pixels).
7. The .calendar__day-numbers class styles the container for the calendar dates. It includes:
- display: flex;: This displays the calendar dates as a flex container.
- flex-direction: column;: This sets the direction of the flex container to column, arranging the dates vertically.
8. The .calendar__day-numbers-row class styles each row of calendar dates. It includes:
- display: flex;: This displays the row of dates as a flex container.
- gap: 1.2rem;: This sets the gap (spacing) between the calendar dates within the row to 1.2rem (12 pixels).
- padding: 0.6rem 0;: This adds padding of 0.6rem (6 pixels) at the top and bottom of each date row.
9. The .calendar__day-number class styles each individual calendar date element. It includes:
- align-content: center;: This centers the content of the date element vertically within the available space.
- justify-content: center;: This centers the content of the date element horizontally within the available space.
- aspect-ratio: 1;: This sets the aspect ratio of the date element to 1:1, making it a square shape.
- color: #000;: This sets the color of the date text to black.
- display: flex;: This displays the date element as a flex container.
- line-height: 1.4;: This sets the line height of the date text to 1.4, providing some vertical spacing.
- text-align: center;: This centers the date text horizontally.
- width: 2.4rem;: This sets the width of the date element to 2.4rem (24 pixels).
10. The .calendar__day-number--current class styles the current date element in the calendar. It includes:
- background-color: #23839D;: This sets the background color of the current date element to a shade of blue.
- border-radius: 50%;: This gives the current date element a circular shape by setting the border radius to 50%.
- box-shadow: 0 0 0 0.4rem #23839D;: This adds a box shadow to the current date element, creating a glowing effect around it.
- color: #FFF;: This sets the text color of the current date element to white.
This will give our calendar widget an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
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;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Here's a breakdown of what each section of the code does:
The months array stores the abbreviations of the twelve months.
The code retrieves the current date using the Date object. It gets the current year, month (0-11, where January is 0), and day.
It updates the HTML elements with class names calendar__month and calendar__year to display the current month and year, respectively.
The code calculates the number of days in the current month using the getDate() method of the Date object. It creates a new div element with the class name calendar__day-numbers-row to represent a row of day numbers.
A loop runs from 1 to the number of days in the month. For each day, it creates a new span element with the class name calendar__day-number and sets its inner text to the day number.
If the current iteration corresponds to the current day, it adds the class name calendar__day-number--current to highlight it.
The span element representing each day is appended to the week container.
The code checks if the current day is a Saturday (6) or if it is the last day of the month. If either condition is true, the week container is appended to the main div element with the class name calendar__day-numbers.
If the current day is not the last day of the month, a new week container is created to start a new row of day numbers.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
// 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');
}
}
}Final Output:
Conclusion:
In this tutorial, you learned how to create a calendar widget using HTML, CSS, and JavaScript. By following the step-by-step guide, you built a basic calendar and gained insights into customizing and adding interactivity to it. With this knowledge, you can now enhance your website with a personalized and functional calendar widget.
Remember to practice and explore further to expand the functionality and design possibilities of your calendar widget.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
