Inserire puslanti avanti e indietro calendario javascript

**gaten** · 18-12-2012, 18:13

Salve ragazzi ho in seguente codice per un calendario in javascript:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript">
function leapYear(year) {
  if (year % 4 == 0) {// basic rule
    return true; // is leap year
  }
  /* else */ // else not needed when statement is "return"
  return false; // is not leap year
}

function getDays(month, year) {
  // create array to hold number of days in each month
  var ar = new Array(12);
  ar[0] = 31; // January
  ar[1] = (leapYear(year)) ? 29 : 28; // February
  ar[2] = 31; // March
  ar[3] = 30; // April
  ar[4] = 31; // May
  ar[5] = 30; // June
  ar[6] = 31; // July
  ar[7] = 31; // August
  ar[8] = 30; // September
  ar[9] = 31; // October
  ar[10] = 30; // Novembre
  ar[11] = 31; // December

  // return number of days in the specified month (parameter)
  return ar[month];
}

function getMonthName(month) {
  // create array to hold name of each month
  var ar = new Array(12);
  ar[0] = "January";
  ar[1] = "February";
  ar[2] = "March";
  ar[3] = "April";
  ar[4] = "May";
  ar[5] = "June";
  ar[6] = "July";
  ar[7] = "August";
  ar[8] = "September";
  ar[9] = "October";
  ar[10] = "November";
  ar[11] = "December";

  // return name of specified month (parameter)
  return ar[month];
}

function setCal() {
  // standard time attributes
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth();
  var monthName = getMonthName(month);
  var date = now.getDate();
  now = null;

  var firstDayInstance = new Date(year, month, 1);
  var firstDay = firstDayInstance.getDay();
  firstDayInstance = null;

  // number of days in current month
  var days = getDays(month, year);

  // call function to draw calendar
  drawCal(firstDay + 1, days, date, monthName, year);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
  // constant table settings
  //var headerHeight = 30 // height of the table's header cell
  var border = 2; // 3D height of table's border
  var cellspacing = 4; // width of table's border
  var headerColor = "midnightblue"; // color of table's header
  var headerSize = "+2"; // size of tables header font
  var colWidth = 30; // width of columns in table
  var dayCellHeight = 25; // height of cells containing days of the week
  var dayColor = "darkblue"; // color of font representing week days
  var cellHeight = 40; // height of cells representing dates in the calendar
  var todayColor = "red"; // color specifying today's date in the calendar
  var timeColor = "purple"; // color of font representing current time

  // create basic table structure
  var text = ""; // initialize accumulative variable to empty string
  text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; //
table settings
  text += '<TH COLSPAN=7 bgcolor=orange HEIGHT=' + 10 + '>'; // create table
header cell
  text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set
font for table header
  text += monthName + ' ' + year; 
  text += '</FONT>'; // close table header's font settings
  text += '</TH>'; // close header cell

  // variables to hold constant settings
  var openCol = '<TD BGCOLOR="tan" WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
  openCol += '<FONT COLOR="' + dayColor + '">';
  var closeCol = '</FONT></TD>';

  // create array of abbreviated day names
  var weekDay = new Array(7);
  weekDay[0] = "Sun";
  weekDay[1] = "Mon";
  weekDay[2] = "Tues";
  weekDay[3] = "Wed";
  weekDay[4] = "Thu";
  weekDay[5] = "Fri";
  weekDay[6] = "Sat";
	
  // create first row of table to set column width and specify week day
  text += '<TR ALIGN="center" VALIGN="center">';
  for (var dayNum = 0; dayNum < 7; ++dayNum) {
    text += openCol + weekDay[dayNum] + closeCol; 
  }
  text += '</TR>';
	
  // declaration and initialization of two variables to help with tables
  var dayOfMonth = 1;
  var curCell = 1;
	
  for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
    text += '<TR ALIGN="right" VALIGN="top">';
    for (var col = 1; col <= 7; ++col) {
      if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
        text += '<TD  HEIGHT="25" BGCOLOR="tan"> </TD>';
        curCell++
      } else {
          if (dayOfMonth == date) { // current cell represents today's date
            text += '<TD HEIGHT="25" BGCOLOR="red">' + '<FONT COLOR="blue">' +
dayOfMonth + '</TD>';
          } else {
              text += '<TD HEIGHT="25" BGCOLOR="lightyellow">' + '<FONT
COLOR="red">' + dayOfMonth + '</TD>';
            }
            dayOfMonth++;
        }
    }
    text += '</TR>';
  }
	
  // close all basic table tags
  text += '</TABLE>';
  text += '</CENTER>';

  // print accumulative HTML string
  document.write(text); 
}
</script>
</head>

<body>
<script type="text/javascript"> setCal(); </script>
</body>
</html>

Però ho due problemi:
1) Non vedo praticamete nulla, eppure chiamo la funzione setCal che dovrebbe talvolta richiamare drawCal che stampa a video il calendario.
2) Vorrei inserire due pulsanti "Avanti" e "Indietro" per scorrere i mesi, qualcuno può aiutarmi grazie anticipatamente.

**fcaldera** · 18-12-2012, 18:39

non ho letto tutto il codice ma ho notato che la funzione per il calcolo degli anni bisestili è errato: non è sufficiente determinare se l'anno sia o meno divisibile per 4 in quanto gli anni divisibili per 400 non sono bisestili (come il 2000)

**carlomarx** · 19-12-2012, 00:06

Il codice che hai postato è obsoleto (oltre che prolisso). Qui avevo postato un modo semplice semplice per costruire un calendario. Ti incollo il codice:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function appendCalendar () {

	var
		oTD, oTR = document.createElement("tr"), oTBody = document.createElement("tbody"),
		oTHead = document.createElement("thead"), oTable = document.createElement("table"),
		nIter = 0, oMonthStart = new Date(), aMonthsLen = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
		aDaysNames = ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"];

	for (nIter; nIter < 7; nIter++) {
		oTD = document.createElement("th");
		oTD.innerHTML = aDaysNames[nIter];
		oTR.appendChild(oTD);
	}

	oTHead.appendChild(oTR);
	oMonthStart.setDate(1);
	nIter = 0;

	for (var nEndBlanks = (oMonthStart.getDay() + 6) % 7, nEnd = aMonthsLen[oMonthStart.getMonth()] + nEndBlanks, nTotal = nEnd + ((7 - nEnd % 7) % 7); nIter < nTotal; nIter++) {
		if (nIter % 7 === 0) {
			oTR = document.createElement("tr");
			oTBody.appendChild(oTR);
		}
		oTD = document.createElement("td");
		oTD.innerHTML = nIter < nEndBlanks || nIter + 1 > nEnd ? " " : nIter - nEndBlanks + 1;
		oTR.appendChild(oTD);
	}

	oTable.appendChild(oTHead);
	oTable.appendChild(oTBody);
	document.getElementById("calendar").appendChild(oTable);

}
</script>

</head>

<body onload="appendCalendar();">

<div id="calendar"></div>

</body>
</html>

**carlomarx** · 19-12-2012, 00:08

Appena ho un attimo ti creo anche i pulsanti per muoverti avanti/indietro…

**gaten** · 19-12-2012, 00:16

Si ho visto il tuo codice, è decesiamente meglio, però i pulsanti sono quelli che mi hanno dato più problemi è proprio di quelli che ho bisogno. i pulsantini per andare avanti con i mesi e gli anni.

**carlomarx** · 19-12-2012, 15:06

Ascolta, è fatto di corsa e il CSS fa volutamente schifo (serve solo a farti capire i nomi che ho dato alle classi). Se hai problemi fischia…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">

function Calendar (oParent) {

	this.container = document.createElement("table");
	this.display = document.createElement("div");
	this.current = new Date();

	var
		nId = Calendar.instances.length, oTH, oHRow = document.createElement("tr"),
		oTHead = document.createElement("thead"), oCapt = document.createElement("caption"),
		oDecrYear = document.createElement("div"), oIncrYear = document.createElement("div"),
		oDecrMonth = document.createElement("div"), oIncrMonth = document.createElement("div");

	this.container.className = "calendar";
	this.display.className = "current-month";
	oDecrYear.className = "decrease-year";
	oDecrMonth.className = "decrease-month";
	oIncrMonth.className = "increase-month";
	oIncrYear.className = "increase-year";
	oDecrYear.innerHTML = "&amp;laquo;";
	oDecrMonth.innerHTML = "&amp;lt;";
	oIncrMonth.innerHTML = "&amp;gt;";
	oIncrYear.innerHTML = "&amp;raquo;";
	oDecrYear.id = "decr-year-" + nId;
	oDecrMonth.id = "decr-month-" + nId;
	oIncrMonth.id = "incr-month-" + nId;
	oIncrYear.id = "incr-year-" + nId;
	oDecrYear.onclick = oIncrYear.onclick = oDecrMonth.onclick = oIncrMonth.onclick = Calendar.browseClick;

	for (var nThId = 0; nThId < 7; nThId++) {
		oTH = document.createElement("th");
		oTH.innerHTML = Calendar.daysNames[nThId];
		oHRow.appendChild(oTH);
	}

	oTHead.appendChild(oHRow);
	oCapt.appendChild(oDecrYear); oCapt.appendChild(oDecrMonth); oCapt.appendChild(oIncrYear); oCapt.appendChild(oIncrMonth);
	oCapt.appendChild(this.display); this.container.appendChild(oCapt); this.container.appendChild(oTHead);

	this.current.setDate(1);
	this.writeDays();

	oParent.appendChild(this.container);

	Calendar.instances.push(this);

}

Calendar.monthsNames = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
Calendar.daysNames = ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"];
Calendar.monthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
Calendar.zeroIsMonday = true; // il primo giorno della settimana e' lunedi' o domenica?
Calendar.instances = [];
Calendar.browseClick = function () {
	var bIsMonth = /\-month\-/.test(this.id), nDelta = /^decr\-/.test(this.id) ? -1 : 1, oThisCal = Calendar.instances[this.id.replace(/^\D+/, "")];
	oThisCal.current[bIsMonth ? "setMonth" : "setYear"](oThisCal.current[bIsMonth ? "getMonth" : "getFullYear"]() + nDelta);
	oThisCal.writeDays();
}

Calendar.prototype.writeDays = function () {

	var oTD, oTR;

	if (this.oTBody) { this.container.removeChild(this.oTBody); }

	this.oTBody = document.createElement("tbody");

	for (

		var
			nIter = 0, nEndBlanks = (this.current.getDay() + Calendar.zeroIsMonday * 6) % 7, nEnd = Calendar.monthLengths[this.current.getMonth()] + nEndBlanks,
			nTotal = nEnd + ((7 - nEnd % 7) % 7);

		nIter < nTotal;

		nIter++

	) {

		if (nIter % 7 === 0) {
			oTR = document.createElement("tr");
			this.oTBody.appendChild(oTR);
		}
		oTD = document.createElement("td");
		oTD.innerHTML = nIter < nEndBlanks || nIter + 1 > nEnd ? "&amp;nbsp;" : nIter - nEndBlanks + 1;
		oTR.appendChild(oTD);

	}

	this.display.innerHTML = Calendar.monthsNames[this.current.getMonth()] + " " + this.current.getFullYear();

	this.container.appendChild(this.oTBody);

}
</script>

<style type="text/css">
	table.calendar {
		background-color: #ffff00;
		width: 500px;
	}

	table.calendar td {
		text-align: center;
	}

	table.calendar caption {
		background-color: #0000ff;
	}

	div.current-month {
		width: 150px;
		height: auto;
		margin: 0 auto;
		background-color: #aaaaaa;
	}

	div.decrease-month, div.decrease-year {
		float: left;
		margin-right: 4px;
		cursor: pointer;
		background-color: #00aa00;
	}

	div.increase-month, div.increase-year {
		float: right;
		margin-left: 4px;
		cursor: pointer;
		background-color: #00aa00;
	}
</style>

</head>
<body onload="new Calendar(document.getElementById('contenitore1'));new Calendar(document.getElementById('contenitore2'));">


Blablabla</p>
<div id="contenitore1"></div>


Blablabla</p>
<div id="contenitore2"></div>
</body>
</html>

**gaten** · 19-12-2012, 15:17

Grazie mille!!!

L'unica cosa, potresti dirmi precisamente cosa fà questa funzione

codice:

Calendar.prototype.writeDays = function () {

	var oTD, oTR;

	if (this.oTBody) { this.container.removeChild(this.oTBody); }

	this.oTBody = document.createElement("tbody");

	for (

		var
			nIter = 0, nEndBlanks = (this.current.getDay() + Calendar.zeroIsMonday * 6) % 7, nEnd = Calendar.monthLengths[this.current.getMonth()] + nEndBlanks,
			nTotal = nEnd + ((7 - nEnd % 7) % 7);

		nIter < nTotal;

		nIter++

	) {

		if (nIter % 7 === 0) {
			oTR = document.createElement("tr");
			this.oTBody.appendChild(oTR);
		}
		oTD = document.createElement("td");
		oTD.innerHTML = nIter < nEndBlanks || nIter + 1 > nEnd ? "" : nIter - nEndBlanks + 1;
		oTR.appendChild(oTD);

	}

	this.display.innerHTML = Calendar.monthsNames[this.current.getMonth()] + " " + this.current.getFullYear();

	this.container.appendChild(this.oTBody);

}

Inoltre se volessi rendere cliccabili i giorni, ad esempio associare al giorno 25 dicembre 2012 il valore: 25 Dec 2012, e così via a tutti gli altri campi, come posso fare?

**carlomarx** · 19-12-2012, 15:38

Originariamente inviato da gaten
Grazie mille!!!

L'unica cosa, potresti dirmi precisamente cosa fà questa funzione

Come suggerisce il nome, scrive i giorni nella tabella.

Originariamente inviato da gaten
Inoltre se volessi rendere cliccabili i giorni, ad esempio associare al giorno 25 dicembre 2012 il valore: 25 Dec 2012, e così via a tutti gli altri campi, come posso fare?

È solo un possibile esempio…:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">

function Calendar (oParent) {

	this.container = document.createElement("table");
	this.display = document.createElement("div");
	this.current = new Date();

	var
		nId = Calendar.instances.length, oTH, oHRow = document.createElement("tr"),
		oTHead = document.createElement("thead"), oCapt = document.createElement("caption"),
		oDecrYear = document.createElement("div"), oIncrYear = document.createElement("div"),
		oDecrMonth = document.createElement("div"), oIncrMonth = document.createElement("div");

	this.container.className = "calendar";
	this.display.className = "current-month";
	oDecrYear.className = "decrease-year";
	oDecrMonth.className = "decrease-month";
	oIncrMonth.className = "increase-month";
	oIncrYear.className = "increase-year";
	oDecrYear.innerHTML = "&amp;laquo;";
	oDecrMonth.innerHTML = "&amp;lt;";
	oIncrMonth.innerHTML = "&amp;gt;";
	oIncrYear.innerHTML = "&amp;raquo;";
	oDecrYear.id = "decr-year-" + nId;
	oDecrMonth.id = "decr-month-" + nId;
	oIncrMonth.id = "incr-month-" + nId;
	oIncrYear.id = "incr-year-" + nId;
	oDecrYear.onclick = oIncrYear.onclick = oDecrMonth.onclick = oIncrMonth.onclick = Calendar.browseClick;

	for (var nThId = 0; nThId < 7; nThId++) {
		oTH = document.createElement("th");
		oTH.innerHTML = Calendar.daysNames[nThId];
		oHRow.appendChild(oTH);
	}

	oTHead.appendChild(oHRow);
	oCapt.appendChild(oDecrYear); oCapt.appendChild(oDecrMonth); oCapt.appendChild(oIncrYear); oCapt.appendChild(oIncrMonth);
	oCapt.appendChild(this.display); this.container.appendChild(oCapt); this.container.appendChild(oTHead);

	this.current.setDate(1);
	this.writeDays();

	oParent.appendChild(this.container);

	Calendar.instances.push(this);

}

Calendar.monthsNames = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
Calendar.daysNames = ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"];
Calendar.monthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
Calendar.zeroIsMonday = true; // il primo giorno della settimana e' lunedi' o domenica?
Calendar.instances = [];
Calendar.browseClick = function () {
	var bIsMonth = /\-month\-/.test(this.id), nDelta = /^decr\-/.test(this.id) ? -1 : 1, oThisCal = Calendar.instances[this.id.replace(/^\D+/, "")];
	oThisCal.current[bIsMonth ? "setMonth" : "setYear"](oThisCal.current[bIsMonth ? "getMonth" : "getFullYear"]() + nDelta);
	oThisCal.writeDays();
};

Calendar.prototype.writeDays = function () {

	var oTD, oTR;

	if (this.oTBody) { this.container.removeChild(this.oTBody); }

	this.oTBody = document.createElement("tbody");

	for (

		var
			nDay, nIter = 0, nEndBlanks = (this.current.getDay() + Calendar.zeroIsMonday * 6) % 7,
			nEnd = Calendar.monthLengths[this.current.getMonth()] + nEndBlanks, nTotal = nEnd + ((7 - nEnd % 7) % 7);

		nIter < nTotal;

		nIter++

	) {

		if (nIter % 7 === 0) {
			oTR = document.createElement("tr");
			this.oTBody.appendChild(oTR);
		}
		nDay = nIter - nEndBlanks + 1;
		oTD = document.createElement("td");
		oTD.innerHTML = nIter < nEndBlanks || nIter + 1 > nEnd ?
			"&amp;nbsp;"
			: "<a href=\"calendario.php?data=" + this.current.getFullYear() + "-" +  + (this.current.getMonth() + 1) + "-" + (nDay / 100).toFixed(2).substr(-2) + "\">" + nDay + "<\/a>";
		oTR.appendChild(oTD);

	}

	this.display.innerHTML = Calendar.monthsNames[this.current.getMonth()] + " " + this.current.getFullYear();

	this.container.appendChild(this.oTBody);

};
</script>

<style type="text/css">
	table.calendar {
		background-color: #ffff00;
		width: 500px;
	}

	table.calendar td {
		text-align: center;
	}

	table.calendar caption {
		background-color: #0000ff;
	}

	div.current-month {
		width: 150px;
		height: auto;
		margin: 0 auto;
		background-color: #aaaaaa;
	}

	div.decrease-month, div.decrease-year {
		float: left;
		margin-right: 4px;
		cursor: pointer;
		background-color: #00aa00;
	}

	div.increase-month, div.increase-year {
		float: right;
		margin-left: 4px;
		cursor: pointer;
		background-color: #00aa00;
	}
</style>

</head>
<body onload="new Calendar(document.getElementById('contenitore1'));new Calendar(document.getElementById('contenitore2'));">


Blablabla</p>
<div id="contenitore1"></div>


Blablabla</p>
<div id="contenitore2"></div>
</body>
</html>

Discussione: Inserire puslanti avanti e indietro calendario javascript

Strumenti discussione

Ricerca discussione

Visualizza

Inserire puslanti avanti e indietro calendario javascript

Permessi di invio