I calendari sono diventati una parte indispensabile delle moderne applicazioni web poiché consentono agli utenti di organizzare, pianificare e tenere traccia degli eventi in modo fluido. Che tu stia costruendo uno strumento di gestione dei progetti, un’app per la pianificazione degli eventi o una suite di produttività personale, un componente di calendario personalizzato può notevolmente migliorare l’esperienza dell’utente. Mentre esistono numerose librerie di calendari predefinite, la creazione del proprio componente può offrire la flessibilità per soddisfare specifici requisiti di design e funzionalità.
In questo tutorial, esploreremo come creare un componente simile a Google Calendar utilizzando JavaScript. Alla fine di questa guida, avrai un calendario completamente funzionale con funzionalità interattive e una comprensione più approfondita su come costruire componenti riutilizzabili per le tue applicazioni web. Che tu sia uno sviluppatore che vuole aggiungere un tocco unico al tuo progetto o qualcuno desideroso di apprendere il funzionamento interno delle funzionalità del calendario, questa guida passo dopo passo sarà preziosa. Cominciamo!
Panoramica
Crealeremo un componente di calendario con le seguenti caratteristiche:
- Asse Orario: Una timeline verticale dalle 12:00 AM alle 11:00 PM.
- Blocchi Evento: Eventi renderizzati dinamicamente con posizionamento e altezza corretti in base all’ora di inizio e fine.
- Gestione Sovrapposizione: Gli eventi che si sovrappongono nel tempo appariranno affiancati.
Ecco come puoi creare questo componente passo dopo passo.
Guida Passo dopo Passo
1. Imposta l’HTML e Stili di Base
Iniziamo creando una struttura HTML minima per il calendario. Il layout include una timeline e un contenitore per gli eventi.
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
Aggiungi CSS di base per lo stile del calendario:
.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. Crea la Classe JavaScript per il Calendario
Definisci una classe Calendar per racchiudere tutte le funzionalità.
Costruttore
Il costruttore inizializza il calendario rendendo la timeline e gli eventi:
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. Gestisci le Sovrapposizioni di Eventi e il Posizionamento
Abbiamo bisogno di una logica per gestire eventi sovrapposti. Questo si ottiene raggruppando e calcolando posizioni appropriate.
Raggruppa gli Eventi per Ore di Inizio
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;
}
Calcola gli Stili degli Eventi
Per ogni gruppo, calcola il top, height, width e left dell’evento in base al tempo e alla sovrapposizione.
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. Dati di Esempio e Inizializzazione
Definisci i tuoi dati sugli eventi e inizializza il 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. Esempio di Codice Completo
<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>
Conclusione
Questo approccio utilizza JavaScript puro per generare dinamicamente un componente simile a Google Calendar. Suddividendo il problema in rendering temporale, raggruppando eventi e calcolando stili, è possibile creare componenti scalabili e interattivi. Puoi sperimentare il codice per aggiungere funzionalità come eventi trascinabili o stili aggiuntivi!
Source:
https://dzone.com/articles/building-a-google-calendar-like-component-using-javascript