In questo articolo spiegherò come creare un calendario in Javascript simile a quello di Ubuntu che fa scegliere il mese e l’ anno del calendario.
Guida del codice sorgenete:
<style type="text/css"> .Tabella {border:1px; border-color: grey; background-color: transparent;} .tabella { border:none;} .tabellai { border:none; cursor: pointer;} .giorno { font-weight: bold; color: grey;} body { background:transparent; } </style>
Il codice tra i tag style è codice css da qui potrete modificare il colore del calendario a vostro piacimento. Il codice cursor pointer serve a far comparire la “manina” al posto del cursore quando il cursore passa di sopra a < e >
<script type="text/javascript"> var d= new Date(); var giorno=d.getDate(); var mese=d.getMonth(); var anno=d.getFullYear(); var Mese=new Array(); Mese[1]="Gennaio"; Mese[2]="Febbraio"; Mese[3]="Marzo"; Mese[4]="Aprile"; Mese[5]="Maggio"; Mese[6]="Giugno"; Mese[7]="Luglio"; Mese[8]="Agosto"; Mese[9]="Settembre"; Mese[10]="Ottobre"; Mese[11]="Novembre"; Mese[12]="Dicembre";
I due array servono per restituire il nome del mese poichè la variabile mese restituisce il numero del mese da 0 a 11 (infatti come vedrete più avanti dove c’è mese c’è quasi sempre +1).
function mese1() { mese-=1; if((mese+1)==0) { anno-=1; mese=11; document.getElementById("anno").innerHTML='<b Onclick="anno1()"><</b> '+anno+' <b OnClick="anno2()">></b>'; } document.getElementById("mese").innerHTML='<b OnClick="mese1()"><</b> '+Mese[mese+1]+' <b OnClick="mese2()">></b>'; giorni(); } function mese2() { mese+=1; if((mese+1)==13) { anno+=1; mese=0; document.getElementById("anno").innerHTML='<b Onclick="anno1()"><</b> '+anno+' <b OnClick="anno2()">></b>'; } document.getElementById("mese").innerHTML='<b OnClick="mese1()">< </b>'+Mese[mese+1]+'<b OnClick="mese2()"> ></b>'; giorni(); } function anno1() { anno-=1; document.getElementById("anno").innerHTML='<b Onclick="anno1()"><</b> '+anno+' <b OnClick="anno2()">></b>'; giorni(); } function anno2() { anno+=1; document.getElementById("anno").innerHTML='<b Onclick="anno1()"><</b> '+anno+' <b OnClick="anno2()">></b>'; giorni(); }
Queste funzioni servono a cambiare il nome del mese, dell’ anno e contemporaneamente la posizione dei giorni poichè richiamano la funzione giorni() al click delle freccette < & >. Ho messo &.l.t. e &.g.t. (senza punti) per scrivere < e > per interpretarli come semplici caratteri < e > e non come codici HTML.
</script> <table> <tr> <td id="anno"><b Onclick="anno1()"><</b> <script type="text/javascript">document.write(anno);</script> <b OnClick="anno2()">></b></td> <td style="width: 50px;"></td> <td id="mese"><b OnClick="mese1()"><</b> <script type="text/javascript">document.write(Mese[mese+1]);</script> <b OnClick="mese2()">></b></td> </tr></table> <table> <tr> <td></td> <td>Lun</td> <td>Mar</td> <td>Mer</td> <td>Gio</td> <td>Ven</td> <td>Sab</td> <td>Dom</td> </tr> <tr> <td></td> <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td> <td id="6">6</td> <td id="7">7</td> </tr> <tr> <td></td> <td id="8">8</td> <td id="9">9</td> <td id="10">10</td> <td id="11">11</td> <td id="12">12</td> <td id="13">13</td> <td id="14">14</td> </tr> <tr> <td></td> <td id="15">15</td> <td id="16">16</td> <td id="17">17</td> <td id="18">18</td> <td id="19">19</td> <td id="20">20</td> <td id="21">21</td> </tr> <tr> <td></td> <td id="22">22</td> <td id="23">23</td> <td id="24">24</td> <td id="25">25</td> <td id="26">26</td> <td id="27">27</td> <td id="28">28</td> </tr> <tr id="giorni"> <td></td> <td id="29">29</td> <td id="30">30</td> <td id="31">31</td> <td id="32"></td> <td id="33"></td> <td id="34"></td> <td id="35"></td> </tr> <tr id="giorni2"> <td></td> <td id="36"></td> <td id="37"></td> <td id="38"></td> </tr>
Questa è la struttura HTML del nostro calendario. Il codice class per utilizzare lo stile scritto in CSS e id per lavorare col Javascript
<script type="text/javascript"> function giorni() { var y=new Date(anno, mese+1); var giorni_mese=new Date(anno, mese+1, 0).getDate(); for (var i=1; i<38; i++) { document.getElementById(i).innerHTML=''; document.getElementById(i).className=''; } var newd=new Date(anno, mese+2); var mm=new Date().getMonth()+1; for(var i=1; i<giorni_mese+1; i++) { var day=newd.getDay()+i+1; document.getElementById(day).innerHTML=i; if(y.getMonth() == mm) { if(day==d.getDate()){document.getElementById(day+4).className="giorno";} } } } giorni(); </script> </table>
Qui creiamo e lanciamo la funzione giorni che svuota e mette in ordine i giorni.
Ti è piaciuto questo articolo? Allora ti piacerà anche:
– Creare un orologio analogico in Javascript usando webkit
– Come realizzare uno slider di immagini con dissolvenza in Javascript
– Hunting The Invaders un gioco creato in Javascript