Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 cellpadding="20">
<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></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 HTML
- 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 table as element selector to center the days and dates of calendar, td as element selector to increase the font-size of dates and used cursor property to change cursor to pointer.
- 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;
}
table {
text-align: center;
}
td {
cursor: pointer;
font-size: large;
}
.current {
background-color: beige;
color: #031928;
border-radius: 60%;
}
Complete Example Code
Here is the complete example code implementing above mentioned steps to design a calendar using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
table {
text-align: center;
}
td {
cursor: pointer;
font-size: large;
}
.current {
background-color: beige;
color: #031928;
border-radius: 60%;
}
</style>
</head>
<body>
<div class="container">
<div class="calendar">
<h2>
<span>❮</span>
OCTOBER , 2024
<span>❯</span>
</h2>
<table cellpadding="20">
<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></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>
Conclusion
In this article, we learnt and understood to design a calendar using HTML and CSS. We have used HTML tables and its elements to create the structure of the calendar and then applied CSS to design the calendar.
Updated on: 2024-10-23T15:07:27+05:30
4K+ Views
Advertisements