Het bouwen van een aangepaste agendatoepassing is een uitstekende manier om uw begrip van JavaScript, de browser Document Object Model (DOM) en client-side data persistentie te verdiepen. Door gebruik te maken van de Web Storage API . Meer bepaald Lokale Opslag .. kunt u een volledig functionele, event-gedreven agenda die volledig draait in de browser zonder dat er een backend server of database nodig is. Deze tutorial loopt u door elke stap, van het structureren van de HTML tot het implementeren van geavanceerde functies zoals drag-and-drop event management.

Waarom een aangepaste agenda bouwen?

Voorgebouwde agendabibliotheken (zoals FullCalendar of DayPilot) bieden snelle oplossingen, maar het bouwen van een van nul geeft je volledige controle over de gebruikersinterface, data handling en prestaties. Je krijgt ook hands-on ervaring met kernconcepten als het object, evenementdelegatie en de API. De resulterende app kan worden uitgebreid tot een projectmanagementtool, een boekingssysteem of een persoonlijk journaal.

De HTML-structuur instellen

Begin met een schoon HTML-skelet. De agenda heeft drie hoofdcomponenten nodig: een navigatiebalk (voor het wisselen van maanden), een roostercontainer (voor dagcellen) en een evenementinvoerformulier. Gebruik elementen met semantische klassenamen voor het eenvoudig stylen en scripten.

<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>

Het zal dynamisch worden bevolkt door JavaScript. Voor een mobiele-vriendelijke lay-out, overwegen gebruik te maken van een 7-kolom CSS-raster (één voor elke dag van de week). Reserveer de eerste rij voor dagnamen (Sun

De agenda stylen met CSS

Clean, responsive CSS transformeert de ruwe HTML in een bruikbare interface. Gebruik een CSS-raster voor het agendaraster, instelling . Voeg spacers toe voor dagen voor de eerste maand. Zorg voor voldoende kleurcontrast en neem stijlen op interactieve elementen. Hieronder wordt een minimale stylesheet getoond (inline of gekoppeld).

.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;
}

Gebruik media-queries om de celgrootte te verminderen op smalle schermen, en overweeg verbergen gebeurtenis tekst en tonen slechts een telling.

Kern JavaScript: het kalenderraster aanmaken

Alle dynamische rendering leeft in JavaScript. De centrale functie, , berekent de eerste dag van de maand en het totale aantal dagen. Gebruik ] om de weekdagindex (0 = zondag) te krijgen. Genereer dan cellen in een lus van 1 tot de laatste dag van de maand.

Werken met het datumobject

Het object is de ruggengraat van de kalenderlogica. Om de laatste dag van een maand te krijgen, gebruik (dag 0 van de volgende maand geeft de laatste dag van de huidige maand). Bewaar de huidige maand en het jaar in globale variabelen zodat navigatie ze kan bijwerken.

Het bouwen van het raster

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);
 }
}

Het maand/jaarscherm in de koptekst bijwerken:

Voeg klik toe aan de knoppen Vorige en Volgende. Increment of decrement , het jaar aanpassen indien nodig (bijvoorbeeld na december komen tot januari volgend jaar). Na het bijwerken van de variabelen, bel opnieuw.

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();
});

Voor extra bruikbaarheid, voeg een Vandaag knop toe die het uitzicht opnieuw instelt naar de huidige maand en de huidige dag markeert.

Opslaan en ophalen van evenementen met lokale opslag

Lokale opslag biedt een eenvoudige sleutelwaardeopslag die de browser herstart. Gebruik een consistent sleutelpatroon, bijvoorbeeld , waarbij JSON-arrays van gebeurtenisobjecten worden opgeslagen. Voeg eigenschappen toe zoals , , , en .

Een nieuwe gebeurtenis opslaan

Wanneer de gebruiker op de knop .Opslaan , neem de invoerwaarde en de momenteel geselecteerde datum . (U kunt een datum picker of detecteren welke dag cel wordt geklikt .) Ophalen van bestaande gebeurtenissen voor die datum uit lokale opslag , duw de nieuwe gebeurtenis , dan opslaan .

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
}

Gebeurtenissen in dagcellen laden

Binnen , voor elke niet-lege dagcel, een functie aanroepen die lokale opslag voor die datumsleutel query's. Als er gebeurtenissen bestaan, lus door hen en voeg elementen toe aan de cel.

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);
 });
}

Gebeurtenissen verwijderen en bewerken

Om te verwijderen, voeg een klik-gebeurtenis toe aan elk gebeurtenis-element (of gebruik evenementdelegatie). Ophalen van de array voor die datum, filteren van de gebeurtenis door de , en sla de bijgewerkte array terug naar lokale opslag. Bewerken kan worden gedaan door dubbelklikken op de gebeurtenis, vragen om nieuwe tekst, en het bijwerken van de array.

Geavanceerde functies om de functionaliteit te verbeteren

Zodra de basiskalender werkt, kunt u functies toevoegen die de gebruikerservaring aanzienlijk verbeteren.

Color-Coding-evenementen per type

Gebruikers toestaan categorieën toe te wijzen (bv. werk, persoonlijke gezondheid). Bewaar een veld in Lokale Opslag. In CSS, definieer klassen zoals , en pas ze dynamisch toe.

Versleep- en neergangsherstelling

Gebruik de HTML5 Drag and Drop API om gebeurtenissen tussen dagcellen te verplaatsen. Wanneer een gebeurtenis op een andere dag wordt gedropt, wordt de datumsleutel in Local Storage bijgewerkt: verwijder de gebeurtenis van de oorspronkelijke datumreeks en duw deze naar de nieuwe datumreeks.

Terugkerende gebeurtenissen (Weekly / Monthly)

Voeg een optie .Repeat . bij het opslaan van een gebeurtenis. In de laadfunctie, berekenen of de huidige datum overeenkomt met de recurrent regel (bijvoorbeeld elke maandag) en het evenement dienovereenkomstig weergeven. Opslaan van de regels voor herhaling in een aparte lokale opslag sleutel om duplicatie te voorkomen.

Weekweergave en minikalender

Schakel tussen maand- en weekweergaven in. Een weekweergave toont alleen de huidige weekdagen met meer horizontale ruimte. Een kleine maand-view minikalender helpt gebruikers snel naar elke datum te springen.

Het maken van de kalender Responsief en Toegankelijk

Test de agenda op verschillende schermgroottes. Gebruik queries om dagcellen verticaal op zeer kleine schermen te stapelen of om de opvulling te verminderen. Zorg ervoor dat alle interactieve elementen toetsenbord-toegankelijk zijn: voeg gebeurtenissen voor Enter en Escape toe. Gebruik attributen op knoppen en live-gebieden om schermlezers maandwijzigingen en gebeurtenissentoe te kondigen.

Tips voor prestaties en gegevensbeheer

  • Batched Storage Writes: In plaats van het lezen/schrijven van Lokale Opslag voor elke activiteit, cache de hele maand gebeurtenissen in een JavaScript object en flush wijzigingen periodiek.
  • Limit Event Size: Houd gebeurtenis objecten klein. Vermijd het opslaan van grote strings of binaire gegevens.
  • Terugval voor opslaglimieten: Lokale opslag wordt meestal afgesloten op 5
  • Gebruik geïndexeerdeDB voor grote gegevenssets: Als uw agenda duizenden gebeurtenissen zal houden, overwegen IndexedDB voor betere prestaties en zoekmogelijkheden.

Conclusie

Het creëren van een aangepaste agenda-app met JavaScript en Lokale Opslag is een lonend project dat uw front-end vaardigheden scherpt. U leert de DOM te manipuleren, met data te werken, status zonder server te beheren en gebruikersinteracties te verwerken. De codebase kan worden uitgebreid met serversynchronisatie, cloud back-up of integratie met externe agenda's via de Google Calendar API. Beginnen met het basisraster, doorzetting toevoegen en vervolgens laag op functies zoals drag-and-drop en terugkerende gebeurtenissen. Het resultaat is een op maat gemaakte kalender die precies handelt hoe je het nodig hebt.

Voor verdere lezing, verken de Storage API documentatie en de Sleep en val API op MDN. Gelukkige codering!