Skip to content

Commit fd88fa3

Browse files
mregomrego
committed
Add calendar demo
1 parent 4d0f675 commit fd88fa3

File tree

3 files changed

+249
-0
lines changed

3 files changed

+249
-0
lines changed

‎calendar.html

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Grid Layout Calendar</title>
5+
6+
<link href='https://fonts.googleapis.com/css?family=Candal|Bree+Serif' rel='stylesheet' type='text/css'>
7+
8+
<style>
9+
html, body, h1, h2 {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
body {
15+
display: grid;
16+
grid-template-columns: 1fr;
17+
grid-template-rows: auto auto 1fr;
18+
grid-gap: 20px;
19+
20+
height: 100vh;
21+
border: 25px solid white;
22+
box-sizing: border-box;
23+
24+
font-family: 'Bree Serif', serif;
25+
font-size: 1.8em;
26+
}
27+
28+
header {
29+
display: grid;
30+
grid-template-columns: auto 1fr auto;
31+
grid-template-rows: auto auto;
32+
}
33+
34+
#year {
35+
grid-row: 1;
36+
grid-column: 2;
37+
justify-self: center;
38+
39+
font-family: 'Candal', sans-serif;
40+
font-size: 2.5em;
41+
}
42+
43+
#month {
44+
grid-row: 2;
45+
grid-column: 2;
46+
justify-self: center;
47+
48+
font-family: 'Candal', sans-serif;
49+
font-size: 2em;
50+
}
51+
52+
#prev, #next {
53+
grid-row: 1 / span 2;
54+
align-self: center;
55+
}
56+
57+
button {
58+
border: 5px solid #BE946A;
59+
color: #D78822;
60+
border-radius: 20px;
61+
padding: 15px;
62+
margin: 0px 20px;
63+
background: #D8BC9D;
64+
font-size: 1.5em;
65+
}
66+
67+
button:hover {
68+
background: #BE946A;
69+
}
70+
71+
button:active {
72+
border: 5px solid #A9ABBE;
73+
color: #A9ABBE;
74+
background: #5D628F;
75+
position: relative;
76+
top: 2px;
77+
left: 2px;
78+
}
79+
80+
nav {
81+
display: grid;
82+
grid-template-columns: repeat(7, 1fr);
83+
grid-gap: 10px;
84+
justify-items: center;
85+
}
86+
87+
#abr {
88+
display: none;
89+
}
90+
91+
main {
92+
display: grid;
93+
grid-template-columns: repeat(7, 1fr);
94+
grid-auto-rows: 1fr;
95+
grid-gap: 10px;
96+
}
97+
98+
.red {
99+
color: #A52430;
100+
}
101+
102+
.day {
103+
display: grid;
104+
grid-template-columns: 1fr;
105+
grid-template-rows: 1fr;
106+
align-items: end;
107+
justify-items: end;
108+
padding: 5px 10px;
109+
background: #D8BC9D;
110+
}
111+
112+
.red.day {
113+
background: #BE946A;
114+
}
115+
116+
.today {
117+
color: #5D628F;
118+
font-weight: bold;
119+
}
120+
121+
@media (max-width: 1200px) {
122+
body {
123+
font-size: 1.2em;
124+
}
125+
126+
#days {
127+
display: none;
128+
}
129+
130+
#abr {
131+
display: grid;
132+
}
133+
134+
button {
135+
border: 3px solid #BE946A;
136+
border-radius: 15px;
137+
padding: 10px;
138+
margin: 0px 10px;
139+
font-size: 1.2em;
140+
}
141+
}
142+
</style>
143+
144+
<script>
145+
var date = new Date();
146+
147+
function fillCalendar() {
148+
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
149+
var month = document.getElementById("month");
150+
month.innerHTML = monthNames[date.getMonth()];
151+
152+
var year = document.getElementById("year");
153+
year.innerHTML = date.getUTCFullYear();
154+
155+
var lastDay = new Date(date.getUTCFullYear(), date.getMonth() + 1, 0).getDate();
156+
157+
var main = document.querySelector("main");
158+
159+
for (var dayNumber = 1; dayNumber <= lastDay; dayNumber++) {
160+
var day = document.createElement('div');
161+
day.className = "day";
162+
day.innerHTML = dayNumber;
163+
164+
if (dayNumber == 1)
165+
day.style.gridColumn = new Date(date.getUTCFullYear(), date.getMonth(), 1).getDay() + 1;
166+
if (new Date(date.getUTCFullYear(), date.getMonth(), dayNumber).getDay() == 0)
167+
day.className += " red";
168+
169+
var today = new Date();
170+
if (dayNumber == today.getDate() && date.getUTCFullYear() == today.getUTCFullYear() && date.getMonth() == today.getMonth())
171+
day.className += " today";
172+
173+
main.appendChild(day);
174+
}
175+
}
176+
177+
function removeDays() {
178+
var main = document.querySelector("main");
179+
main.innerHTML = "";
180+
}
181+
182+
function prev() {
183+
removeDays();
184+
185+
date = new Date(date.getUTCFullYear(), date.getMonth(), 0);
186+
187+
fillCalendar();
188+
}
189+
190+
function next() {
191+
removeDays();
192+
193+
date = new Date(date.getUTCFullYear(), date.getMonth() + 1, 2);
194+
195+
fillCalendar();
196+
}
197+
198+
document.ondblclick = function() {
199+
// Change alignment of day numbers.
200+
var days = document.getElementsByClassName("day");
201+
for (var i = 0; i < days.length; i++) {
202+
days[i].style.alignItems = days[i].style.alignItems == "end" ? "start" : "end";
203+
days[i].style.justifyItems = days[i].style.justifyItems == "end" ? "start" : "end";
204+
}
205+
};
206+
</script>
207+
</head>
208+
<body onload="fillCalendar();">
209+
210+
<header>
211+
<h1 id="year"></h1>
212+
<h2 id="month"></h2>
213+
<button id="prev" onclick="prev();">&lt;&lt;&lt;</button>
214+
<button id="next" onclick="next();">&gt;&gt;&gt;</button>
215+
</header>
216+
217+
<nav id="days">
218+
<div class="dayname red">Sunday</div>
219+
<div class="dayname">Monday</div>
220+
<div class="dayname">Tuesday</div>
221+
<div class="dayname">Wednesday</div>
222+
<div class="dayname">Thursday</div>
223+
<div class="dayname">Friday</div>
224+
<div class="dayname">Saturday</div>
225+
</nav>
226+
227+
<nav id="abr">
228+
<div class="dayname red">Sun</div>
229+
<div class="dayname">Mon</div>
230+
<div class="dayname">Tue</div>
231+
<div class="dayname">Wed</div>
232+
<div class="dayname">Thu</div>
233+
<div class="dayname">Fri</div>
234+
<div class="dayname">Sat</div>
235+
</nav>
236+
237+
<main></main>
238+
239+
</body>
240+
</html>

‎calendar.png

52.7 KB
Loading

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,15 @@ <h4 class="list-group-item-heading">Alignment demo (<code>justify|align-self</co
307307
</p>
308308
<p>Another alighment demo, this time it changes the value of <code>justify-self</code> and <code>align-self</code> properties of the items in each track (column/row).</p>
309309
</li>
310+
<li class="list-group-item">
311+
<h4 class="list-group-item-heading">Calendar demo</code>)</h4>
312+
<p>
313+
<a href="calendar.html" class="label label-primary">example</a>
314+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/calendar.html" class="label label-success">html</a>
315+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/calendar.png" class="label label-info">screenshot</a>
316+
</p>
317+
<p>Example of a calendar created using CSS Grid Layout. The days are added with JavaScript and only the column of the first day is set (depending on the day of the week) and the rest of them are placed automatically. If you double-click in the page, the alignment of the days numbers is changed.</p>
318+
</li>
310319
</ul>
311320
</div>
312321
</div>

0 commit comments

Comments
 (0)