249 lines
8.9 KiB
HTML
249 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html lang="en_US">
|
|
<head>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
<title>Some calendar thing</title>
|
|
|
|
<style>
|
|
html, body {
|
|
background-color: #000;
|
|
color: #999;
|
|
font-family: "Consolas", monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
table {
|
|
border: 1px solid #888;
|
|
border-collapse: collapse;
|
|
margin: 2.5rem auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: rgba(128, 64, 0, 0.5);
|
|
}
|
|
|
|
th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
th.year {
|
|
font-size: x-large;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
td {
|
|
padding: 0.25rem;
|
|
text-align: center;
|
|
width: 40px;
|
|
}
|
|
|
|
td.num {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.d28, .d29, .d30, .d31 {
|
|
color: #666;
|
|
}
|
|
|
|
.d28 {
|
|
background-color: #faa;
|
|
}
|
|
|
|
.d29 {
|
|
background-color: #ffa;
|
|
}
|
|
|
|
.d30 {
|
|
background-color: #afa;
|
|
}
|
|
|
|
.d31 {
|
|
background-color: #aaf;
|
|
}
|
|
|
|
.today {
|
|
color: #fff;
|
|
}
|
|
|
|
.today.d28, .today.d29, .today.d30, .today.d31 {
|
|
color: #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="main">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="year" colspan="5">Year</th>
|
|
<th class="col-1"></th>
|
|
<th class="col-2"></th>
|
|
<th class="col-3"></th>
|
|
<th class="col-4"></th>
|
|
<th class="col-5"></th>
|
|
<th class="col-6"></th>
|
|
<th class="col-0"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>8</td>
|
|
<td>15</td>
|
|
<td>22</td>
|
|
<td class="d29">29</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>9</td>
|
|
<td>16</td>
|
|
<td>23</td>
|
|
<td class="d30">30</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>10</td>
|
|
<td>17</td>
|
|
<td>24</td>
|
|
<td class="d31">31</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>11</td>
|
|
<td>18</td>
|
|
<td>25</td>
|
|
<td></td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>12</td>
|
|
<td>19</td>
|
|
<td>26</td>
|
|
<td></td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6</td>
|
|
<td>13</td>
|
|
<td>20</td>
|
|
<td>27</td>
|
|
<td></td>
|
|
<td class="col-6">Sat</td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>14</td>
|
|
<td>21</td>
|
|
<td class="d28">28</td>
|
|
<td></td>
|
|
<td class="col-0">Sun</td>
|
|
<td class="col-1">Mon</td>
|
|
<td class="col-2">Tue</td>
|
|
<td class="col-3">Wed</td>
|
|
<td class="col-4">Thu</td>
|
|
<td class="col-5">Fri</td>
|
|
<td class="col-6">Sat</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
|
|
<script>
|
|
const today = new Date();
|
|
const now = new Date();
|
|
now.setHours(0, 0, 0);
|
|
|
|
const currentYear = now.getFullYear();
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
let template = document.importNode(document.getElementsByTagName("table")[0], true);
|
|
const main = document.getElementById("main");
|
|
main.removeChild(main.firstElementChild);
|
|
|
|
for (let year = 0; year < 5; year++) {
|
|
const table = document.importNode(template, true); // Clone
|
|
now.setFullYear(currentYear + year);
|
|
table.querySelector(".year").textContent = now.getFullYear();
|
|
|
|
for (let day = 0; day < 7; day++) {
|
|
for (let month = 0; month < 12; month++) {
|
|
now.setDate(1);
|
|
now.setMonth(month);
|
|
|
|
const future = new Date(now);
|
|
if (month + 1 >= months.length) {
|
|
future.setFullYear(currentYear + 1);
|
|
}
|
|
|
|
future.setMonth((month + 1) % months.length);
|
|
future.setTime(future.getTime() - 60000); // A minute before
|
|
|
|
if (now.getDay() == day) {
|
|
const div = document.createElement("div");
|
|
div.textContent = months[month];
|
|
table.querySelector(`thead .col-${day}`).appendChild(div);
|
|
div.classList.add(`d${future.getDate()}`);
|
|
div.setAttribute("title", `${future.getDate()} days`);
|
|
|
|
if (now.getFullYear() == today.getFullYear() && month == today.getMonth()) div.classList.add("today");
|
|
}
|
|
}
|
|
}
|
|
|
|
main.appendChild(table);
|
|
}
|
|
|
|
const todayTable = document.getElementsByTagName("table")[0];
|
|
todayTable.querySelector(".year").classList.add("today");
|
|
const row = todayTable.querySelector(`tbody tr:nth-child(${today.getDate() % 7})`);
|
|
const dateColumn = Math.ceil(today.getDate() / 7);
|
|
row.querySelector(`td:nth-child(${dateColumn})`).classList.add("today");
|
|
row.querySelector(`.col-${today.getDay()}`).classList.add("today");
|
|
</script>
|
|
</body>
|
|
</html> |