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 variepersonalizzazioni, 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
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
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
un font standard, Tahoma, Verdana, Courier,Arial
ecc. ecc. per il colore e la misura dipende dai vostri gusti
Con
la larghezza delle celle, quindi se vogliamo un calendario
più piccolo metteremo 1 se lo vogliamo più grande 3
"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(
<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
<img src="INSERISCI QUI L'URL DELL'IMMAGINE" width=250 height=191 alt="calendario" />
Width =la larghezza della tua immagine
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
Nessun commento:
Posta un commento