273 lines
11 KiB
HTML
273 lines
11 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: #ccc;
|
|
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, 0, 0, 0.5);
|
|
}
|
|
|
|
th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
th.year {
|
|
font-size: x-large;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
th div {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
th div.today {
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
|
|
td {
|
|
padding: 0.25rem;
|
|
text-align: center;
|
|
width: 40px;
|
|
}
|
|
|
|
.today span {
|
|
border: 2px solid #fff;
|
|
border-radius: 1rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.date-28,
|
|
.date-29,
|
|
.date-30,
|
|
.date-31 {
|
|
color: #000;
|
|
}
|
|
|
|
.date-28 {
|
|
background-color: #faa;
|
|
}
|
|
|
|
.date-29 {
|
|
background-color: #fe8;
|
|
}
|
|
|
|
.date-30 {
|
|
background-color: #8c8;
|
|
}
|
|
|
|
.date-31 {
|
|
background-color: #88f;
|
|
}
|
|
|
|
.today {
|
|
color: #fff;
|
|
}
|
|
|
|
.today.date-28,
|
|
.today.date-29,
|
|
.today.date-30,
|
|
.today.date-31 {
|
|
color: #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="main">
|
|
<table id="template" hidden>
|
|
<thead>
|
|
<tr>
|
|
<th class="year" colspan="5"><span>Year</span></th>
|
|
<th class="day-1"></th>
|
|
<th class="day-2"></th>
|
|
<th class="day-3"></th>
|
|
<th class="day-4"></th>
|
|
<th class="day-5"></th>
|
|
<th class="day-6"></th>
|
|
<th class="day-0"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="row-1">
|
|
<td class="date-1"><span>1</span></td>
|
|
<td class="date-8"><span>8</span></td>
|
|
<td class="date-15"><span>15</span></td>
|
|
<td class="date-22"><span>22</span></td>
|
|
<td class="date-29"><span>29</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
</tr>
|
|
<tr class="row-2">
|
|
<td class="date-2"><span>2</span></td>
|
|
<td class="date-9"><span>9</span></td>
|
|
<td class="date-16"><span>16</span></td>
|
|
<td class="date-23"><span>23</span></td>
|
|
<td class="date-30"><span>30</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
</tr>
|
|
<tr class="row-3">
|
|
<td class="date-3"><span>3</span></td>
|
|
<td class="date-10"><span>10</span></td>
|
|
<td class="date-17"><span>17</span></td>
|
|
<td class="date-24"><span>24</span></td>
|
|
<td class="date-31"><span>31</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
</tr>
|
|
<tr class="row-4">
|
|
<td class="date-4"><span>4</span></td>
|
|
<td class="date-11"><span>11</span></td>
|
|
<td class="date-18"><span>18</span></td>
|
|
<td class="date-25"><span>25</span></td>
|
|
<td></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
</tr>
|
|
<tr class="row-5">
|
|
<td class="date-5"><span>5</span></td>
|
|
<td class="date-12"><span>12</span></td>
|
|
<td class="date-19"><span>19</span></td>
|
|
<td class="date-26"><span>26</span></td>
|
|
<td></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
</tr>
|
|
<tr class="row-6">
|
|
<td class="date-6"><span>6</span></td>
|
|
<td class="date-13"><span>13</span></td>
|
|
<td class="date-20"><span>20</span></td>
|
|
<td class="date-27"><span>27</span></td>
|
|
<td></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
</tr>
|
|
<tr class="row-0">
|
|
<td class="date-7"><span>7</span></td>
|
|
<td class="date-14"><span>14</span></td>
|
|
<td class="date-21"><span>21</span></td>
|
|
<td class="date-28"><span>28</span></td>
|
|
<td></td>
|
|
<td class="day-0"><span>Sun</span></td>
|
|
<td class="day-1"><span>Mon</span></td>
|
|
<td class="day-2"><span>Tue</span></td>
|
|
<td class="day-3"><span>Wed</span></td>
|
|
<td class="day-4"><span>Thu</span></td>
|
|
<td class="day-5"><span>Fri</span></td>
|
|
<td class="day-6"><span>Sat</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
|
|
<script>
|
|
let today = new Date();
|
|
let displayed = false;
|
|
const main = document.getElementById("main");
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
function setCalendars() {
|
|
const existing = main.querySelectorAll(".calendar");
|
|
for (const item of existing) item.remove();
|
|
|
|
const date = new Date();
|
|
date.setHours(0, 0, 0);
|
|
if (date.getDate() == today.getDate() && displayed) return;
|
|
|
|
for (let year = today.getFullYear(); year < (today.getFullYear() + 5); year++) {
|
|
date.setFullYear(year);
|
|
|
|
const table = document.importNode(document.getElementById("template"), true);
|
|
table.setAttribute("id", `year-${year}`);
|
|
table.hidden = false;
|
|
table.classList.add("calendar");
|
|
table.querySelector(".year span").textContent = date.getFullYear();
|
|
|
|
for (let month = 0; month < months.length; month++) {
|
|
date.setDate(1);
|
|
date.setMonth(month);
|
|
|
|
const future = new Date(date);
|
|
if (month + 1 >= months.length) {
|
|
future.setFullYear(year + 1);
|
|
}
|
|
|
|
future.setMonth((month + 1) % months.length);
|
|
future.setTime(future.getTime() - 60000); // A minute before
|
|
|
|
const div = document.createElement("div");
|
|
const span = document.createElement("span");
|
|
span.textContent = months[month];
|
|
div.appendChild(span);
|
|
table.querySelector(`thead .day-${date.getDay()}`).appendChild(div);
|
|
div.classList.add(`date-${future.getDate()}`);
|
|
div.classList.add(`month-${month}`);
|
|
div.setAttribute("title", `${future.getDate()} days`);
|
|
}
|
|
|
|
main.appendChild(table);
|
|
}
|
|
|
|
const todayTable = document.getElementById(`year-${today.getFullYear()}`);
|
|
todayTable.querySelector(".year").classList.add("today");
|
|
todayTable.querySelector(`thead .month-${today.getMonth()}`).classList.add("today");
|
|
todayTable.querySelector(`tbody .date-${today.getDate()}`).classList.add("today");
|
|
todayTable.querySelector(`tbody .row-${today.getDate() % 7} .day-${today.getDay()}`).classList.add("today");
|
|
|
|
displayed = true;
|
|
}
|
|
|
|
setCalendars();
|
|
setInterval(setCalendars, 1000 * 60);
|
|
</script>
|
|
</body>
|
|
</html> |