Creare un calendario in JavaScript

La creazione di un calendario personalizzato può essere una sfida interessante e formativa per chiunque si avvicini al mondo dello sviluppo web con JavaScript. Un calendario dinamico non solo richiede una manipolazione efficace delle date, ma anche un'interfaccia utente reattiva che possa interagire con l'utente. Questa guida illustrerà come creare un calendario mensile in JavaScript, dal calcolo delle date alla costruzione di un'interfaccia utente semplice ma funzionale.

Comprendere le basi

JavaScript offre l'oggetto Date, che sarà fondamentale nella costruzione del nostro calendario. Per iniziare, dobbiamo comprendere come determinare il giorno della settimana del primo giorno di un mese e il numero totale di giorni in un mese. Queste informazioni ci permetteranno di costruire la struttura del nostro calendario.

Calcolare il primo giorno del mese

Per determinare il giorno della settimana con cui inizia un mese, possiamo usare l'oggetto Date di JavaScript, impostando il giorno su 1 e il mese e l'anno desiderati:

function primoGiornoMese(anno, mese) {
	return new Date(anno, mese, 1).getDay();
}

Determinare il numero di giorni in un mese

Il numero di giorni in un mese può variare; perciò, è utile avere una funzione che ci fornisca questa informazione:

function giorniMese(anno, mese) {
	return new Date(anno, mese + 1, 0).getDate();
}

Creare la struttura del calendario

Con le informazioni su quando inizia il mese e quanti giorni contiene, possiamo costruire la struttura del nostro calendario. Creeremo una tabella HTML dinamicamente con JavaScript, dove ogni cella rappresenta un giorno del mese.

function creaCalendario(anno, mese) {
	const primoGiorno = primoGiornoMese(anno, mese);
	const giorniInMese = giorniMese(anno, mese);

	// Creazione dell'elemento tabella
	const table = document.createElement('table');
	let day = 1;

	for (let i = 0; i < 6; i++) { // 6righe per coprire tutti i giorni
		const row = table.insertRow();
		for (let j = 0; j < 7; j++) { // 7 giorni della settimana
			if (i === 0 && j < primoGiorno) {
				row.insertCell().innerText = ''; // Celle vuote fino all'inizio del mese
			} else if (day > giorniInMese) {
					break; // Interrompe il ciclo una volta riempito l'ultimo giorno del mese
			} else {
				row.insertCell().innerText = day++; // Aggiunge il giorno al calendario
			}
		}
	}
	
	document.body.appendChild(table); // Aggiunge il calendario al documento
	aggiungiNomeMese(table, anno, mese);
	aggiungiNomeGiorno(table);
}

Stile del calendario

Per rendere il nostro calendario più gradevole e leggibile, possiamo aggiungere alcuni stili CSS. Questo può essere fatto direttamente in JavaScript o definendo una classe CSS e aggiungendola alla nostra tabella:

table {
	width: 100%;
	border-collapse: collapse;
}

td, th {
	border: 1px solid #ddd;
	text-align: center;
	padding: 8px;
}

Aggiungere intestazioni dei giorni

Per rendere il calendario ancora più chiaro, possiamo aggiungere una riga all'inizio della nostra tabella per indicare i giorni della settimana:

function aggiungiNomeGiorno(table) {
	const days = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
	const header = table.createTHead();
	const row = header.insertRow();
	
	for (let day of days) {
		const cell = row.insertCell();
		cell.innerText = day;
	}
}

Aggiungere nome del mese

Per aggiungere il nome del mese visualizzato, possiamo aggiungere una riga contenente le iniziali o il nome nome completo del mese:

function aggiungiNomeMese(table, anno, mese){
	const mesi = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'];
		const header = table.createTHead();
		const nome = header.insertRow();
		nome.insertCell().innerText = mesi[mese] + ' - ' + anno;
		nome.children[0].id = "nome_mese";
		document.getElementById("nome_mese").colSpan = "7"
}

Risultato

Se uniamo tutte le componenti e chiamiamo la funzione creaCalendario, passando come parametri l’anno ed il mese desiderato, otteniamo un calendario funzionante. Ad esempio con creaCalendario(2024, 3), otteniamo il seguente calendario:

Considerazioni finali

La creazione di un calendario in JavaScript è un ottimo esercizio per familiarizzare con la manipolazione delle date e la manipolazione del DOM. Da qui, le possibilità di espansione sono numerose: aggiungere funzionalità per cambiare mese, evidenziare eventi specifici, o integrare il calendario con altre API per creare applicazioni ancora più complesse e interattive.

Ricordate, la chiave per costruire applicazioni web efficaci sta nella sperimentazione e nell'apprendimento continuo.