HTML: Kalender erstellen – So gehts


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.

HTML: Kalender 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!

Hat dir der Beitrag gefallen?

    html        html kalender   
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Beiträge die dich Interessieren könnten 😌

Whatsapp: Ton für Mitteilungen ändern – So gehts

Der Standard-Ton für Mitteilungen kann mit der Zeit jedoch etwas langweilig werden. Wenn du also...

Whatsapp: Verknüpfte Geräte löschen – So gehts

Oftmals haben wir jedoch mehr als ein Gerät, das mit WhatsApp verbunden ist. Vielleicht hast...

Whatsapp: Telefonnummer ändern – So gehts

Sei es aufgrund eines Anbieterwechsels oder einfach nur aus privaten Gründen. Wenn du dich fragst...

Whatsapp: Nachricht löschen – So gehts

Manchmal kann es jedoch vorkommen, dass wir eine Nachricht versehentlich senden oder dass wir eine...

Whatsapp: Zuletzt verwendete Smileys löschen

Beim Verfassen von Nachrichten verwenden wir oft Emojis oder Smileys, um unsere Gefühle auszudrücken. Manchmal...

Whatsapp: Chat exportieren – So gehts

Manchmal möchten wir jedoch wichtige Chats speichern oder sichern, sei es aus sentimentalen Gründen oder...

Whatsapp: Umfrage erstellen – So gehts

Eine tolle Möglichkeit, um schnell und einfach eine Meinungsumfrage unter deinen Kontakten zu starten, ist...

Telegram: Nutzer melden – So gehts

Es ist wichtig, solche Vorfälle zu melden, um eine angenehme und respektvolle Umgebung für alle...

Telegram: Keine Benachrichtigungen – iPhone

Es kann frustrierend sein, wenn du keine Telegram-Benachrichtigungen auf deinem iPhone erhältst. Glücklicherweise gibt es...

Telegram: Bedienungsanleitung – So gehts

In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du die Telegram Bedienungsanleitung finden...

Telegram: Gruppe erstellen – So gehts

Das Erstellen einer Gruppe in Telegram kann sehr nützlich sein, wenn du mit einer größeren...

Telegram: Zugriff auf Kamera erlauben

Wenn du in Telegram den Zugriff auf deine Kamera erlauben möchtest, kannst du ganz einfach...

Telegram: Sticker erstellen – So gehts

Mit Telegramm, kannst du sogar deine eigenen individuellen Sticker erstellen. In dieser Schritt-für-Schritt Anleitung zeige...

Telegram: Zugriff auf Fotos erlauben – So gehts

Um in Telegramm den Zugriff auf Fotos zu erlauben, gibt es eine einfache Schritt-für-Schritt Anleitung...

Telegram: Zugriff auf Kontakte verweigern

Obwohl es viele Funktionen bietet, möchten einige Benutzer möglicherweise den Zugriff auf ihre Kontakte in...