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()">&lt;</b>          '+anno+'          <b OnClick="anno2()">&gt;</b>';
    }
    document.getElementById("mese").innerHTML='<b OnClick="mese1()">&lt;</b>          '+Mese[mese+1]+'          <b OnClick="mese2()">&gt;</b>';
    giorni();
}

function mese2()
{
    mese+=1;
    if((mese+1)==13)
    {
        anno+=1; mese=0;
        document.getElementById("anno").innerHTML='<b Onclick="anno1()">&lt;</b>          '+anno+'          <b OnClick="anno2()">&gt;</b>';
    }
    document.getElementById("mese").innerHTML='<b OnClick="mese1()">&lt;          </b>'+Mese[mese+1]+'<b OnClick="mese2()">     &gt;</b>';
    giorni();
}

function anno1()
{
    anno-=1;
    document.getElementById("anno").innerHTML='<b Onclick="anno1()">&lt;</b>          '+anno+'          <b OnClick="anno2()">&gt;</b>';
    giorni();
}

function anno2()
{
    anno+=1;
    document.getElementById("anno").innerHTML='<b Onclick="anno1()">&lt;</b>          '+anno+'          <b OnClick="anno2()">&gt;</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()">&lt;</b>          <script type="text/javascript">document.write(anno);</script>          <b OnClick="anno2()">&gt;</b></td>
<td style="width: 50px;"></td>
<td id="mese"><b OnClick="mese1()">&lt;</b>          <script type="text/javascript">document.write(Mese[mese+1]);</script>     <b OnClick="mese2()">&gt;</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   Hunting The Invaders un gioco creato in Javascript