In pratica, in un form ho un select dove seleziono la destinazione del mio viaggio (ad es. Amsterdam). in seguito ho un campo dove inserire la data di partenza che sfrutta un calendario. Vorrei che su quel calendario, in base alla selezione precedentemente fatta, i giorni utili (quelli in cui è possibile partire, ad esempio tutti i lunedì e sabato) siano evidenziati con un altro colore. Il calendario presente sul file html richiama tre file:
1. theme.css
2. calendar.js
3. calendar-it.js
Attualmente il colore diverso è solo quello della domenica (colore rosso) ed ho notato che è possibile cambiare colore dei giorni operando sul terzo file (calendar-it.js) nella parte relativa a: Calendar._TT["WEEKEND"] = "0". Dove se al possto dello 0 sostituisco con 6, allora nel calendario il giorno segnalato in rosso è il sabato.
Forse ci vorrebbe quindi una funzione JS che, se seleziono Amsterdam, allora Calendar._TT["WEEKEND"] = "1, 5". se seleziono Parigi allora ["WEEKEND"] = "0, 4". etc. PS: sulla virgola non sono sicuro.
Questo è il file html:
<!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" lang="it">
<head>
<link rel="stylesheet" type="text/css" media="all"
href="skins/aqua/theme.css" title="Aqua" />
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar-it.js"></script>
<script type="text/javascript">
var oldLink = null;
function setActiveStyleSheet(link, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link;
link.style.fontWeight = 'bold';
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
cal.callCloseHandler();
}
function closeHandler(cal) {
cal.hide(); // hide the calendar
// cal.destroy();
_dynarch_popupCalendar = null;
}
function showCalendar(id, format, showsTime, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
// we already have some calendar created
_dynarch_popupCalendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(1, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
_dynarch_popupCalendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
_dynarch_popupCalendar.setDateFormat(format); // set the specified date format
_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field
_dynarch_popupCalendar.sel = el; // inform it what input field we use
_dynarch_popupCalendar.showAtElement(el.nextSiblin g, "Br"); // show the calendar
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() {
var parent = document.getElementById("display");
var cal = new Calendar(0, null, flatSelected);
cal.weekNumbers = false;
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("%A, %B %e");
cal.create(parent);
cal.show();
}
</script>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000"
link="#0000ee" vlink="#551a8b">
<form enctype="multipart/form-data" class="subb"
method="post" action="mail_prenotazione.php">
<table style="text-align: left;" border="0"
cellpadding="1" cellspacing="2">
<caption style="font-weight: bold; color: rgb(51, 51, 51);">Prenota
ora il tuo week end con partenza da Pescara!!!</caption> <tbody>
<tr>
<td style="height: 10px; width: 150px;"></td>
<td style="width: 403px;"></td>
</tr>
<tr>
<td style="width: 150px;"><span
style="font-weight: bold; color: rgb(51, 51, 51);">Dettaglio
volo</span></td>
<td style="width: 403px;"></td>
</tr>
<tr>
<td style="width: 150px;">In partenza da:</td>
<td style="width: 403px;"><input
readonly="readonly" value="Pescara" name="partenza"
size="17" /></td>
</tr>
<tr>
<td style="width: 150px;">Destinazione:</td>
<td style="width: 403px;">
<select name="product"
onchange="updateSum( this.form, 'product', 'quantity', 'price');">
<option selected="selected">Scegli destinazione</option>
<option value="69 Amsterdam">Amsterdam</option>
<option value="59 Barcellona">Barcellona</option>
<option value="69 Bruxelles">Bruxelles</option>
<option value="69 Cagliari">Cagliari</option>
<option value="69 Colonia">Colonia/Bonn</option>
<option value="69 Francoforte">Francoforte</option>
<option value="69 Londra">Londra</option>
<option value="69 Lussemburgo">Lussenburgo/Treviri</option>
<option value="69 Milano">Milano/Bergamo</option>
<option value="69 Oslo">Oslo</option>
<option value="69 Parigi">Parigi</option>
<option value="69 Trapani">Trapani</option>
</select>
</td>
</tr>
<tr>
<td style="width: 150px;">Data di partenza:</td>
<td style="width: 403px;"><input name="data1"
id="sel3" size="10" /><input
value="vedi calendario"
onclick="return showCalendar('sel3', '%d/%m/%Y');" type="reset" /></td>
</tr>
<tr>
<td style="width: 150px;">Data di ritorno:</td>
<td style="width: 403px;"><input name="data2"
id="sel4" size="10" /><input
value="vedi calendario"
onclick="return showCalendar('sel4', '%d/%m/%Y');" type="reset" /></td>
</tr>
<td style="width: 403px;"> <input name="A1"
value="Prosegui" onclick="controllo(this.form);"
type="button" /></td>
</tbody>
</table>
</form>
</body>
</html>
