Kalender
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalender</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="jahr"></div>
<div class="monat"></div>
</div>
<table>
<tr>
<th>Mo</th>
<th>Di</th>
<th>Mi</th>
<th>Do</th>
<th>Fr</th>
<th>Sa</th>
<th>So</th>
</tr>
</table>
<script src="main.js"></script>
</body>
</html>
CSS
body {
background-color: lightblue;
margin: 0;
font-family: sans-serif;
}
.wrapper {
display: flex;
justify-content: space-around;
width: 636px;
padding: 10px 0;
font-size: 2.5em;
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collpase;
border: 2px solid black;
font-size: 2em;
background: linear-gradient(white, lightgrey 60%);
}
td {
border: 1px solid black;
text-align: center;
vertical-align: middle;
width: 90px;
height: 90px;
}
tr:first-child {
background: darkblue;
color: white;
}
.heuteSpan {
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
background: grey;
font-weight: bold;
}
JS
const monatsname = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
const wochentag = [6, 0, 1, 2, 3, 4, 5];
let jahr = document.querySelector(".jahr");
let monat = document.querySelector(".monat");
let heute = new Date();
let aktJahr = heute.getFullYear();
let aktMonat = heute.getMonth();
jahr.textContent = aktJahr;
monat.textContent = monatsname[aktMonat];
let durchlaufDatum = new Date(heute);
let tabelle = document.querySelector("table");
let zaehlerTage = 1;
function tageImMonat(paraDatum) {
let calcDatum = new Date(paraDatum);
calcDatum.setDate(1);
calcDatum.setMonth(calcDatum.getMonth() + 1);
calcDatum.setDate(0);
return calcDatum.getDate();
}
for (let i = 0; ; i++) {
let neueZeile = document.createElement("tr");
tabelle.appendChild(neueZeile);
for (let j = 0; j < 7; j++) {
let neueSpalte = document.createElement("td");
neueZeile.appendChild(neueSpalte);
durchlaufDatum.setDate(zaehlerTage);
if (zaehlerTage <= tageImMonat(heute)) {
if (j === wochentag[durchlaufDatum.getDay()]) {
neueSpalte.innerHTML = "<span>" + zaehlerTage + "</span>";
zaehlerTage++;
}
}
if (zaehlerTage - 1 === heute.getDate()) {
neueSpalte.children[0].classList.add("heuteSpan");
}
}
if (zaehlerTage > tageImMonat(heute)) { break; }
}