Kalenders zijn een onmisbaar onderdeel geworden van moderne webapplicaties, omdat ze gebruikers in staat stellen om evenementen naadloos te organiseren, in te plannen en bij te houden. Of je nu een projectmanagementtool, een evenementplanning-app of een persoonlijke productiviteits-suite bouwt, een op maat gemaakt kalendercomponent kan de gebruikerservaring aanzienlijk verbeteren. Hoewel er talloze kant-en-klare kalenderbibliotheken bestaan, kan het maken van je eigen component de flexibiliteit bieden om aan specifieke ontwerp- en functionaliteitseisen te voldoen.
In deze tutorial zullen we verkennen hoe we een component vergelijkbaar met Google Calendar kunnen bouwen met JavaScript. Aan het einde van deze gids heb je een volledig functionele kalender met interactieve functies en een dieper begrip van hoe je herbruikbare componenten voor je webapplicaties kunt construeren. Of je nu een ontwikkelaar bent die een unieke touch aan je project wil toevoegen of iemand die graag de werking van kalenderfunctionaliteiten wil leren, deze stapsgewijze handleiding zal van onschatbare waarde zijn. Laten we aan de slag gaan!
Overzicht
We gaan een kalendercomponent maken met de volgende functies:
- Tijdas: Een verticale tijdlijn van 12 uur ’s nachts tot 11 uur ’s avonds.
- Evenementblokken: Dynamisch weergegeven evenementen met de juiste positionering en hoogte op basis van hun start- en eindtijden.
- Overlapverwerking: Evenementen die in de tijd overlappen, zullen naast elkaar verschijnen.
Hier is hoe je dit component stap voor stap kunt maken.
Stap-voor-stap gids
1. Stel de HTML en Basisstijlen in
We beginnen met het maken van een minimale HTML-structuur voor de kalender. De lay-out omvat een tijdlijn en een container voor gebeurtenissen.
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
Voeg basis CSS toe voor het stylen van de kalender:
.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. Maak de JavaScript-klasse voor de Kalender
Definieer een Calendar klasse om alle functionaliteit te omvatten.
Constructor
De constructor initialiseert de kalender door de tijdlijn en gebeurtenissen te renderen:
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. Behandel Gebeurtenisoverlappingen en Positionering
We hebben logica nodig om overlappende gebeurtenissen te behandelen. Dit wordt bereikt door groeperen en het berekenen van passende posities.
Groepeer Gebeurtenissen per Startuur
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;
}
Bereken Gebeurtenisstijlen
Voor elke groep, bereken de ’top’, ‘height’, ‘width’ en ‘left’ van de gebeurtenis op basis van tijd en overlapping.
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. Voorbeeldgegevens en Initialisatie
Definieer jouw gebeurtenisgegevens en initialiseer de 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. Volledig Voorbeeldcode
<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>
Conclusie
Deze benadering gebruikt gewone JavaScript om dynamisch een component te genereren dat lijkt op Google Agenda. Door het probleem op te splitsen in het weergeven van tijd, het groeperen van evenementen en het berekenen van stijlen, kun je schaalbare, interactieve componenten bouwen. Je kunt experimenteren met de code om functies toe te voegen zoals versleepbare evenementen of extra stijlen!
Source:
https://dzone.com/articles/building-a-google-calendar-like-component-using-javascript