Das Hinzufügen eines Kalenders zu einer Website ist hilfreich, um bevorstehende Ereignisse anzuzeigen, Terminoptionen bereitzustellen usw. Für persönliche Websites, Unternehmen oder Bildungsportale kann ein HTML-Kalender ein wertvolles Werkzeug sein.
Website-Kalender können auf verschiedene Arten erstellt werden. Einige Nutzer bevorzugen eine vollständig individuell codierte Version, während andere eine schnellere, einfachere Lösung mit sofort einsatzbereiten Widgets benötigen. Dieser Artikel beschreibt beide Ansätze.
Wie man einen Kalender in HTML erstellt
Betrachten wir zunächst, wie man HTML-Code für einen Kalender erstellt. Solche Anwendungen können mit HTML und CSS für ein einfaches statisches Design entwickelt werden oder JavaScript für mehr Interaktivität hinzufügen.
Um mit der Erstellung eines einfachen HTML-Kalenders zu beginnen, erstellen Sie die Datei index.html. Der Kalender basiert auf einer Tabelle, da Tabellen ideal sind, um Zeilen und Spalten zu erstellen, die dem Layout eines Kalenders entsprechen.
Hier ist ein einfacher HTML-Kalender-Code, den Sie als Grundlage verwenden können. Dieses Beispiel zeigt einen statischen Kalender für einen Monat mit HTML und CSS zur Gestaltung.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Calendar - November 2024</title>
<style>
/* Basic page styling */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
margin: 0;
}
/* Calendar container */
.calendar {
width: 450px;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Calendar header styling */
.calendar-header {
text-align: center;
background-color: #007bff;
color: white;
padding: 10px;
font-size: 1.2em;
font-weight: bold;
}
/* Days of the week styling */
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: #007bff;
color: white;
}
.calendar-days div {
padding: 10px;
text-align: center;
font-weight: bold;
}
/* Date cells styling */
.calendar-dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar-dates div {
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* Highlight today */
.today {
background-color: #ffdd57;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Calendar Container -->
<div class="calendar">
<!-- Month and Year Header -->
<div class="calendar-header">November 2024</div>
<!-- Days of the Week -->
<div class="calendar-days">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<!-- Calendar Dates -->
<div class="calendar-dates">
<!-- Blank spaces for days before the month starts on Friday -->
<div></div> <div></div> <div></div> <div></div> <div></div> <div class="today">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div><div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> <div>25</div> <div>26</div><div>27</div> <div>28</div> <div>29</div> <div>30</div>
</body>
</html>Dieser Code erstellt einen statischen Kalender für Oktober 2024. Um ihn dynamisch zu gestalten, könnte JavaScript verwendet werden, um Daten zu berechnen und das Layout automatisch an verschiedene Monate anzupassen.
Erklärung des Codes
- Container (.calendar). Dies ist der Wrapper, der den gesamten Kalender enthält. Er ist mit einem Schatten und einem Rand gestaltet, um eine kartenähnliche Optik zu erzeugen.
- Header (.calendar-header). Zeigt den Monat und das Jahr an und ist mit einer fettgedruckten Schriftart und einer Hintergrundfarbe gestaltet.
- Wochentage (.calendar-days). Dieser Abschnitt zeigt die Wochentage (So bis Sa) in einer Reihe an, wobei jeder Tag in einer Rasterzelle dargestellt wird.
- Datumsangaben (.calendar-dates). Dieses Raster zeigt jedes Datum in einem Layout mit 7 Spalten an, wobei jede Zelle einen Tag darstellt. Leere <div>-Elemente werden verwendet, um den Starttag des Monats auszurichten.
- Hervorhebung des heutigen Tages (.today). Eine Klasse wird auf eine Datumzelle angewendet, um den aktuellen Tag hervorzuheben.
Wie man einen Kalender für HTML mit einem Widget erstellt
Falls Ihnen das Arbeiten mit HTML-Code zu kompliziert erscheint, gibt es eine No-Code-Option, die das Erstellen eines Kalenders für Ihre Website erleichtert. Mit Elfsight können Sie einen vollständig funktionalen Kalender anpassen und einrichten. Danach müssen Sie nur noch den Einbettungscode für den HTML-Kalender kopieren.
Dadurch erhalten Sie nicht nur einen einfachen Kalender, sondern das Event-Kalender-Widget, das Ihnen hilft, wichtige Termine und Aktivitäten mit Ihrem Publikum zu teilen.
Folgen Sie diesen Schritten, um Ihren ersten Event-Kalender für Ihre Website einzurichten:
- Öffnen Sie den Editor und wählen Sie Ihr Layout aus. Gehen Sie zum Elfsight Event Calendar Editor, wählen Sie ein Layout aus und klicken Sie auf „Mit dieser Vorlage fortfahren“.
- Wählen Sie, wie Sie Ihre Ereignisse verwalten möchten. Wählen Sie „Ereignisse manuell verwalten“, um einen neuen Kalender zu erstellen, oder „Mit Google Kalender verbinden“, um einen bestehenden Kalender anzuzeigen.
- Fügen Sie Ereignisse hinzu, entfernen oder bearbeiten Sie sie in Ihrem Kalender. Im Tab „Ereignisse“ können Sie Ereignisse hinzufügen oder entfernen. Klicken Sie auf das Drei-Punkte-Symbol neben jedem Ereignis, um Details zu bearbeiten.
- Passen Sie das Erscheinungsbild und die Einstellungen Ihres Kalenders an. Ändern Sie das Layout, das Design und andere Einstellungen in den jeweiligen Tabs und klicken Sie dann auf „Kostenlos zur Website hinzufügen“.
- Binden Sie Ihren Kalender ein, indem Sie den Code in Ihre Website einfügen. Kopieren Sie den HTML-Code für den Kalender und fügen Sie ihn in das CMS Ihrer Website ein.
Erstellen Sie Ihren HTML-Event-Kalender in nur wenigen Klicks direkt mit unserem kostenlosen Editor!
Warum ein No-Code-HTML-Kalender-Widget wählen?
Ein No-Code-HTML-Kalender-Widget vereinfacht den Prozess der Erstellung, Anpassung und Einbettung eines Kalenders. Dies ist eine ideale Lösung für Nutzer ohne technische Vorkenntnisse.
Hier sind einige Vorteile eines HTML-Kalender-Widgets:
Attraktive Call-to-Action-Buttons
Ermutigen Sie Nutzer, mit Ihren Veranstaltungen zu interagieren, indem Sie eine klare Call-to-Action-Schaltfläche hinzufügen, z. B. „Tickets kaufen“, „Anmelden“ oder „Veranstaltungsseite besuchen“. Diese auffällige Schaltfläche in Ihren Event-Listen und Pop-ups kann gelegentliche Besucher in aktive Teilnehmer verwandeln.
Schnelle Kalendersynchronisation
Ermöglichen Sie es Teilnehmern, Veranstaltungen direkt in ihre persönlichen Kalender zu übernehmen. Sobald hinzugefügt, erhalten sie Erinnerungen und verpassen keine wichtigen Termine mehr.
Flexible Layout-Optionen
Mit Optionen für Raster- und Mauerwerk-Layouts können Sie Veranstaltungen so anordnen, dass sie optimal zu Ihrem Inhalt passen. Das Raster-Layout eignet sich für strukturierte Veranstaltungen, während das Mauerwerk-Layout Elemente automatisch anpasst, um den verfügbaren Platz optimal zu nutzen und die Navigation zu erleichtern.
Hervorgehobene Veranstaltungen im Slider
Präsentieren Sie ausgewählte Veranstaltungen auf Ihrer Startseite mit einem eleganten Slider. Ideal, um wichtige Events hervorzuheben – der Slider kann ausgewählte Veranstaltungen mit anpassbarer Navigation und Animationsgeschwindigkeit anzeigen, um ein fesselndes und kuratiertes Erlebnis für Ihr Publikum zu schaffen.
Entdecken Sie alle Vorlagen in unserem Katalog!
Entdecken Sie 30+ Event-Kalender-Vorlagen
Fazit
Die Erstellung eines HTML-Kalenders kann so einfach oder detailliert sein, wie Sie es wünschen. Das Programmieren von Grund auf ist eine großartige Lernmöglichkeit, die Ihnen volle Kontrolle gibt. Andererseits ermöglicht Ihnen ein No-Code-Tool wie Elfsight, schnell einen funktionalen und stilvollen Kalender zu erstellen und zu integrieren. Probieren Sie beide Methoden aus, um herauszufinden, welche am besten zu Ihren Bedürfnissen und Fähigkeiten passt.
Benötigen Sie weitere Informationen?
Wir hoffen, dass dieser Leitfaden hilfreich war! Wenn Sie mehr darüber erfahren möchten, wie Sie einen benutzerdefinierten Event-Kalender für Ihre Website erstellen, zögern Sie nicht, uns zu kontaktieren. Wir sind bestrebt, Ihre Erfahrung so reibungslos und angenehm wie möglich zu gestalten.
Treten Sie unserer lebendigen Community bei, um sich zu vernetzen, Ideen auszutauschen und wertvolle Einblicke zu gewinnen. Wir freuen uns auch über Ihr Feedback für zukünftige Verbesserungen – senden Sie uns gerne Ihre Vorschläge auf unserer Wunschliste!
Einfacher Kalender in HTML: Kostenloser Editor
Möchten Sie Google Kalender in Ihre Website integrieren? Öffnen Sie jetzt den HTML-Kalender-Editor, um alle Funktionen des Widgets live zu erkunden und zu sehen, wie es auf Ihrer Website aussieht.