Das Erstellen einer benutzerdefinierten Kalenderanwendung ist eine hervorragende Möglichkeit, Ihr Verständnis von JavaScript, dem Browser Document Object Model (DOM) und der clientseitigen Datenpersistenz zu vertiefen. Durch die Nutzung der Web Storage API - speziell Local Storage - können Sie einen voll funktionsfähigen, ereignisgesteuerten Kalender erstellen, der vollständig im Browser läuft, ohne einen Backend-Server oder eine Datenbank zu benötigen. Dieses Tutorial führt Sie durch jeden Schritt, von der Strukturierung des HTML bis hin zur Implementierung erweiterter Funktionen wie Drag-and-Drop-Ereignismanagement.

Warum einen benutzerdefinierten Kalender erstellen?

Vorgefertigte Kalenderbibliotheken (wie FullCalendar oder DayPilot) bieten schnelle Lösungen, aber die vollständige Kontrolle über die Benutzeroberfläche, die Datenverarbeitung und die Leistung. Sie erhalten auch praktische Erfahrungen mit den wichtigsten JavaScript-Konzepten wie dem -Objekt, der Ereignisdelegation und der -API. Die resultierende App kann zu einem Projektmanagement-Tool, einem Buchungssystem oder einem persönlichen Journal erweitert werden.

Einrichten der HTML-Struktur

Beginnen Sie mit einem sauberen HTML-Skelett. Der Kalender benötigt drei Hauptkomponenten: eine Navigationsleiste (für wechselnde Monate), einen Rastercontainer (für Tageszellen) und ein Ereigniseingabeformular. Verwenden Sie -Elemente mit semantischen Klassennamen für einfaches Styling und Skripting.

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

Das wird dynamisch von JavaScript bevölkert. Für ein mobiles Layout sollten Sie ein 7-spaltiges CSS-Raster (eines für jeden Tag der Woche) verwenden.

Styling des Kalenders mit CSS

Sauberes, responsives CSS verwandelt das rohe HTML in eine nutzbare Oberfläche. Verwenden Sie ein CSS-Gitter für das Kalenderraster, indem Sie einstellen. Fügen Sie Abstandshalter für Tage vor dem ersten des Monats hinzu. Stellen Sie für die Zugänglichkeit einen ausreichenden Farbkontrast sicher und fügen Sie -Stile in interaktive Elemente ein. Ein minimales Stylesheet wird unten angezeigt (inline oder verlinkt).

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

Verwenden Sie Medienabfragen, um die Zellengröße auf schmalen Bildschirmen zu reduzieren, und ziehen Sie in Betracht, Ereignistext zu verstecken und nur eine Zählung anzuzeigen.

Core JavaScript: Generieren des Kalender-Gitters

Die zentrale Funktion, , berechnet den ersten Tag des Monats und die Gesamtzahl der Tage. Verwenden Sie , um den Wochentagsindex (0 = Sonntag) zu erhalten.

Arbeiten mit dem Date Object

Das Objekt ist das Rückgrat der Kalenderlogik. Um den letzten Tag eines Monats zu erhalten, verwenden Sie (Tag 0 des nächsten Monats gibt den letzten Tag des aktuellen Monats an). Speichern Sie den aktuellen Monat und das aktuelle Jahr in globalen Variablen, damit die Navigation sie aktualisieren kann.

Aufbau des Netzes

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

Aktualisieren Sie die Monats-/Jahresanzeige im Header:

Klicken Sie auf Ereignis-Hörer auf die Schaltflächen Vorher und Nächste. Inkrement oder Dekrement , bei Bedarf das Jahr anpassen (z. B. nach Dezember kommen Sie zum Januar nächsten Jahres).

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

Für zusätzliche Benutzerfreundlichkeit fügen Sie eine Today-Taste hinzu, die die Ansicht auf den aktuellen Monat zurücksetzt und den aktuellen Tag hervorhebt.

Speichern & Abrufen von Ereignissen mit lokaler Speicherung

Local Storage stellt einen einfachen Key-Value-Store bereit, der Browserneustarts überlebt. Verwenden Sie ein konsistentes Schlüsselmuster, z. B. , um JSON-Arrays von Ereignisobjekten zu speichern. Fügen Sie Eigenschaften wie , , und ein.

Ein neues Event retten

Wenn der Benutzer auf die Schaltfläche "Speichern" klickt, erfassen Sie den Eingabewert und das aktuell ausgewählte Datum. (Sie können einen Datumswähler hinzufügen oder erkennen, auf welche Tageszelle geklickt wird.) Abrufen Sie alle vorhandenen Ereignisse für dieses Datum aus dem lokalen Speicher, drücken Sie das neue Ereignis und speichern Sie dann zurück.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

Laden von Ereignissen in Tageszellen

Rufen Sie innerhalb von für jede nicht leere Tageszelle eine Funktion auf, die den lokalen Speicher nach diesem Datumsschlüssel abfragt.

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

Löschen und Bearbeiten von Events

Zum Löschen fügen Sie jedem Ereigniselement ein Klickereignis an (oder verwenden Sie Ereignisdelegation). Holen Sie das Array für dieses Datum ab, filtern Sie das Ereignis nach seinem und speichern Sie das aktualisierte Array zurück in Local Storage.

Erweiterte Funktionen zur Verbesserung der Funktionalität

Sobald der Basiskalender funktioniert, können Sie Funktionen hinzufügen, die die Benutzererfahrung erheblich verbessern.

Color-Coding-Ereignisse nach Typ

Erlauben Sie Benutzern, Kategorien zuzuweisen (z. B. Arbeit, Privatpersonen, Gesundheit). Speichern Sie ein -Feld im lokalen Speicher. Definieren Sie in CSS Klassen wie , und wenden Sie diese dynamisch an.

Drag-and-Drop Umschuldung

Verwenden Sie die HTML5-Drag-and-Drop-API, um Ereignisse zwischen Tageszellen zu verschieben.Wenn ein Ereignis an einem anderen Tag fallen gelassen wird, aktualisieren Sie den Datumsschlüssel in Local Storage: Entfernen Sie das Ereignis aus dem ursprünglichen Datums-Array und schieben Sie es in das neue Datums-Array.

Wiederkehrende Ereignisse (Wochen- / Monatsereignisse)

Wenn Sie ein Ereignis speichern, fügen Sie eine Option „Wiederholen hinzu. Berechnen Sie in der Ladefunktion, ob das aktuelle Datum mit der Regel für das Wiederauftreten übereinstimmt (z. B. jeden Montag) und zeigen Sie das Ereignis entsprechend an. Speichern Sie die Wiederauftretensregeln in einem separaten lokalen Speicherschlüssel, um Doppelungen zu vermeiden.

Wochenansicht und Mini-Kalender

Wechseln Sie zwischen Monats- und Wochenansichten. Eine Wochenansicht zeigt nur die aktuellen Wochentage mit mehr horizontalem Platz. Ein kleiner Monatsansicht-Minikalender hilft den Nutzern, schnell zu einem beliebigen Datum zu springen.

Den Kalender reaktionsschnell und zugänglich machen

Testen Sie den Kalender auf verschiedenen Bildschirmgrößen. Verwenden Sie -Abfragen, um Tagzellen vertikal auf sehr kleinen Bildschirmen zu stapeln oder die Polsterung zu reduzieren. Stellen Sie sicher, dass alle interaktiven Elemente auf der Tastatur zugänglich sind: Fügen Sie -Ereignisse für Enter und Escape an. Verwenden Sie -Attribute auf Schaltflächen und Live-Regionen für Bildschirmleser, um Monatsänderungen und Ereignisergänzungen anzukündigen.

Performance und Datenmanagement Tipps

  • Batched Storage Writes: Anstatt Local Storage für jede Ereignisoperation zu lesen/schreiben, zwischenspeichern Sie die Ereignisse des gesamten Monats in einem JavaScript-Objekt und ändern sich regelmäßig.
  • Limit Event Size: Halten Sie Ereignisobjekte klein. Vermeiden Sie es, große Strings oder binäre Daten zu speichern.
  • Fallback für Speicherlimits: Lokaler Speicher ist normalerweise auf 5-10 MB begrenzt.
  • Verwenden Sie IndexedDB für große Datensätze: Wenn Ihr Kalender Tausende von Ereignissen enthalten wird, sollten Sie IndexedDB für eine bessere Leistung und Abfragefunktionen in Betracht ziehen.

Schlussfolgerung

Das Erstellen einer benutzerdefinierten Kalender-App mit JavaScript und Local Storage ist ein lohnendes Projekt, das Ihre Front-End-Fähigkeiten schärft. Sie lernen, das DOM zu manipulieren, mit Daten zu arbeiten, den Zustand ohne Server zu verwalten und Benutzerinteraktionen zu handhaben. Die Codebasis kann mit Server-Synchronisierung, Cloud-Backup oder Integration mit externen Kalendern über die Google Kalender-API erweitert werden. Beginnen Sie mit dem Basisraster, fügen Sie Persistenz hinzu und schichten Sie dann Funktionen wie Drag-and-Drop und wiederkehrende Ereignisse ein. Das Ergebnis ist ein maßgeschneiderter Kalender, der sich genau so verhält, wie Sie ihn brauchen.

Für weitere Informationen, erkunden Sie die Speicher-API-Dokumentation und die Drang and Drop API auf MDN.