-
Notifications
You must be signed in to change notification settings - Fork 1
/
text-calendar.html
214 lines (167 loc) · 7.71 KB
/
text-calendar.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📅 text-calendar</title>
</head>
<body>
<pre>
<span id="prev"></span> <span id="next"></span>
<span id="txt-cal"></span>
</pre>
<footer>
<p class="inspired">Inspired by: <a href="https://demeyere.design/text-calendar/">demeyere.design/text-calendar</a></p>
<p class="hint">Use your keyboard <kbd>⯇</kbd> <kbd>⯈</kbd> arrows to change year </p>
</footer>
<script>
// static variables
var norm_array = [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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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 ];
var leap_array = [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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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 ];
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
// returns the text-calendar for the given year
function get_text_calendar( year ) {
var text = "----------- " + year + " -----------\n";
text += " Mo Tu We Th Fr Sa Su\n";
text += "----------------------------\n";
var month_i = 0;
var calendar_array = (new Date(year, 1, 29).getMonth() == 1) ? leap_array : norm_array; // checks for leap year
var year_2D = new Array(53); // 53 "weeks" each of which will have an array of 7 "days"
var day = 0;
var week = 0;
var first_day_of_year = new Date(year, 0, 1).getUTCDay(); // Monday is 0 / Sunday is 6
// variables for handling "current year/week" and display a ⯇ sign
var current_week = getISOWeekNumber();
var current_year = new Date().getFullYear();
// handle first week by
// putting the first day of year in the right place
year_2D[0] = new Array(7);
for (i=first_day_of_year ; i<7 ; i++) {
year_2D[0][i] = calendar_array[day++];
}
// continue with rest of the weeks
for (j=1 ; j<53 ; j++) {
year_2D[j] = new Array(7);
for (k=0 ; k<7 ; k++) {
year_2D[j][k] = calendar_array[day++];
}
}
// find the correct ISO 8601 week number for the first week:
// - If 1 January is on a Monday, Tuesday, Wednesday or Thursday, it is in W01.
// - If it is on a Friday, it is part of W53 of the previous year.
// - If it is on a Saturday, it is part of the last week of the previous year which is numbered W52 in a common year and W53 in a leap year.
// - If it is on a Sunday, it is part of W52 of the previous year.
if (first_day_of_year <= 3) { // Mon, Tue, Wed or Thu
week = 1;
}
else if (first_day_of_year == 4) { // Fri
week = 53;
}
else if (first_day_of_year == 5) { // Sat
(new Date(year-1, 1, 29).getMonth() == 1) ? week=53 : week=52;
}
else if (first_day_of_year == 6) {
week = 52;
}
// iterate the year_2D array
// and generate the text-calendar
for (i=0 ; i<53 ; i++) {
month_str = " ";
num_str = "";
for (j=0 ; j<7 ; j++) {
if ( year_2D[i][j]==1 ) {
month_str = " " + months[ month_i++ ] + " "; // add month if the line has the 1st day of a month
}
// check for undefined (emplty) cells
if ( year_2D[i][j] ) {
num_str += year_2D[i][j].toString().padStart(2,0) + " ";
} else {
num_str += " "; // if undefined add spaces
}
}
line = week.toString().padStart(2,0) + month_str + num_str;
if ((week==current_week) && (year==current_year)) {
line += "⯇"
}
// handle the week numbering in case we started with W52 or W53
if (
(i==0) &&
((week==52) || (week==53))
) {
week=1;
} else {
week++;
}
text += line + "\n";
}
return text;
}
function helper_load_prev() {
year_now = year_now - 1;
document.querySelector('#txt-cal').innerHTML = get_text_calendar( year_now );
document.querySelector('#prev').innerHTML = "⯇ " + (year_now-1);
document.querySelector('#next').innerHTML = (year_now+1) + " ⯈";
}
function helper_load_next() {
year_now = year_now + 1;
document.querySelector('#txt-cal').innerHTML = get_text_calendar( year_now );
document.querySelector('#prev').innerHTML = "⯇ " + (year_now-1);
document.querySelector('#next').innerHTML = (year_now+1) + " ⯈";
}
// display current year text-calendar when page loads:
var year_now = new Date().getFullYear();
var year_now_text = get_text_calendar( year_now );
document.querySelector('#txt-cal').innerHTML = year_now_text;
document.querySelector('#prev').innerHTML = "⯇ " + (year_now-1);
document.querySelector('#next').innerHTML = (year_now+1) + " ⯈";
// change year (next / previous) when the user presses (right / left) arrows
document.addEventListener('keydown', function(e) {
if ( event.keyCode == 37) {
helper_load_prev();
} else if ( event.keyCode == 39) {
helper_load_next();
}
});
document.querySelector('#prev').addEventListener('click', function(e) {
helper_load_prev();
});
document.querySelector('#next').addEventListener('click', function(e) {
helper_load_next();
});
function getISOWeekNumber(date = new Date()) {
const tempDate = new Date(date.getTime());
tempDate.setUTCDate(tempDate.getUTCDate() + 4 - (tempDate.getUTCDay() || 7));
const yearStart = new Date(Date.UTC(tempDate.getUTCFullYear(), 0, 1));
const weekNumber = Math.ceil((((tempDate - yearStart) / 86400000) + 1) / 7);
return weekNumber;
}
</script>
<style>
#prev, #next {cursor: pointer;}
footer {font-family: sans-serif; font-size: 11px; color: #858585;}
footer a {color: #436f9d;}
</style>
</body>
</html>