======== Premessa ========
Chi di noi non ha mai desiderato realizzare un calendario per la propria paginetta?
Certo, é molto più semplice e più "accessibile" realizzare un calendario lato server(visualizzabile anche con JS disattivato), ma volete mettere la soddisfazione di bighellonare a zonzo tra i mesi e gli anni, senza l'incubo di ricaricare la pagina!

Così la scelta più sensata appare javascript.

Ho cercato sul sito, ed ho trovato qualcosa di molto interessante , ma un po troppo "macchinoso". Risultato: bassa compatibilità con i browser alternativi e nulla con quelli datati.

Così cho trovato uno script tra gli articoli di HTML.it che faceva al caso mio. Ci sono alcuni errori e rattoppi, ma é una buona base.
---- I suoi vantaggi: ----
[list=1][*]Compatibilità con Explorer, Netscape, Opera, Mozilla[*]Compatibilità con le versioni datate (testato su NS 3.0)[*]Assenza di tabelle (per la felicità dgli estremisti del CSS)[/list=1]

Basta chiacciere: Andiamo sul codice.

1)==== Recuperiamo la data ====
A) Il codice in javascript:
codice:
var now = new Date(); var anno = now.getYear(); var mese = now.getMonth(); var giorno = now.getDate();
if ( now.getYear()<500 ) {anno = now.getFullYear() };
B) Il codice in PHP:
codice:
var anno=<?php echo date('Y'); ?>; var mese=<?php echo date('m')-1; ?>; var giorno=<?php echo date('d')+0; ?>;
C) Il codice in PHP:
codice:
var anno=<%=year(now)%>; var mese=<%=month(now)-1%>;  var giorno=<%=day(now)%>;
---- Spiegazioni ----
Il codice javascript (1A) recupera la data del client (pc locale).
Consiglio di usarlo solo se non si dispone di un server con compilatre ASP o PHP.
Con getYear Mozilla e Opera restituiscono l'anno a 3 cifre (105 per l'anno 2005): é un arrangiamento del vecchio anno a 2 cifre adattato per funzionare anche dopo il millennio.
Ecco il motivo della seconda riga: serve a recuperare la giusta data (2005).
Ho dovuto inserirlo perchè i vecchi browser non conoscono il significato di getFullYear. In questo caso, getFullYear viene attivato solo se la data ha un valore inferiore a 500.

Per essere certi che la data sia giusta consiglio di utilizzare il linguaggio lato server; sarà l'unica stringa ad utilizzarlo(per il calendario base).

ASP (1C) non ha particolari problemi, in quanto restituisce giorno e mese in forma numerica (senza lo zero avanti), mentre in PHP (1B)bisogna eliminare il fastidioso zero; numma di più semplice di un'operazione algebrica (giorno)+0. Per il mese la procedura é necessaria in quanto in javascript gennaio viene interpretato come mese0.

3)==== (funzione)quanti giorni in un mese ====
codice:
function GiorniAlMese(mese,anno)  {
var days;
if (mese==0 || mese==2 || mese==4 || mese==6 || mese==7 || mese==9 || mese==11)  days=31;
else if (mese==3 || mese==5 || mese==8 || mese==10) days=30;
else if (mese==1) days=28;
return (days);
}
Ricordandoci che gennaio = 0, settiamo di quanti giorni é composto il mese. Unico neo, é febbraio (mese 1) nell'anno bisestile; per questo ci avvaleremo di un'altra funzione:
codice:
function Bisestile(anno) {
if (((anno % 4)==0) && ((anno % 100)!=0) || ((anno % 400)==0)) return (1);
else return (0);
}
una formula matematica che verificherà (e restituirà 1) che l'anno corrente sia bisestile.

A questo punto perfezioniamo la funzione GiorniAlMese:
codice:
function GiorniAlMese(mese,anno)  {
var days;
if (mese==0 || mese==2 || mese==4 || mese==6 || mese==7 || mese==9 || mese==11)  days=31;
else if (mese==3 || mese==5 || mese==8 || mese==10) days=30;
else if (mese==1)  { if (Bisestile(anno)==1)  days=29; else days=28; }
return (days);
}
4)==== Visualizziamo il modulo ====
codice:
<form name="calendario">
<input type="button" value="Do" ><input type="button"  value="Lu" ><input type="button" value="Ma"><input type="button" value="Me"><input type="button" value="Gi"><input type="button" value="Ve"><input type="button" value="Sa">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

<input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button"><input type="button">

</form>
E' unsemplice modulo pieno di pulsanti in fila per 7 che accoglieranno il valore restituito dallo script.

Il risultato é un po' rozzo; ora bisogna dare una forma più carina al tutto. Come? con i CSS!

5)==== Inseriamo lo stile grafico ====
codice:
<html><head>
<style type="text/css">
<!--
.dome { font-weight: bold; color: #883333; background-color: #FFFFFF; font-family: Verdana, Arial;  border: 0px none #FFFFFF; width: 25px; }
.lune  { font-weight: bold; color: #666666; background-color: #FFFFFF; font-family: Verdana, Arial;  border: 0px none #FFFFFF; width: 25px; }
-->
</style>
</head>
<body bgcolor="white" onload="calendario();">
<center>
<form name="calendario">
<input type="button" value="Do" class="dome"><input type="button"  value="Lu" class="lune"><input type="button" value="Ma"class="lune"><input type="button" value="Me"class="lune"><input type="button" value="Gi"class="lune"><input type="button" value="Ve"class="lune"><input type="button" value="Sa"class="lune">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

<input type="button" class="dome" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     "><input type="button" class="lune" value="     ">

</form>
</center>
Ecco uno stile sobrio e discreto.
Dome é lo stile per i giorni festivi, lune per la settimana.
Il valore " " serve ai NetScape datati, che regolano la dimensione del tasto al caricamento della pagina; grazie a questo "trucco", il calendario non avrà lo stile CSS ma sarà quantomeno ordinato (più o meno!!) :maLOL: .

6)==== Il cuore dello script ====
codice:
function calendario() {
// (funzione) quanti giorni in un mese
var giorni=GiorniAlMese(mese,anno);
//  recupero l'anno ed il mese visualizzati
var PrimoDelMese = new Date (anno, mese, 1);
// recupero il primo giorno della settimana in base all'anno ed il mese visualizzati
var PrimoSettimana=PrimoDelMese.getDay()+7;
giorni+=PrimoSettimana;
// pulsanti bianchi prima del PrimoDelMese
for (i=7; i<PrimoSettimana; i++) document.calendario.elements[i].value="     ";
// inserisco giorno sui pulsanti
for (i=PrimoSettimana; i<giorni; i++) document.calendario.elements[i].value = i-PrimoSettimana+1;
// pulsanti bianchi dopo l'ultimo del mese
for (i=giorni; i<49; i++) document.calendario.elements[i].value="     ";
La funzione getDay ci restituisce il giorno della settimana che corrisponde al primo del mese.
Come mai +7?
Perché i primi 7 tasti sono occupati dai nomi dei giorni della settimana! Se non lo mettessimo, i valori restituiti dallo script sovrascriverebbero questi 7 tasti.

6)==== Tasti di controllo ====
codice:
<input type="button" value="&lt;&lt;" onClick="annoMeno();"><input type="button" value="&lt;" onClick="meseMeno();"><input type="button" value="&gt;" onClick="mesePiu();"><input type="button" value="&gt;&gt;" onClick="annoPiu();">
Quattro tasti che richiamano 4 funzioni.
Possono essere inseriti in un modulo a parte in qualsiasi punto della pagina. Se inclusi nello stesso modulo del calendario, devono essere necessariamente inseriti in fondo, per evitare interferenze con l'assegnazione del numero progressivo dei tasti-giorno.

Richiamano le seguenti funzioni:
codice:
function annoPiu() { anno++; calendario(); };
function annoMeno() {anno--; calendario(); };
function mesePiu() { if(mese==11){anno++;mese=0;}else{mese++;}; calendario(); };
function meseMeno() { if(mese==0){anno--;mese=11;}else{mese--;}; calendario(); };
Ciò che fanno é abbastanza evidente.
Nel caso dei mesi, c'é stato bisogno di inserire una condizione per far scattare l'anno precedente o l'anno successivo.

2)==== Un nome ai mesi ====
codice:
var mes = new  Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
Nulla di che; un semplice array per dare un nome ai mesi.


6)==== Visualizziamo mese ed anno ====
Nello script
codice:
var mes = new  Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
function calendario() {     
document.calendario.anno.value=anno;
document.calendario.mese.value=mes[mese];
// resto dello script
};
Nel modulo "calendario" (sempre in fondo!!)
codice:
<input type="text" name="mese" size="15">
<input type="text" name="anno" size="4">
Molto semplicemente, al click del tasto assegno un valore ai due campi adepti alla visualizzazione del mese e dell'anno.
Avrei potuto utilizzare InnerHtml per un risultato più carino, ma é una funzione che crea problemi ai vecchi browser. Accontentiamoci.

A questo punto sono agli sgoccioli con i caratteri a disposizione; posto tutto il codice in sèguito.