Lo script che presentiamo serve a inserire un calendario mensile nelle pagine del nostro sito. La visualizzazione dell'esempio allegato renderà subito evidente il formato, tradizionale, generato dal codice Javascript. Il calendario può essere facilmente personalizzato nell'aspetto per adattarlo alla grafica del sito grazie al supporto dei CSS. È stato adattato rispetto all'originale (in inglese) per usare il formato di data italiano, con il lunedì come primo giorno della settimana.
Lo script è costituito da uno file esterno in formato .js (basiccalendar.js), da una sezione Javascript da inserire nella sezione <head></head> della pagina, da una parte CSS nella stessa sezione, da un'altra sezione Javascript da incorporare direttamente nel corpo della pagina.
- esempio.htm
## 1: IL FILE 'BASICCALENDAR.JS'
Il file 'basiccalendar.js' è il cuore dello script, contiene tutte le funzioni fondamentali per la generazione del calendario. Essendo già stato riadattato per supportare il formato di data italiano, va lasciato intatto. L'unica operazione da compiere è collegarlo alla pagina nel modo consueto per i Javascript esterni:
<script type="text/javascript" src="basiccalendar.js"></script>
## 2: LA SEZIONE CSS
All'interno della sezione <head></head> trova posto anche una parte CSS. Contiene una serie di classi che gestiscono la formattazione delle varie parti del calandario: colori, sfondi, font. Le regole possono essere ovviamente modificate, badando però a non modificare il nome delle classi, che dovrebbero pertanto rimanere: .main, .month, .daysofweek, .days, ,days #today.
## 3: LA SEZIONE JAVASCRIPT
L'implementazione dello script prevede un ultimo passo. Nel corpo della pagina, nel punto esatto in cui vogliamo far comparire il calendario, inseriremo queste poche righe di Javascript:
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth,curyear, "main", "month", "daysofweek", "days", 1));
</script>
Le prime 3 variabili servono a identificare e costruire la data corrente scomposta nei suoi componenti di base: giorno, mese, anno. L'istruzione document.write è quella che provvede alla scrittura nella pagina del calendario. Contiene un richiamo alla funzione 'buildCal'. È possibile passare una serie di parametri. Il primo è relativo all mese che si intende visualizzare. Nell'esempio il valore è quello della variabile 'curmonth', che restituisce il mese corrente. Volendo però, si può inserire un altro mese: basterà sostituire 'curmonth' con la cifra indicativa del mese. Per visualizzare il mese di luglio, ad esempio, si userà il valore 7. Analogo discorso si può fare per il secondo parametro, che riguarda l'anno. Gli altri 4 parametri, quelli racchiusi tra i doppi apici, fanno riferimento alle classi CSS viste sopra: vanno lasciati intatti. L'ultimo serve a impostare il bordo tra le celle della tabella. Usando 0 il bordo non sarà presente.
