Kalender sind ein unverzichtbarer Bestandteil moderner Webanwendungen, da sie es den Benutzern ermöglichen, Ereignisse nahtlos zu organisieren, zu planen und zu verfolgen. Egal, ob Sie ein Projektmanagement-Tool, eine Veranstaltungsplanungs-App oder eine persönliche Produktivitäts-Suite erstellen, eine benutzerdefinierte Kalenderkomponente kann das Benutzererlebnis erheblich verbessern. Während es zahlreiche vorgefertigte Kalenderbibliotheken gibt, kann die Erstellung Ihrer eigenen Komponente die Flexibilität bieten, spezifische Design- und Funktionalitätsanforderungen zu erfüllen.
In diesem Tutorial werden wir untersuchen, wie man eine Google Kalender-ähnliche Komponente mit JavaScript erstellt. Am Ende dieses Leitfadens haben Sie einen voll funktionsfähigen Kalender mit interaktiven Funktionen und ein tieferes Verständnis dafür, wie man wiederverwendbare Komponenten für Ihre Webanwendungen konstruiert. Egal, ob Sie ein Entwickler sind, der Ihrem Projekt eine einzigartige Note verleihen möchte, oder jemand, der daran interessiert ist, die Funktionsweise von Kalenderfunktionen zu erlernen, dieser Schritt-für-Schritt-Leitfaden wird von unschätzbarem Wert sein. Lassen Sie uns anfangen!
Überblick
Wir werden eine Kalenderkomponente mit den folgenden Funktionen erstellen:
- Zeitachse: Eine vertikale Zeitleiste von 12 Uhr bis 23 Uhr.
- Ereignisblöcke: Dynamisch gerenderte Ereignisse mit richtiger Positionierung und Höhe basierend auf ihren Start- und Endzeiten.
- Überlappungsbehandlung: Zeitlich überlappende Ereignisse erscheinen nebeneinander.
So können Sie diese Komponente Schritt für Schritt erstellen.
Schritt-für-Schritt-Anleitung
1. Richten Sie das HTML und die grundlegenden Stile ein
Wir beginnen mit der Erstellung einer minimalen HTML-Struktur für den Kalender. Das Layout umfasst eine Zeitleiste und einen Container für Veranstaltungen.
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
Fügen Sie grundlegendes CSS für die Gestaltung des Kalenders hinzu:
.calendar {
display: flex;
width: 500px;
margin: 20px auto;
position: relative;
}
.event {
background: #039be5;
border: 1px solid white;
border-radius: 5px;
position: absolute;
box-sizing: border-box;
color: white;
overflow: hidden;
padding: 3px;
}
.calendar-time {
border-right: 1px solid #ccc;
width: 100px;
}
.calendar-timelist {
list-style: none;
padding: 0;
margin: 0;
text-align: right;
padding-right: 20px;
}
.calendar-timelist li {
height: 60px;
box-sizing: border-box;
width: 100%;
}
.calendar-events {
flex-grow: 1;
position: relative;
}
2. Erstellen Sie die JavaScript-Klasse für den Kalender
Definieren Sie eine Calendar-Klasse, um alle Funktionalitäten zu kapseln.
Konstruktor
Der Konstruktor initialisiert den Kalender, indem er die Zeitleiste und die Veranstaltungen rendert:
class Calendar {
constructor(data) {
// Render the timeline on the Y-axis
this.renderTime();
// Render the event blocks
this.renderEvents(data);
}
renderTime() {
let timeHTML = Array.from({ length: 24 }, (_, i) => `<li>${this.to12HourFormat(i)}</li>`).join("");
document.getElementById("timelist").innerHTML = timeHTML;
}
renderEvents(data) {
let groupedEvents = this.groupEvents(data);
let eventData = this.calculateEventStyles(groupedEvents);
let eventHTML = eventData
.map(
(e) =>
`<div class="event" style="top: ${e.top}px; height: ${e.height}px; width: ${e.width}%; left: ${e.left}%; z-index: ${e.zIndex};">
<strong>${e.title}</strong><br>${e.time}
</div>`
)
.join("");
document.getElementById("events").innerHTML = eventHTML;
}
to12HourFormat(hour) {
if (hour === 0) return "12 AM";
if (hour < 12) return `${hour} AM`;
if (hour === 12) return "12 PM";
return `${hour - 12} PM`;
}
}
3. Behandeln Sie Überlappungen von Veranstaltungen und Positionierung
Wir benötigen Logik, um überlappende Veranstaltungen zu behandeln. Dies wird erreicht, indem Gruppen gebildet und geeignete Positionen berechnet werden.
Gruppieren Sie Veranstaltungen nach Startzeit
groupEvents(data) {
let groups = [];
data.forEach((event) => {
let hour = parseInt(event.start.split(":")[0], 10);
if (!groups[hour]) groups[hour] = [];
groups[hour].push(event);
});
return groups;
}
Berechnen Sie die Veranstaltungsstile
Für jede Gruppe berechnen Sie die top, height, width und left der Veranstaltung basierend auf Zeit und Überlappung.
calculateEventStyles(groups) {
let eventData = [];
groups.forEach((group) => {
let columns = [];
group.forEach((event) => {
let { start, end } = event;
let [sh, sm] = start.split(":").map(Number);
let [eh, em] = end.split(":").map(Number);
let top = sh * 60 + sm; // Convert start time to minutes
let height = (eh * 60 + em) - top; // Calculate duration in minutes
let left = columns.findIndex((col) => col.end <= start);
if (left === -1) {
left = columns.length;
columns.push({ end });
} else {
columns[left].end = end;
}
eventData.push({
title: event.name,
time: `${this.to12HourFormat(sh)} - ${this.to12HourFormat(eh)}`,
top,
height,
left: (left * 100) / columns.length,
width: 100 / columns.length,
zIndex: left,
});
});
});
return eventData;
}
4. Beispieldaten und Initialisierung
Definieren Sie Ihre Veranstaltungsdaten und initialisieren Sie den Calendar:
const events = [
{ name: "Meeting with Donna", start: "09:00", end: "10:30" },
{ name: "Project Sync", start: "10:00", end: "11:00" },
{ name: "Lunch Break", start: "12:00", end: "13:00" },
{ name: "Client Call", start: "11:30", end: "12:30" },
];
new Calendar(events);
5. Vollständiges Codebeispiel
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Calendar Component</title>
</head>
<body>
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Fazit
Dieser Ansatz verwendet reinen JavaScript, um dynamisch eine Komponente ähnlich dem Google Kalender zu generieren. Indem man das Problem in Rendierungszeit, Gruppierung von Ereignissen und Berechnung von Stilen aufteilt, kann man skalierbare, interaktive Komponenten erstellen. Sie können mit dem Code experimentieren, um Funktionen wie verschiebbare Ereignisse oder zusätzliche Stile hinzuzufügen!
Source:
https://dzone.com/articles/building-a-google-calendar-like-component-using-javascript