-->

TUTORIAL CALENDARIO PERPETUO





Realizzare un calendario perpetuo ovvero che si aggiorni automaticamente


lo script è composto da un unico pezzo che va postato 
nel punto in cui si vuole visualizzare il calendario, 
comunque sotto il tag <body>, possiamo fare varie
personalizzazioni, sia per i parametri della table che 
lo contiene, sia in specifici campi

- Ho messo delle note accanto ai parametri 
personalizzabili, fate molta attenzione a non 
cancellare " / : ;  ecc.ecc di javascript, 
vediamo in ordine  i punti che si possono
modificare e personalizzare



<script type="text/javascript">
//The JavaScript Source http://javascript.internet.com
/* Tutorial scritto da http://www.dreamworldgraphic.blogspot.com */ 

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("<table style='border:1px dotted #7a96da; text-align:center; font-family:tahoma; font-size:10px; color:#7a96da; margin-left:auto; margin-right:auto;' cellpadding=2 cellspacing=2>"); //Parametri per la table contenitore
document.write("<tr><td colspan='7'><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></td></tr>");//Parametri cella mese e anno corrente
document.write("<tr>");
document.write("<td><font color='#000000'>D</td>"); //Parametri per i giorni della settimana
document.write("<td><font color='#dc7c7e'>L</td>");
document.write("<td><font color='#dc7c7e'>M</td>");
document.write("<td><font color='#dc7c7e'>M</td>");
document.write("<td><font color='#dc7c7e'>G</td>");
document.write("<td><font color='#dc7c7e'>V</td>");
document.write("<td><font color='#dc7c7e'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>"); //Asterisco visibile nei giorni mancanti inizio calendario
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>"); //Celle giorni calendario
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("<font style='text-decoration: underline'><font color='#901e1e'>"); //Parametri per il giorno corrente
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</font>");
</script>

PARAMETRI TABLE CONTENITORE


"<table style='border:1px dotted #7a96da; text-align:center; font-family:tahoma; font-size:10px; color:#7a96da; margin-left:auto; margin-right:auto;' cellpadding='2' cellspacing='2'>");
//Parametri per la table contenitore


In base al tipo di gadget che vogliamo realizzare possiamo 
rendere la table contenitore invisibile sostituendo 
"border:1px dotted #7a96da;" con "border:0px;" se si vuole 

con bordo, potete sostituire i parametri per tipo,
spessore e colore come preferite




Stesso discorso per i parametri del font, purché sia 
un font standard, Tahoma, Verdana, Courier,Arial 
ecc. ecc. per il colore e la misura dipende dai vostri gusti



Con "cellpadding='2' cellspacing='2'" si determina 
la larghezza delle celle, quindi se vogliamo un calendario 
più piccolo metteremo 1 se lo vogliamo più grande 3



- Oltre ai parametri per la table contenitore troviamo:


Parametri cella mese e anno corrente
Volendo si può aggiungere il parametro per un bordo

Parametri per i giorni della settimana
Possiamo settare il parametro per il colore, mettendolo magari diverso per la Domenica,
il primo parametro, il calendario è all'inglese

Asterisco visibile nei giorni mancanti inizio calendario
Ovvero i trattini che si visualizzano sotto i giorni della settimana in base a come è suddiviso
il mese corrente

Celle giorni calendario
Si può aggiungere il parametro per un bordo

Parametri per il giorno corrente
Possiamo inserire dei parametri che evidenzino, rispetto agli altri, il giorno corrente

CODICE CALENDARIO PERPETUO DA PRELEVARE



<script type="text/javascript">

//The JavaScript Source http://javascript.internet.com

/* Tutorial scritto da http://dreamworldgraphic.blogspot.com*/ 
<body><img src="INSERISCI L'URL DEL TUO CALENDARIO" width=250 height=191
alt="calendario" />
<div id=div1>
<script type="text/javascript">
<!--//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("<table style='border:1px dotted #7a96da; text-align:center; font-family:tahoma; font-size:10px; color:#7a96da; margin-left:auto; margin-right:auto;' cellpadding='2' cellspacing='2'>");//Parametri per la table contenitore
document.write("<tr><td colspan='7'><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></td></tr>"); //Parametri cella mese e anno corrente
document.write("<tr>");
document.write("<td><font color='#728215'>D</td>"); //Parametri la domenica
document.write("<td><font color='#dc7c7e'>L</td>");
document.write("<td><font color='#dc7c7e'>M</td>");
document.write("<td><font color='#dc7c7e'>M</td>");
document.write("<td><font color='#dc7c7e'>G</td>");
document.write("<td><font color='#dc7c7e'>V</td>");
document.write("<td><font color='#dc7c7e'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>"); //Asterisco visibile nei giorni mancanti inizio calendario
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>"); //Celle giorni calendario
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("<font style='text-decoration: underline'><font color='#7a96da'>"); //Parametri per il giorno corrente
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</font>");
</script>


Per inserire un'immagine
dovete modificare questa parte nell'HTML
Codice:
<img src="INSERISCI QUI L'URL DELL'IMMAGINE" width=250 height=191 alt="calendario" />





Width =la larghezza della tua immagine
Height = l'altezza 

Per spostare e centrare il vostro div cioè la cella dove 
sono visualizzati i giorni e il mese, dovete inserire questo codice


#div {position: absolute ;
width: 105px;
height: 87px;
left: 45px;
z-index:1;
top: 106px;
font-family: Georgia, Arial,Helvetica, sans-serif;
font-size: 8px;
color:  #000000
}




se avete salvato e prelevato il codice dal 
block-note modificate top e left fino ad 
ottenere la centratura desiderata
partendo dal presupposto che il calendario
vi apparirà in alto a sinistra quindi dal
punto "0" e "0"

Font - family: scegliete il font che 
preferite fra quelli standard
e potete modificare anche il "color" 
a vostro piacere



Spero di essermi spiegata bene
se hai bisogno lascia un commento
Buon divertimento
Ciao



Posta un commento