La stessa cosa ma in javascript....
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Calendario</title>
</head>
<body>
<style type="text/css">
<!--
.monthHeader {font-family:verdana;font-size:8pt;background-color:darkblue;color:white;font-weight:bold}
.calDay {width:35px;font-family:verdana;font-size:8pt;color:darkblue;background-color:white;}
.calHeader {width:35px;font-family:verdana;font-size:8pt;background-color:darkblue;color:white}
.calBtn {width:30px;font-family:verdana;font-size:8pt}
.weekEnd {width:35px;font-family:verdana;font-size:8pt;color:darkblue;background-color:yellow;}
.noDay {width:35px;font-family:verdana;font-size:8pt;background-color:gray;}
.curDay {width:35px;font-family:verdana;font-size:8pt;background-color:red;color:white}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var dayNames = new Array('Dom','Lun','Mar','Mer','Gio','Ven','Sab');
var mese = new Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
var previousYear = 0;
var previousMonth = 0;
var nextYear = 0;
var nextMonth = 0;
var currentYear = 0;
var currentMonth = 0;
function sendDate(aDate) {
//------------------ Inserire qui il codice per tramettere la data
alert(aDate);
} // function sendDate(aDate)
function drawCal(aTable) {
m = 0;
for (l=0;l<=5;l++) {
newRow = aTable.insertRow();
for (i=0;i<=6;i++) {
newCell = newRow.insertCell();
newCell.className = "calDay";
newCell.innerHTML = " ";
newCell.align = "center";
newCell.id = "day["+m+"]";
newCell.vAlign = "top"
m++;
} // for (i=0;i<6;i++)
} // for (l=0;l<=5;l++)
} // function newWeek(aTable)
//==============================================================================
// Creazione della testata del calendario
//==============================================================================
function calHeader(aTable) {
//----------- Riga per il mese
newRow = aTable.insertRow();
newCell = newRow.insertCell();
newCell.colSpan = 7;
newCell.align = "center";
newCell.className = "monthHeader";
newCell.id = "monthHeader";
newCell.innerHTML = ""
//----------- Riga per i giorni
newRow = aTable.insertRow();
for (i=0;i<=6;i++) {
newCell = newRow.insertCell();
newCell.className = "calHeader";
newCell.innerHTML = dayNames[i];
newCell.align = "center";
newCell.vAlign = "top"
} // for (i=0;i<6;i++)
} // function calHeader(aTable)
function format2(aValue) {
aString = new String(aValue);
if (aString.length == 1) {
return '0' + aString;
} // if (aString.length == 1)
return aString;
} // function format2(aValue)
//==============================================================================
// Riempimento dei giorni nel calendario
//==============================================================================
function populateCal(aYear,aMonth) {
var a = new Date();
//------------ Today's day number
today = a.getDate();
//------------ Settaggio dell'anno
a.setYear(aYear);
//------------ Settaggio del mese
a.setMonth(aMonth-1);
//------------ calcolo dei
previousYear = a.getFullYear() - 1;
previousMonth = a.getMonth() - 1;
nextYear = a.getFullYear() + 1;
nextMonth = a.getMonth() + 1;
currentYear = a.getFullYear();
currentMonth = a.getMonth();
//------------ Settaggio del nome del Mese
document.getElementById('monthHeader').innerHTML = mese[currentMonth] + " " + a.getFullYear();
//------------ Primo giorno del mese per l'anno
currentDay = 1;
a.setDate(currentDay);
//------------ N° del primo giorno nella settimana
startDay = a.getDay();
//------------ Le prime celle non fanno parte del mese
for (i=0;i<startDay;i++) {
dayID = "day["+i+"]";
document.getElementById(dayID).className ='noDay' ;
} // for (i=0;i<=startDay;i++)
//------------ Settaggio primo giorno nella tabella
dayID = "day["+startDay+"]";
funcParm = "sendDate('"+aYear+'-'+format2(aMonth)+'-'+format2(currentDay)+"')";
document.getElementById(dayID).innerHTML =''+currentDay+'' ;
//------------ Settaggio per gli altri giorni nella tabella
cont = true;
while (cont) {
currentDay++;
a.setDate(currentDay);
if (a.getMonth() == currentMonth+1 || a.getFullYear() != currentYear) {
cont = false;
} else {
calc = startDay + currentDay - 1;
dayID = "day["+calc+"]";
funcParm = "sendDate('"+aYear+'-'+format2(aMonth)+'-'+format2(currentDay)+"')";
document.getElementById(dayID).innerHTML =''+currentDay+'' ;
if (currentDay == today) {
document.getElementById(dayID).className = 'curDay';
} // if (currentDay == a.getDate())
} // if (a.getMonth() == aMonth)
} // while (cont)
//------------ Le ultime celle non fanno parte del mese
for (n=currentDay+startDay-1;n<=41;n++) {
dayID = "day["+n+"]";
document.getElementById(dayID).className ='noDay' ;
} // for (i=0;i<=startDay;i++)
} // function populateCal(aYear,aMonth)
//==============================================================================
// Piede del calendario dove ci sono i pulsanti
//==============================================================================
function calBottom(aTable) {
//----------- Riga per i bottoni
newRow = aTable.insertRow();
//----------- Bottone un anno indietro
newCell = newRow.insertCell();
newCell.className = "calBtn";
newCell.innerHTML = '<input type=button class=calBtn value="<<" onclick="changeCal(previousYear,currentMonth+1)">';
newCell.align = "center";
newCell.vAlign = "top";
//----------- Bottone un mese indietro
newCell = newRow.insertCell();
newCell.className = "calBtn";
newCell.innerHTML = '<input type=button class=calBtn value="<" onclick="changeCal(currentYear,previousMonth+1)">';
newCell.align = "center";
newCell.vAlign = "top";
//----------- Colspan di tre celle
newCell = newRow.insertCell();
newCell.colSpan = 3;
newCell.align = "center";
newCell.innerHTML = "";
//----------- Bottone un mese in avanti
newCell = newRow.insertCell();
newCell.className = "calBtn";
newCell.innerHTML = '<input type=button class=calBtn value=">" onclick="changeCal(currentYear,nextMonth+1)">';
newCell.align = "center";
newCell.vAlign = "top";
//----------- Bottone un anno in avanti
newCell = newRow.insertCell();
newCell.className = "calBtn";
newCell.innerHTML = '<input type=button class=calBtn value=">>" onclick="changeCal(nextYear,currentMonth+1)">';
newCell.align = "center";
newCell.vAlign = "top";
} // function calBottom(aTable)
//==============================================================================
// Inizializzazione delle celle del calendario
//==============================================================================
function initCalendar(aTable) {
//------------ Parte dalla 3° riga e si ferma alla penultima
for (i=2;i<aTable.rows.length-1;i++) {
curRow = aTable.rows(i);
for (j=0;j<curRow.cells.length;j++) {
curCell = curRow.cells(j);
curCell.innerHTML = "";
curCell.className = "calDay";
} // for (j=0;j<curRow.cells.length;j++)
} // for (i=0;i<aTable.rows.length;i++)
} // function initCalendar(aTable)
//==============================================================================
// Creazione del calendario
//==============================================================================
function createCalendar(aTable,aYear,aMonth) {
if (aTable == null) {
aTable = document.getElementById('calendar');
} // if (aTable == null)
//------------ Inizializzazione calendario
initCalendar(aTable);
//------------ Testata del calendario
calHeader(aTable);
//------------ Giorni del calendario
drawCal(aTable);
//------------ Assegnazione dei giorni
populateCal(aYear,aMonth);
//------------ Bottoni
calBottom(aTable);
} // function createCalendar(aTable,aYear,aMonth)
//==============================================================================
// Cambio mese o anno
//==============================================================================
function changeCal(aYear,aMonth) {
//------------ Init calendario
initCalendar(document.getElementById('calendar'));
populateCal(aYear,aMonth);
} // function changeCal(aYear,aMonth)
//-->
</script>
<table id="calendar" border="1" style="border-color:yellow;background-color:#ffffcc"></table>
<script language="JavaScript" type="text/javascript">
<!--
curDate = new Date();
//------------ Creazione del calendario
createCalendar(calendar, curDate.getFullYear(),curDate.getMonth()+1);
//-->
</script>
</body>
</html>