Tutorial HTML - Creare un calendario - 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>

 

Pagina precedente - Pagina successiva

Torna all'indice dei tutorials