HTML: Kalender erstellen

In diesem Artikel werde ich dir zeigen, wie du in HTML einen einfachen Kalender erstellen kannst. Ein Kalender kann sehr nützlich sein, um Termine und Ereignisse im Blick zu behalten oder um einfach nur den aktuellen Tag im Auge zu behalten. Folge einfach meinen Schritt-für-Schritt-Anweisungen, um deinen eigenen Kalender zu erstellen.

Schritt 1: HTML-Grundstruktur
Öffne einen Texteditor und erstelle eine neue HTML-Datei. Beginne mit der Grundstruktur eines HTML-Dokuments, indem du den HTML- und den Body-Tag öffnest und schließt.

<!DOCTYPE html>
<html>
<head>
  <title>Mein Kalender</title>
</head>
<body>

</body>
</html>

Schritt 2: Erstelle den Kalendercontainer
Innerhalb des Body-Tags erstellen wir zunächst einen Container, in dem der Kalender angezeigt wird. Verwende dazu ein Div-Element mit einer eindeutigen ID, damit wir es später über CSS stylen können.

<!DOCTYPE html>
<html>
<head>
  <title>Mein Kalender</title>
</head>
<body>
  <div id="calendar"></div>
</body>
</html>

Schritt 3: Verwende CSS für das Design des Kalenders
Um den Kalender ansprechend aussehen zu lassen, verwenden wir CSS. Öffne dazu den Head-Bereich deines HTML-Dokuments und füge folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
  <title>Mein Kalender</title>
  <style>
    #calendar {
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .day {
      text-align: center;
      margin-bottom: 5px;
    }

    .current-day {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="calendar"></div>
</body>
</html>

In diesem CSS-Code haben wir einen stilisierten Kalendercontainer (ID „calendar“) sowie Klassen für die Tage und den aktuellen Tag definiert.

Schritt 4: Füge JavaScript-Code hinzu, um den Kalender zu generieren
Nun ist es an der Zeit, den Kalender mit JavaScript zu generieren. Platziere den folgenden Code direkt vor dem schließenden Body-Tag.

<!DOCTYPE html>
<html>
<head>
  <title>Mein Kalender</title>
  <style>
    #calendar {
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .day {
      text-align: center;
      margin-bottom: 5px;
    }

    .current-day {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="calendar"></div>

  <script>
    function generateCalendar() {
      const calendar = document.getElementById('calendar');

      // Erstelle ein Date-Objekt für den aktuellen Monat
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth();

      // Rufe den ersten Tag des aktuellen Monats ab
      const firstDay = new Date(currentYear, currentMonth, 1).getDay();

      // Bestimme die Anzahl der Tage im aktuellen Monat
      const numDays = new Date(currentYear, currentMonth + 1, 0).getDate();

      // Erzeuge die HTML-Struktur des Kalenders
      let calendarHTML = '';

      // Füge Leerzeichen für den ersten Wochentag hinzu
      for (let i = 0; i < firstDay - 1; i++) {
        calendarHTML += '<div class="day"></div>';
      }

      // Füge die Tage des Monats hinzu
      for (let i = 1; i <= numDays; i++) {
        if (i === currentDate.getDate()) {
          calendarHTML += '<div class="day current-day">' + i + '</div>';
        } else {
          calendarHTML += '<div class="day">' + i + '</div>';
        }
      }

      // Rendere den generierten Kalender
      calendar.innerHTML = calendarHTML;
    }

    // Rufe die Funktion auf, um den Kalender zu generieren
    generateCalendar();
  </script>
</body>
</html>

In diesem JavaScript-Code haben wir eine Funktion namens „generateCalendar“ definiert, die den aktuellen Monat berechnet und den HTML-Code für den Kalender generiert. Die Funktion wird aufgerufen, sobald die Seite geladen ist, um den Kalender in den bereitgestellten Container einzufügen.

Schritt 5: Teste und verfeinere deinen Kalender
Speichere die Datei mit einer .html-Endung und öffne sie in einem Webbrowser. Du solltest jetzt einen einfachen Kalender sehen, der den aktuellen Monat anzeigt. Du kannst das CSS anpassen, um das Design nach deinen Wünschen zu ändern.

Ergebnis deines Kalenders

Mein Kalender

Herzlichen Glückwunsch! Du hast erfolgreich einen Kalender in HTML erstellt. Du kannst weiter an diesem Projekt arbeiten, um zusätzliche Funktionen wie Monatsnavigation oder das Anzeigen von Veranstaltungen hinzuzufügen. Happy Coding!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html html kalender