Wie programmiert man einen Kalender für die Webseite? (HTML & CSS & Javascript Anleitung)

von | Aug 1, 2023 | Allgemein, Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

Für heute habe ich mir wieder was spassiges ausgedacht und zwar bauen wir uns heute einen Kalender, den man danach in die eigen Webseite einbauen kann, oder zum Beispiel als Overlay für Livestreams / Videos verwenden kann.

Video

HTML

Als erstes brauchen wir das Grundgerüst. Hier seht ihr das es eine linke wie rechte Hälfte gibt, die sogar noch ein paar Dummydaten enthält die durch das JS später danach angepasst werden.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="seite">
      <div class="kalender">
        <div class="links">
          <p id="datum">01</p>
          <p id="tag">Sonntag</p>
        </div>
        <div class="rechts">
          <p id="monat">Januar</p>
          <p id="jahr">2030</p>
        </div>
      </div>
    </div>

CSS

Hier der CSS Bereich – ihr seht sehr schnell, dass hier nichts spezielles passiert.

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
* {
  margin: 0;
  padding: 1;
  box-sizing: border-box;
}
 
.seite {
  width: 100%;
  min-height: 100vh;
  background: #003049;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.kalender {
  width: 300px;
  height: 250px;
  background: #fdf0d5;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
 
.links,
.rechts {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
 
.rechts {
  background: #c1121f;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
 
.links {
}

Javascript

Hier kommt nun der Javascript Bereich und ihr seht sehr schnell, dass hier die Namen der Wochentage und der Monate auf Deutsch übersetzt worden sind. Ihr könnt die natürlich weglassen aber dann wird der Kalender auf englisch sein.

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
const datum = document.getElementById("datum");
const tag = document.getElementById("tag");
const monat = document.getElementById("monat");
const jahr = document.getElementById("jahr");
 
const heute = new Date();
 
/* Wenn ihr diese Console.Log Aktion aktiviert, dann seht ihr was für eine Ausgabe in der Log Datei sichtbar ist
console.log(heute);
*/
const wochentage = [
  "Sonntag",
  "Montag",
  "Dienstag",
  "Mittwoch",
  "Donnerstag",
  "Freitag",
  "Samstag",
];
 
const monate = [
  "Januar",
  "Februar",
  "März",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Dezember",
];
 
datum.innerHTML = heute.getDate();
tag.innerHTML = wochentage[heute.getDay()];
monat.innerHTML = monate[heute.getMonth()];
jahr.innerHTML = heute.getFullYear();

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert