Skip to content

Commit 2c5a996

Browse files
captainbrossetcaptainbrosset
committed
Calendar demo
1 parent dfa1dd8 commit 2c5a996

File tree

2 files changed

+192
-0
lines changed

2 files changed

+192
-0
lines changed

‎css-gap-decorations/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ This directory contains demos that showcase the use of [CSS Gap Decorations](htt
88
* [Daily CSS News](https://microsoftedge.github.io/Demos/css-gap-decorations/daily-css-news.html)
99
* [Guitar Fret Board](https://microsoftedge.github.io/Demos/css-gap-decorations/guitar-fret-board.html)
1010
* [Notebook](https://microsoftedge.github.io/Demos/css-gap-decorations/notebook.html)
11+
* [Calendar](https://microsoftedge.github.io/Demos/css-gap-decorations/calendar.html)
1112
<!-- * [The Daily Oddity](https://microsoftedge.github.io/Demos/css-gap-decorations/the-daily-oddity.html) -->
1213

1314
## Developer playground

‎css-gap-decorations/calendar.html

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Calendar</title>
7+
<style>
8+
html,
9+
body {
10+
height: 100%;
11+
margin: 0;
12+
overflow: hidden;
13+
}
14+
15+
body {
16+
font-family: system-ui;
17+
18+
display: grid;
19+
grid-template-rows: 4rem 2rem auto;
20+
gap: 2px;
21+
row-rule: 2px solid #666, 1px dashed #999;
22+
}
23+
24+
h1 {
25+
margin: 0;
26+
font-size: 2rem;
27+
padding: 1rem;
28+
display: flex;
29+
gap: .5rem;
30+
align-items: center;
31+
}
32+
33+
h1 .current-month-year {
34+
margin-inline-end: auto;
35+
}
36+
37+
.header {
38+
display: grid;
39+
grid-template-columns: repeat(7, 1fr);
40+
gap: 2px;
41+
column-rule: 1px dashed #999;
42+
}
43+
44+
.header .day-name {
45+
display: grid;
46+
place-content: center;
47+
overflow: hidden;
48+
}
49+
50+
.calendar {
51+
display: grid;
52+
grid-template-columns: repeat(7, 1fr);
53+
grid-template-rows: repeat(6, 1fr);
54+
gap: 2px;
55+
row-rule: 1px dashed #999;
56+
column-rule: 1px dashed #999;
57+
}
58+
59+
.calendar .day {
60+
counter-increment: day;
61+
padding: 2vmin;
62+
}
63+
64+
.calendar .day:hover {
65+
background: #eee;
66+
}
67+
68+
.calendar .day::before {
69+
content: counter(day);
70+
}
71+
</style>
72+
</head>
73+
74+
<body>
75+
<h1>
76+
<span class="current-month-year">Month Year</span>
77+
<button class="prev">Previous</button>
78+
<button class="today">Today</button>
79+
<button class="next">Next</button>
80+
</h1>
81+
<div class="header">
82+
<div class="day-name"></div>
83+
<div class="day-name"></div>
84+
<div class="day-name"></div>
85+
<div class="day-name"></div>
86+
<div class="day-name"></div>
87+
<div class="day-name"></div>
88+
<div class="day-name"></div>
89+
</div>
90+
<div class="calendar">
91+
<div class="day"></div>
92+
<div class="day"></div>
93+
<div class="day"></div>
94+
<div class="day"></div>
95+
<div class="day"></div>
96+
<div class="day"></div>
97+
<div class="day"></div>
98+
<div class="day"></div>
99+
<div class="day"></div>
100+
<div class="day"></div>
101+
<div class="day"></div>
102+
<div class="day"></div>
103+
<div class="day"></div>
104+
<div class="day"></div>
105+
<div class="day"></div>
106+
<div class="day"></div>
107+
<div class="day"></div>
108+
<div class="day"></div>
109+
<div class="day"></div>
110+
<div class="day"></div>
111+
<div class="day"></div>
112+
<div class="day"></div>
113+
<div class="day"></div>
114+
<div class="day"></div>
115+
<div class="day"></div>
116+
<div class="day"></div>
117+
<div class="day"></div>
118+
<div class="day"></div>
119+
<div class="day"></div>
120+
<div class="day"></div>
121+
<div class="day"></div>
122+
</div>
123+
124+
<script>
125+
// The index of the day which the user wants to start the calendar from.
126+
// 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
127+
const FIRST_DAY_SETTING = 1;
128+
129+
// Names of the days of the week.
130+
const DAYS_OF_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
131+
132+
let currentDate = new Date();
133+
134+
const prevButton = document.querySelector('.prev');
135+
const nextButton = document.querySelector('.next');
136+
const todayButton = document.querySelector('.today');
137+
138+
document.querySelectorAll(".header .day-name").forEach((dayName, index) => {
139+
// Set the text content of each day name based on the current first day setting.
140+
dayName.textContent = DAYS_OF_WEEK[(index + FIRST_DAY_SETTING) % 7];
141+
});
142+
143+
function initCalendar() {
144+
console.log(currentDate);
145+
146+
// Display the current month and year in the header.
147+
const currentMonthYearLabel = document.querySelector('h1 .current-month-year');
148+
currentMonthYearLabel.textContent = `${currentDate.toLocaleString('default', { month: 'long' })} ${currentDate.getFullYear()}`;
149+
150+
// Position the first day of the current month correctly.
151+
const firstDayOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
152+
let firstDayOfCurrentMonthOffset = firstDayOfCurrentMonth.getDay() + FIRST_DAY_SETTING - 1;
153+
// The offset must be between 1 and 7. If not, adjust it.
154+
if (firstDayOfCurrentMonthOffset < 1) {
155+
firstDayOfCurrentMonthOffset += 7;
156+
} else if (firstDayOfCurrentMonthOffset > 7) {
157+
firstDayOfCurrentMonthOffset -= 7;
158+
}
159+
document.querySelector('.calendar .day').style.gridColumnStart = firstDayOfCurrentMonthOffset;
160+
161+
// Hide the unneeded extra days for this month.
162+
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
163+
const days = document.querySelectorAll('.calendar .day').forEach((day, index) => {
164+
if (index < daysInMonth) {
165+
day.style.display = 'block';
166+
} else {
167+
day.style.display = 'none';
168+
}
169+
});
170+
}
171+
172+
initCalendar();
173+
174+
prevButton.addEventListener('click', () => {
175+
currentDate.setMonth(currentDate.getMonth() - 1);
176+
initCalendar();
177+
});
178+
179+
nextButton.addEventListener('click', () => {
180+
currentDate.setMonth(currentDate.getMonth() + 1);
181+
initCalendar();
182+
});
183+
184+
todayButton.addEventListener('click', () => {
185+
currentDate = new Date();
186+
initCalendar();
187+
});
188+
</script>
189+
</body>
190+
191+
</html>

0 commit comments

Comments
 (0)