Behzad Ahmad
Overview
We’ll create our animated calendar in four steps:
- Add HTML
- Add CSS
- Add JavaScript
- Combine HTML, CSS, and JavaScript
Add HTML
First, we have to write the HTML to create the calendar.
Code explanation
Line 5: We create a
div
for the calendar so that the calendar can be inside thatdiv
.Lines 6 and 7: We create a
div
in which the month and the year of the calendar can be shown.Line 18: We create a
div
in which we can see the dates.Lines 19 and 27: We create a
div
and write the names of the days in it.Line 28: We create a
div
so that it can display the complete number of days.Line 31: We show the list of the months.
Line 33: We call the JavaScript.
Add CSS
Code explanation
Lines 1 to 24: We set the colors and the font size for the calendar.
Lines 26 and 39: We set the properties for the
div
of the calendar.Lines 40 to 173: We set the properties of the calendar. For example, the format of the dates and also the styling and animation of the dates.
Lines 175 to 183: We set the styling for the months.
Lines 185 to 202: We set the properties to display years in the calendar.
Lines 204 to 218: We set the footer properties and the scroll bar properties.
Lines 220 to 259: We set the properties for the format of the list of the months.
Add JavaScript
Code explanation
Line 3: We write the names of the months.
Lines 5 to 11: We check for the leap year and set the days of February accordingly.
Line 13: We generate the calendar.
Lines 15 to 20: We set the days of the months.
Lines 22 to 49: We get the first day of the month to set the calendar.
Lines 51 to 68: We get the months list and select the month from it.
Lines 70 to 85: We set the date and the month.
Combine HTML, CSS, and JavaScript
CONTRIBUTOR
Learn how to create a Calendar with CSS.
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
...etc
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 »