Calendario universale

Un calendario universale è lo strumento alla base di un organizer. Vedremo velocemente come costruirne uno per il nostro sito... la forza di questo strumento è che funziona completamente in automatico.

Il documento che andremo ad implementare in questo progetto è calendario.asp; al suo interno troveremo:

1) le indicazioni del mese e dell'anno attuale;
2) il calendario mensile in cui sono indicati il giorno corrente ed il giorno selezionato dall'utente;
3) un modulo per selezionare il mese e l'anno di interesse.

Tale documento .asp può essere inserito in una pagina con altri elementi ma in questo caso viene studiato nella versione stand alone.
Il primo elemento sono gli stili css da associare a ciascun elemento secondo lo schema seguente:

<style type="text/css">
span {font: bold 8pt Verdana,Arial;}
select {font: 8px Verdana,Arial;}
td {font: 7pt Verdana,Arial; width:12px; height:12px; padding: 0px; }
.giorni { font: bold; color:#ffffff; background: #660000; text-align:center}
.normale {color: #990000; background: #fff9f9;}
.oggi { font: bold; color: #990000; background: #ffffff; border: 1px solid #660000}
.attivo { font: bold; color: #ffffff; background: #990000; }
.vuoto { background: #ffffff; }
a {color: #990000; text-decoration:none;}
</style>

La classe .giorni definisce le intestazione dei giorni della settimana;
La classe .oggi definisce la caratteristica del giorno corrente;
La classe .attivo definisce il giorno selezionato dall'utente;
La classe .vuoto definisce le caselle vuote relative al mese selezionato;

Per procedere nella realizzazione del calendario occorre definire i vettori per i mesi ed i giorni della settimana ed interrogare il server "Che giorno è oggi?".

<%
nomi_mesi=",Gennaio,Febbraio,Marzo,Aprile,Maggio,Giugno,Luglio,Agosto,Settembre,Ottobre,Novembre,Dicembre"
array_mesi=split(nomi_mesi,",")
nomi_giorni=",Lu,Ma,Me,Gi,Ve,Sa,Do"
array_giorni=split(nomi_giorni,",")

giorno_ora = day(now)
mese_ora = month(now)
anno_ora = year(now)
%>

Dopo aver saputo dal server in che giorno siamo ed aver isolato in due vettori i giorni della settimana ed i mesi, l'operazione successiva è controllare se l'utente ha selezionato un giorno del mese o un mese/anno attraverso il modulo.
Tutte queste operazioni avvengono controllando la richiesta dei valori associati ai campi "gg", "mm" ed infine "aaaa". Se i valori non sono stati "passati" alla pagina il calendario automaticamente imposta tali valori con quelli del giorno attuale.

<%
giorno_attivo = request("gg")
if giorno_attivo <>"" then
   giorno_attivo = cInt(request("gg"))
end if

mese_attivo = request("mm")
if mese_attivo ="" then
   mese_attivo = mese_ora
else
   mese_attivo = cInt(request("mm"))
end if

anno_attivo = request("aaaa")
if anno_attivo ="" then
   anno_attivo = anno_ora
else
   anno_attivo = cInt(request("aaaa"))
end if

'creo la data iniziale del mese
corrente= "01/" & mese_attivo & "/" & anno_attivo
%>

La data corrente è invece un valore che ci permetterà? di costruire il calendario, giorno dopo giorno, difatti è costituito dal primo giorno del mese attivo che ricordiamo ancora una volta è quello attuale o è quello selezionato dall'utente.

Attenzione: Il giorno corrente appena descritto è valido se il server in cui il sito è ospite contiene un sistema operativo italiano. Nel caso di server esteri, come Brinkster pubblicato qualche settimana fa, è necessario modificare la variabile corrente come segue:

corrente= mese_attivo & "/01/" & anno_attivo

Questa parte del codice provvede ad indicare il mese e l'anno attivo, riportato dal calendario e dalla prima parte della tabella con i giorni della settimana.

<span>
 <%=array_mesi(mese_attivo)%>   <%=anno_attivo%>
</span>
<table cellpadding="1" cellspacing="0" bgcolor="#ffffff"> <%
Response.Write("<tr>")
for i = 1 to 7
  Response.Write "<td class='giorni'>"&array_giorni(i)&"</td>"
next
  Response.Write("</tr>")

Di seguito viene elencata la parte più importante di tutto il codice. Il controllo giorno dopo giorno del giorno della settimana per posizionare correttamente i giorni all'interno dello schema settimanale.
Un ulteriore controllo viene fatto per evidenziare il giorno attuale e il giorno selezionato dall'utente.

conta_gg = 1
for settimana=1 to 6
 Response.Write("<tr>")
 for indice = 1 to 7
  if indice=Datepart("w",corrente,2)  then
   Response.Write("<td class='vuoto'> </td>")
  else
   if mese_attivo=Month(corrente) then
    if conta_gg=giorno_ora and mese_attivo=mese_ora and anno_attivo=anno_ora then %>
     <td class='oggi'><%=conta_gg%></td> <%
    elseif conta_gg = giorno_attivo then %>
     <td class='attivo'><%=conta_gg%></td> <%
    else %>
     <td class="normale"><a href="calendario.asp?gg=<%=conta_gg%>&mm=<%=mese_attivo%>&aaaa=<%=anno_attivo%>"><%=conta_gg%></a></td> <%
    end if
    corrente=dateadd("d",1,corrente)
    conta_gg=conta_gg+1
   else
    settimana=6
   end if
  end if
 next
 Response.Write("</tr>")
next %>
</table>

I giorni sono differentemente evidenziati utilizzando le classi definite all'inizio del tutorial.
Per avere un veloce collegamento al calendario di "oggi" è stata evidenziata la data attuale come mostrato di seguito.

<span>
 <a href="calendario.asp">
 <%= array_giorni(Datepart("w",now,2))%>,
 <%= giorno_ora %>  <%=array_mesi(mese_ora)%> 
 <%=anno_ora%></a>
</span>

L'ultimo elemento da inserire è il modulo per la scelta del mese e dell'anno da visualizzare.
Attraverso un ciclo if associato al ciclo for vedremo al suo interno soltante il mese e l'anno selezionato attraverso il passaggio precedente; mentre l'opzione onchange collegata al menu di selezione (document.calend.submit()) permette di spedire la modifica alla pagina stessa che provvede al ricalcolo del calendario.

<form action="calendario.asp" method="post" name="calend">

<select onchange="document.calend.submit()" name="mm">
<% for i = 1 to 12
  Response.Write "<option value='"& i &"' "
  if mese_attivo=i then
    Response.Write "selected"
  end if
  Response.Write ">"&array_mesi(i)&"</option>"
next %>
</select> 

la scelta dell'anno da selezionare e la modifica della pagina avviene anche per l'anno.
Si è scelto di attivare il calendario partendo da due anni prima di quello attuale e di sei anni nel futuro; ovviamente potete incrementare a piacere questo intervallo di tempo.

<select onchange="document.calend.submit()" name="aaaa">
<% for i = anno_ora-2 to anno_ora+6
  Response.Write "<option value='"& i &"'"
  if anno_attivo=i then
    Response.Write " selected"
  end if
  Response.Write ">"&i&"</option>"
next %>
</select>
<input type="hidden" value="1" name="gg">
</form>