======== 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:
B) Il codice in PHP:codice:var now = new Date(); var anno = now.getYear(); var mese = now.getMonth(); var giorno = now.getDate(); if ( now.getYear()<500 ) {anno = now.getFullYear() };
C) 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; ?>;
---- Spiegazioni ----codice:var anno=<%=year(now)%>; var mese=<%=month(now)-1%>; var giorno=<%=day(now)%>;
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 ====
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 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); }
una formula matematica che verificherà (e restituirà 1) che l'anno corrente sia bisestile.codice:function Bisestile(anno) { if (((anno % 4)==0) && ((anno % 100)!=0) || ((anno % 400)==0)) return (1); else return (0); }
A questo punto perfezioniamo la funzione GiorniAlMese:
4)==== Visualizziamo il modulo ====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); }
E' unsemplice modulo pieno di pulsanti in fila per 7 che accoglieranno il valore restituito dallo script.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>
Il risultato é un po' rozzo; ora bisogna dare una forma più carina al tutto. Come? con i CSS!
5)==== Inseriamo lo stile grafico ====
Ecco uno stile sobrio e discreto.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>
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 ====
La funzione getDay ci restituisce il giorno della settimana che corrisponde al primo del mese.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=" ";
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 ====
Quattro tasti che richiamano 4 funzioni.codice:<input type="button" value="<<" onClick="annoMeno();"><input type="button" value="<" onClick="meseMeno();"><input type="button" value=">" onClick="mesePiu();"><input type="button" value=">>" onClick="annoPiu();">
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:
Ciò che fanno é abbastanza evidente.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(); };
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 ====
Nulla di che; un semplice array per dare un nome ai mesi.codice:var mes = new Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
6)==== Visualizziamo mese ed anno ====
Nello script
Nel modulo "calendario" (sempre in fondo!!)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 };
Molto semplicemente, al click del tasto assegno un valore ai due campi adepti alla visualizzazione del mese e dell'anno.codice:<input type="text" name="mese" size="15"> <input type="text" name="anno" size="4">
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.
Rispondi quotando