Creare un calendario

E’ il classico codice usato per la maggior parte dei calendari che si trovano in giro per il web, con qualche piccola modifica che ho introdotto per usare i fogli di stile. Questo permette, quando volete creare un nuovo calendario, di modificare poche righe raggruppate, invece di molte sparse per tutto il codice.
Quello che abbiamo è del codice html, un foglio di stile (le parti modificabili) e del codice javascript (che non va toccato a meno che non conosciate questo linguaggio e sappiate dove mettere le mani).

In rosso ho evidenziato le parti di html da modificare a seconda delle vostre esigenze.

Il primo valore che incontriamo, 250px, è la larghezza totale del nostro calendario, che corrisponde a quella dell’immagine da usare come sfondo.

I valori seguenti sono quelli che definiscono le dimensioni delle celle della tabella.

Nel nostro caso la prima cella è vuota poichè corrisponde alla parte alta del calendario, dove vogliamo avere solo l’immagine, mentre la seconda contiene il javascript. Questo a sua volta genera un’altra tabella divisa in varie celle, che contengono le date. L’altezza complessiva non deve naturalmente superare quella della nostra immagine di sfondo. Cambiando i valori dell’altezza della prima cella sposteremo in alto o in basso la posizione della tabella del datario. Fate un po’ di prove per vedere quali sono le dimensioni migliori.
Se vogliamo avere il datario in alto e l’immagine in basso, non dobbiamo fare altro
che invertire le righe della tabella. Avremmo in questo caso prima la riga con il codice javascript e poi quella vuota.

La parte evidenziata in verde è il foglio di stile. Vediamo uno per uno i vari stili.

body – è lo stile generale della pagina e quindi anche del calendario. Come prima cosa abbiamo il colore di sfondo. In generale non sarà poi visile, ma in genere io uso un colore che si armonizzi col calendario. Segue il font per il carattere. Ne vengono elencati tre, il primo è quello di default, il secondo quello usato nel caso il primo non fosse disponibile e il terzo quello usato se nè il primo nè il secondo sono presenti. Infine abbiamo le dimensioni del carattere.

table.main – qui abbiamo gli stili della tabella principale, quella che racchiude tutto il
calendario. Il primo attributo, border-collapse, permette semplicemente di avere un bordo unico per le celle adiacenti della tabella e in genere non serve modificarlo. Poi incontriamo l’attributo border, che regola le dimensioni del bordo della tabella; io in genere lo metto a zero perchè inserisco il bordo direttamente sull’immagine, ma non è obbligatorio. Abbiamo poi le dimensioni totali della tabella, che saranno uguali a quelle della nostra immagine, e infine il comando che richiama l’immagine e la imposta come sfondo.

table.calendar – stili per la tabella del datario, quella che nel nostro caso è contenuta nella seconda cella della tabella globale. Qua definiamo larghezza e altezza del datario, le dimensioni e il colore del carattere delle date.

.days – qui definiamo lo stile per il nome dei giorni. Ho pensato di inserire un’impostazione a parte per i giorni perchè per loro potremmo volere un aspetto diverso dal resto del datario. Nel nostro caso infatti il colore è diverso da quello delle date e il testo è scritto in grassetto. Quest’ultima caratteristica è impostata tramite l’attributo font-weight:bold. Se non volessimo il testo in grassetto potremmo scrivere normal al post di bold o semplicemente cancellare la riga.

.today – abbiamo infine gli stili per la data attuale. Qui ho definito solo il colore del testo e ho specificato che debba essere in grassetto, ma potremmo aggiungere anche altri stili. Ad esempio potremmo volere che il testo abbia lo stesso colore del resto del datario, ma che la cella che lo contiene abbia un colore di sfondo, in modo da evidenziare comunque la data attuale. In questo caso non dovremmo fare altro che aggiungere la riga
background-color: colore_scelto.