Creare un calendario

In questo tutorial vedremo come si crea un calendario perpetuo. Quello che si vede su blog è siti è un piccolo rettangolo di (orizzontale o verticale) di varie dimensioni, ma si tratta in realtà di una vera e propria pagina web, che poi viene inserita all’interno di un iframe, cioè in una specie di finestra che ne mostra solo una piccola parte.

Per fare un esempio, qui potete vedere uno dei miei calendari, che useremo nel tutorial, non inserito in un iframe.

La prima cosa di cui abbiamo bisogno per la creazione del calendario è l’immagine di sfondo. La potete creare con qualsiasi programma di grafica e può avere una qualsiasi dimensione a vostra scelta. Assicuratevi che la zona dell’immagine in cui verrà inserito il testo ne permettà la leggibilità e sia sufficientemente grande, in modo da non avere le date troppo ammassate.

Questa è la mia immagine:

sfondo per il calendario

Veniamo ora al codice. E’ un po’ lungo, ma non spaventatevi perchè le modifiche da fare per avere il vostro calendario
non sono molte ^__^

Abbiamo una prima parte con i marcatori consueti per una pagina html, poi il foglio di stile che definisce l’aspetto del nostro calendario e infine la tabella in cui viene inserito il codice javascript che fa funzionare il tutto.

Per modificarlo potete usare un normalissimo editor di testo come il blocco note di Windows, e salvare poi il documento con
estensione .htm o .html . Fate attenzione che il programma non aggiunga anche l’estensione .txt; per verificare che tutto sia
corretto potete attivare la visualizzazione delle estensioni dei file per la cartella in cui avete salvato il documento (Strumenti -> Opzioni cartella ->
Visualizzazione e togliete la spunta alla voce Nascondi le estensioni per i tipi di file conosciuti)

Una raccomandazione: non usate Word, quando salvate il documento come html questo simpatico programma decide per i fatti propri di aggiungere qualche riga qua e là, col risultato di sporcare il codice.

 

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>


<style type=”text/css”>

<!–

body{

background-color:#2c2935;

font-family:Verdana,Arial,Sans-serif;

font-size:11px;

}

/* stili per la tabella principale */

table.main{

border-collapse: collapse;

border:0px;

width:150px;

height:250px;

background-image:url(paesaggio1.jpg);

}

/* stili per la tabella delle date */

table.calendar{

width:130px;

height:120px;

font-size : 11px;

color: #bdbbc0;

}

/* stili per i giorni */

.days{

color:#2c2935;

font-weight:bold;

}

/* stili per la data attuale */

.today{

color:#2c2935;

font-weight:bold;

}
–>

–>

</style>

</head>

<body topmargin=”0″ leftmargin=”0″>

<div align=”left” style=”width: 910px; height:
250px;
“>

<table cellpadding=”0″ cellspacing=”0″ class=”main”>

<tr>

<td width=”150″ height=”110″ > </td>

</tr>

<tr>

<td style=”width:150px; height:140px;
text-align:center;vertical-align:top;
“>

<script type=”text/javascript” language=JavaScript>

<!– This script and many more are available free online at
–>

<!– The JavaScript Source!! http://javascript.internet.com
–>

<!–//Begin

monthnames = new Array(

“Gennaio”,

“Febbraio”,

“Marzo”,

“Aprile”,

“Maggio”,

“Giugno”,

“Luglio”,

“Agosto”,

“Settembre”,

“Ottobre”,

“Novembre”,

“Dicembre”);

var linkcount=0;

function addlink(month, day, href) {

var entry = new Array(3);

entry[0] = month;

entry[1] = day;

entry[2] = href;

this[linkcount++] = entry;

}

Array.prototype.addlink = addlink;

linkdays = new Array();

monthdays = new Array(12);

monthdays[0]=31;

monthdays[1]=28;

monthdays[2]=31;

monthdays[3]=30;

monthdays[4]=31;

monthdays[5]=30;

monthdays[6]=31;

monthdays[7]=31;

monthdays[8]=30;

monthdays[9]=31;

monthdays[10]=30;

monthdays[11]=31;

todayDate=new Date();

thisday=todayDate.getDay();

thismonth=todayDate.getMonth();

thisdate=todayDate.getDate();

thisyear=todayDate.getYear();

thisyear = thisyear % 100;

thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 +
thisyear));

if (((thisyear % 4 == 0)

&& !(thisyear % 100 == 0))

||(thisyear % 400 == 0)) monthdays[1]++;

startspaces=thisdate;

while (startspaces > 7) startspaces-=7;

startspaces = thisday – startspaces + 1;

if (startspaces < 0) startspaces+=7;

document.write(“<center>”);

document.write(“<table border=0 ” );<!–Border
size–>

document.write(“class=’calendar’ cellpadding=0
cellspacing=1>”);<!–Border color, font size, cell padding,
cellspacing and font color–>

document.write(“<tr> <td colspan=’7′
style=’text-align:center;’><strong>”

+ monthnames[thismonth] + ” ” + thisyear

+ “</strong></td></tr>”);

document.write(“<tr>”);

document.write(“<td align=center
class=’days’>D</td>”);

document.write(“<td align=center
class=’days’>L</td>”);

document.write(“<td align=center
class=’days’>M</td>”)

document.write(“<td align=center
class=’days’>M</td>”);

document.write(“<td align=center
class=’days’>G</td>”);

document.write(“<td align=center
class=’days’>V</td>”);

document.write(“<td align=center
class=’days’>S</td>”);

document.write(“</tr>”);

document.write(“<tr>”);

for (s=0;s<startspaces;s++) {

document.write(“<td>-</td>”);

}

count=1;

while (count <= monthdays[thismonth]) {

for (b = startspaces;b<7;b++) {

linktrue=false;

document.write(“<td>”);

for (c=0;c<linkdays.length;c++) {

if (linkdays[c] != null) {

if ((linkdays[c][0]==thismonth + 1) &&
(linkdays[c][1]==count)) {

document.write(“<a href=\”" + linkdays[c][2] +
“\”>”);

linktrue=true;

}

}

}

if (count==thisdate) {

document.write(“<span class=’today’>”);<!–todays date
color–>

}

if (count <= monthdays[thismonth]) {

document.write(count);

}

else {

document.write(” “);

}

if (count==thisdate) {

document.write(“</span>”);

}

if (linktrue)

document.write(“</a>”);

document.write(“</td>”);

count++;

}

document.write(“</tr>”);

document.write(“<tr>”);

startspaces=0;

}

document.write(“</table>”);

document.write(“</center>”);

</script>

</td>

</tr>

</table>

</div>

</body>

</html>