Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Design a calendar using HTML and CSS
To design a calendar using HTML and CSS, we will be using HTML tables. We use calendar in our daily life to check the dates, schedule any event and many more.
In this article, we will understand how we can design a calendar using HTML and CSS only. We will be using HTML table to create the structure and use CSS properties to design the UI of calendar.
Steps to Design a Calendar Using HTML and CSS
We will be following below mentioned steps to design a calendar using HTML and CSS
Structuring the Calendar using HTML
We have used table tag and its elements to create structure of calendar where thead defines the header section containing name of days and tbody defines table body containing all the dates.
Each row is defined using tr, th is used to specify days and td for displaying the dates. The current month is displayed at the center using h2 tag, previous and next button is created using HTML character entities in span tag ?
<div class="container">
<div class="calendar">
<h2>
<span>❮</span>
OCTOBER , 2024
<span>❯</span>
</h2>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td class="current">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Designing the Calendar using CSS
We have used h2 as element selector to design current month, previous and next button. We have centered the heading using CSS text-align property and used justify-content property to add even space between heading and both buttons.
We have centered the calendar using container class with CSS flexbox properties. CSS display property is used to make a flex container and used justify-content and align-items to center the calendar both horizontally and vertically.
The calendar class is used to set the background-color and text color of entire table and set the div width using max-width property. We have used current class to display the current date where we have changed its background and text color and used border-radius property for a circular border ?
h2 {
text-align: center;
color: white;
display: flex;
justify-content: space-around;
}
span {
cursor: pointer;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
color: white;
background-color: #031928;
max-width: fit-content;
padding: 20px;
border-radius: 10px;
}
table {
text-align: center;
border-collapse: collapse;
}
th, td {
width: 40px;
height: 40px;
cursor: pointer;
font-size: 16px;
}
.current {
background-color: beige;
color: #031928;
border-radius: 50%;
}
Complete Example
Here is the complete example code implementing above mentioned steps to design a calendar using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
color: white;
display: flex;
justify-content: space-around;
margin: 0 0 20px 0;
}
span {
cursor: pointer;
padding: 5px;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.calendar {
color: white;
background-color: #031928;
max-width: fit-content;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
table {
text-align: center;
border-collapse: collapse;
}
th, td {
width: 40px;
height: 40px;
cursor: pointer;
font-size: 16px;
}
th {
font-weight: bold;
padding-bottom: 10px;
}
.current {
background-color: beige;
color: #031928;
border-radius: 50%;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="calendar">
<h2>
<span>❮</span>
OCTOBER 2024
<span>❯</span>
</h2>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td class="current">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
A dark themed calendar for October 2024 appears centered on the page with navigation arrows on either side of the month header. The current date (23) is highlighted with a beige circular background. Days are arranged in a 7-column grid with proper weekday labels.
Conclusion
In this article, we learnt how to design a calendar using HTML and CSS. We used HTML tables to create the structure and CSS flexbox to center and style the calendar with proper visual formatting.
4K+ Views
