How do you make a working calendar in html?

Question

Learn how to create a Calendar with CSS.

Nội dung chính Show

How To Create a Calendar Layout
How do I make a calendar in HTML?
How do I create a dynamic calendar in HTML?
How do I add a calendar widget to HTML?
How do you insert date and time in HTML?

How To Create a Calendar Layout

❮
❯
August
2021

Mo
Tu
We
Th
Fr
Sa
Su

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Try it Yourself »

Step 1) Add HTML:

Example

❮

❯

August
2021

Mo

Tu

We

Th

Fr

Sa

Su

1

2

3

4

5

6

7

8

9

10

11

Step 2) Add CSS:

Example

ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

/* Month header */
.month {
  padding: 70px 25px;
  width: 100%;
  background: #1abc9c;
  text-align: center;
}

/* Month list */
.month ul {
margin: 0;
padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
text-transform: uppercase;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}

/* Next button */
.month .next {
float: right;
padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
}

.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}

/* Days (1-31) */
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}

.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}

/* Highlight the "current" day */
.days li .active {
padding: 5px;
background: #1abc9c;
color: white!important
}

Try it Yourself »

View Discussion

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

In this article, we will create a calendar using HTML, and CSS. First, we have to know a little about HTML. If someone does not know HTML and CSS, they will not be able to make the calendar better. The main focus of this article is on HTML tags and the way we are going to use CSS.

Approach: First we will be using the table tag, which will be used to create the structure of the calendar. This will give us an idea of how the calendar is created using HTML. Later we will apply some CSS property to make the design of the calendar better.

Creating Structure: In this section, we will create first the structure of the calendar by using the

tag. So this will help us to get the structure of the calendar.

HTML

<html>

<body>

<h2 align="center" style="color: orange;">

January 2021

h2>

<br />

<table bgcolor="lightgrey" align="center"

cellspacing="21" cellpadding="21">

<caption align="top">

caption>

<thead>

<tr>

<th>Sunth>

<th>Month>

<th>Tueth>

<th>Wedth>

<th>Thuth>

<th>Frith>

<th>satth>

tr>

thead>

<tbody>

<tr>

<td>td>

<td>1td>

<td>2td>

tr>

<tr>tr>

<tr>

<td>3td>

<td>4td>

<td>5td>

<td>6td>

<td>7td>

<td>8td>

<td>9td>

tr>

<tr>

<td>10td>

<td>11td>

<td>12td>

<td>13td>

<td>14td>

<td>15td>

<td>16td>

tr>

<tr>

<td>17td>

<td>18td>

<td>19td>

<td>20td>

<td>21td>

<td>22td>

<td>23td>

tr>

<tr>

<td>24td>

<td>25td>

<td>26td>

<td>27td>

<td>28td>

<td>29td>

<td>30td>

tr>

<tr>

<td>31td>

<td>1td>

<td>2td>

<td>3td>

<td>4td>

<td>5td>

<td>6td>

tr>

tbody>

table>

body>

html>

Output:

CSS Design and its attributes: We will use some CSS properties and attributes of the table tag to design the calendar. The attributes that we are going to use is the border and cellspacing and cellpadding. Here we have used an interesting property of CSS that is border-collapse. The purpose of the border-collapse is to make all the border to be collapsed into a single border. Here we have also used the inline style attribute to make the dates of February be little visible.

CSS code:

table {
    border-collapse: collapse;
    background: white;
    color: black;
}
th, td { 
    font-weight: bold;
}

Attributes that we will use in the table tag:

Final code: This is the combination of all the above codes

`HTML`

<html>

<head>

<style>

table {

border-collapse: collapse;

background: white;

color: black;

}

th,

td {

font-weight: bold;

}

style>

head>

<body>

<h2 align="center" style="color: orange;">

January 2021

h2>

<br />

<table bgcolor="lightgrey" align="center"

cellspacing="21" cellpadding="21">

<caption align="top">

caption>

<thead>

<tr>