Skip to content

Commit 32dfbcf

Browse files
shreyamalogishreyamalogi
authored
Merge pull request #193 from VipulNerd/add-calendar
Calendar using HTML and CSS
2 parents 6df744e + 605d820 commit 32dfbcf

File tree

6 files changed

+220
-0
lines changed

6 files changed

+220
-0
lines changed

‎web/Images/calendar.png

527 KB
Loading

‎web/Images/calendar2.png

540 KB
Loading

‎web/Images/calendar3.png

525 KB
Loading

‎web/Images/calendar4.png

536 KB
Loading

‎web/pages/calendar.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Dynamic Calendar JavaScript | CodingNepal</title>
7+
<link rel="stylesheet" href="../stylesheet/calendar.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<!-- Google Font Link for Icons -->
10+
<link rel="stylesheet"
11+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
12+
</head>
13+
14+
<body>
15+
<div class="wrapper">
16+
<header>
17+
<p class="current-date"></p>
18+
<div class="icons">
19+
<span id="prev" class="material-symbols-rounded">chevron_left</span>
20+
<span id="next" class="material-symbols-rounded">chevron_right</span>
21+
</div>
22+
</header>
23+
<div class="calendar">
24+
<ul class="weeks">
25+
<li>Sun</li>
26+
<li>Mon</li>
27+
<li>Tue</li>
28+
<li>Wed</li>
29+
<li>Thu</li>
30+
<li>Fri</li>
31+
<li>Sat</li>
32+
</ul>
33+
<ul class="days"></ul>
34+
</div>
35+
</div>
36+
<script>
37+
const daysTag = document.querySelector(".days"),
38+
currentDate = document.querySelector(".current-date"),
39+
prevNextIcon = document.querySelectorAll(".icons span");
40+
41+
// getting new date, current year and month
42+
let date = new Date(),
43+
currYear = date.getFullYear(),
44+
currMonth = date.getMonth();
45+
46+
// storing full name of all months in array
47+
const months = ["January", "February", "March", "April", "May", "June", "July",
48+
"August", "September", "October", "November", "December"];
49+
50+
const renderCalendar = () => {
51+
let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(), // getting first day of month
52+
lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // getting last date of month
53+
lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // getting last day of month
54+
lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // getting last date of previous month
55+
let liTag = "";
56+
57+
for (let i = firstDayofMonth; i > 0; i--) { // creating li of previous month last days
58+
liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
59+
}
60+
61+
for (let i = 1; i <= lastDateofMonth; i++) { // creating li of all days of current month
62+
// adding active class to li if the current day, month, and year matched
63+
let isToday = i === date.getDate() && currMonth === new Date().getMonth()
64+
&& currYear === new Date().getFullYear() ? "active" : "";
65+
liTag += `<li class="${isToday}">${i}</li>`;
66+
}
67+
68+
for (let i = lastDayofMonth; i < 6; i++) { // creating li of next month first days
69+
liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`
70+
}
71+
currentDate.innerText = `${months[currMonth]} ${currYear}`; // passing current mon and yr as currentDate text
72+
daysTag.innerHTML = liTag;
73+
}
74+
renderCalendar();
75+
76+
prevNextIcon.forEach(icon => { // getting prev and next icons
77+
icon.addEventListener("click", () => { // adding click event on both icons
78+
// if clicked icon is previous icon then decrement current month by 1 else increment it by 1
79+
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
80+
81+
if (currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11
82+
// creating a new date of current year & month and pass it as date value
83+
date = new Date(currYear, currMonth, new Date().getDate());
84+
currYear = date.getFullYear(); // updating current year with new date year
85+
currMonth = date.getMonth(); // updating current month with new date month
86+
} else {
87+
date = new Date(); // pass the current date as date value
88+
}
89+
renderCalendar(); // calling renderCalendar function
90+
});
91+
});
92+
</script>
93+
94+
</body>
95+
96+
</html>

‎web/stylesheet/calendar.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Poppins', sans-serif;
9+
}
10+
11+
body {
12+
display: flex;
13+
align-items: center;
14+
padding: 0 10px;
15+
justify-content: center;
16+
min-height: 100vh;
17+
background: white;
18+
}
19+
20+
.wrapper {
21+
width: 450px;
22+
background: #6175f7;
23+
;
24+
border-radius: 10px;
25+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
26+
}
27+
28+
.wrapper header {
29+
display: flex;
30+
align-items: center;
31+
padding: 25px 30px 10px;
32+
justify-content: space-between;
33+
}
34+
35+
header .icons {
36+
display: flex;
37+
}
38+
39+
header .icons span {
40+
height: 38px;
41+
width: 38px;
42+
margin: 0 1px;
43+
cursor: pointer;
44+
color: orange;
45+
text-align: center;
46+
line-height: 38px;
47+
font-size: 1.9rem;
48+
user-select: none;
49+
border-radius: 50%;
50+
}
51+
52+
.icons span:last-child {
53+
margin-right: -10px;
54+
}
55+
56+
header .icons span:hover {
57+
background: #f2f2f2;
58+
}
59+
60+
header .current-date {
61+
font-size: 1.45rem;
62+
font-weight: 500;
63+
}
64+
65+
.calendar {
66+
padding: 20px;
67+
}
68+
69+
.calendar ul {
70+
display: flex;
71+
flex-wrap: wrap;
72+
list-style: none;
73+
text-align: center;
74+
}
75+
76+
.calendar .days {
77+
margin-bottom: 20px;
78+
}
79+
80+
.calendar li {
81+
color: #333;
82+
width: calc(100% / 7);
83+
font-size: 1.07rem;
84+
}
85+
86+
.calendar .weeks li {
87+
font-weight: 500;
88+
cursor: default;
89+
}
90+
91+
.calendar .days li {
92+
z-index: 1;
93+
cursor: pointer;
94+
position: relative;
95+
margin-top: 30px;
96+
}
97+
98+
.days li.inactive {
99+
color: orange;
100+
}
101+
102+
.days li.active {
103+
color: #fff;
104+
}
105+
106+
.days li::before {
107+
position: absolute;
108+
content: "";
109+
left: 50%;
110+
top: 50%;
111+
height: 40px;
112+
width: 40px;
113+
z-index: -1;
114+
border-radius: 50%;
115+
transform: translate(-50%, -50%);
116+
}
117+
118+
.days li.active::before {
119+
background: palegoldenrod;
120+
}
121+
122+
.days li:not(.active):hover::before {
123+
background: #f2f2f2;
124+
}

0 commit comments

Comments
 (0)