Lo script che presentiamo crea un calendario, semplice ed elegante, che mostra i giorni del mese corrente. Con un menu drop-down è poi possibile cambiare il mese visualizzato.
Il codice è molto semplice da configurare e non richiede particolari modifiche. Utilizzando i CSS si può cambiare facilmente l'aspetto grafico.
Lo script è perfettamente compatibile con Explorer 5.x, Netscape 6.x e Mozilla. Con Navigator 4.x, invece, il menu drop-down non funziona corretamente, ma è possibile comunque visualizzare il calendario con il mese corrente.
- esempio.htm
- basiccalendar.js
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo i fogli di stile tra i tag <head> della pagina:
<style type="text/css">
<!--
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
-->
</style>
Con questo codice possiamo personalizzare le regole CSS per cambiare tutti gli aspetti visuali del calendario.
La classe "main" determina lo stile della tabella principale:
.main {
width:200px;
border:1px solid black;
}
Con "month" impostiamo lo stile della cella contente l'indicazione del mese e dell'anno:
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
Nella classe "daysofweek" determiniamo, invece, lo stile delle celle contenenti l'indicazione dei giorni della settimana:
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
Con classe "days", poi, impostiamo lo stile delle celle contenenti i singoli giorni del mese:
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
Infine, grazie alla sottoclasse "days #today" possiamo dare uno stile differente al giorno corrente:
.days #today{
font-weight: bold;
color: red;
}
Sempre tra i tag <head>, subito dopo i CSS, inseriamo il seguente codice:
<script type="text/javascript" src="basiccalendar.js">
<!--
/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//-->
</script>
Questo codice, oltre a mostrare le informazioni sul copyright, richiama anche il file esterno "basiccalendar.js". Deve essere lasciato così.
Dobbiamo, ovviamente, copiare il file "basiccalendar.js" nella stessa directory del nostro file html (oppure cambiare il percorso nell'attributo src del tag <script>).
All'interno della pagina, nel punto in cui vogliamo far apparire il calendario, dobbiamo ora inserire il codice che lo richiama. Viene utilizzata allo scopo una sola funzione:
buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1)
Il primo parametro imposta il mese che vogliamo visualizzare (1=gennaio e 12=dicembre).
Il secondo parametro imposta l'anno che vogliamo visualizzare.
Dal parametro 3 al parametro 6 vengono passati i nomi delle classi CSS che determinano lo stile del calendario.
L'ultimo parametro, infine, imposta il bordo tra le celle (0=nessun bordo).
La funzione "bulidCal()" restituisce la stringa che costruisce il calendario. Occorre invocare "document.write()" per poterla inserire nella pagina:
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
Se, per esempio, vogliamo visualizzare soltanto il mese corrente, ci basta inserire all'interno della pagina questo codice HTML:
<script type="text/javascript">
<!--
var todaydate=new Date() // giorno corrente
var curmonth=todaydate.getMonth()+1 // mese corrente (1-12)
var curyear=todaydate.getFullYear() // anno corrente
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
//-->
</script>
La prima parte dello script determina giorno, mese e anno correnti. Viene poi richiamata la funzione "buildCal()".
È possibile anche mostrare contemporaneamente più calendari, con mesi differenti. Ad esempio possiamo mostrare il mese precedente, quello presente e quello futuro.
Possiamo, poi, anche richiamare dinamicamente il mese da visualizzare. Il seguente script, per esempio, utilizza un menu drop-down per cambiare il mese.
Questo codice va inserito all'interno dei tag <body>, al posto del codice precedente:
<form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
<!--
var themonths=['January','February','March','April','May','Junè,'July',
'August','September','October','November','December']
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 // mese corrente (1-12)
var curyear=todaydate.getFullYear() // anno corrente
function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek",
"days", 0)
if (document.getElementById)
document.getElementById("calendarspace").innerHTML=calendarstr
}
document.write('<option value="'+(curmonth-1)+'"
selected="yes">Current Month</option>')
for (i=0; i<12; i++) // mostra i tag option per i 12 mesi dell'anno
document.write('<option value="'+i+'">'+themonths[i]+'
'+curyear+'</option>')
//-->
</script>
</select>
<div id="calendarspace">
<script type="text/javascript" language="javascript">
<!--
// all'inzio richiama il mese corrente
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek",
"days", 0))
//-->
</script>
</div>
</form>
Altre modifiche non sono necessarie.
