Kalendář do stránek můžete vytvořit např. pomocí ActiveX, ale ten bude chodit pouze v Internet Exploreru, což je v dnešní době, kdy má Netscape stále podíl kolem 8 procent, nepoužitelné. Jednou z dalších technologií, která vám bude fungovat ve všech moderních prohlížečích je JavaScript a dnešní článek vám ukáže, jak si v něm kalendář napsat.

Nejdříve si vytvoříme formulář s ovládacími prvky pro kalendář:

<style type="text/css">
.button {
width:25px;
font-family:Tahoma;
font-size:12px;
}
</style>
<form name="myform" onSubmit="return false;">
<table border="0" cellpadding=1 cellspacing=0 bgcolor="#A0A0A0" bordercolor="#000000">
<tr>
<td colspan="7">
<select size="1" name="Mesice" onChange="setNMonth(this.options[selectedIndex].value);">
<option value=0>Leden</option>
<option value=1>Únor</option>
<option value=2>Březen</option>
<option value=3>Duben</option>
<option value=4>Květen</option>
<option value=5>Červen</option>
<option value=6>Červenec</option>
<option value=7>Srpen</option>
<option value=8>Září</option>
<option value=9>Říjen</option>
<option value=10>Listopad</option>
<option value=11>Prosinec</option>
</select>
<input type="text" name="Rok" size="5"><input type="button" value="Rok" onClick="setNYear()"></td>
</tr>
<tr bgcolor="#808080">
<td>Po</td>
<td>Út</td>
<td>St</td>
<td>Čt</td>
<td>Pá</td>
<td>So</td>
<td>Ne</td>
</tr>
<tr>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B0"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B1"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B2"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B3"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B4"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B5"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B6"></td>
</tr>
…….Řádky s tlačítky B7-B34…….
<tr>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B35"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B36"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B37"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B38"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B39"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B40"></td>
<td><input type="button" onClick="ShowDate(this.value);" value=" – " CLASS=button name="B41"></td>
</tr>
</table>
</form>

Formuláři pro naši demonstraci zakážeme odesílání pomocí onSubmit="return false;", jelikož novější verze obou hlavních prohlížečů odesílají formuláře na <ENTER>.

Hlavní funkcí v tomto scriptu je funkce setCalendar(dt), která nastavuje tlačítka. Jako parametr dostává datum. Touto funkci také inicializujeme jednotlivá tlačítka. Inicializaci provedeme pomocí onLoad="setCalendar(cDate);", které vložíme do sekce BODY. Hodnotu cDate získáme sejmutím stávajícího datumu.

var cDate=new Date();
var cYear=cDate.getFullYear();
var cMonth=cDate.getMonth();
var cDay=cDate.getDate();

function setCalendar(dt) {
cYear=dt.getFullYear();
cMonth=dt.getMonth();
cDay=dt.getDate();
firstDay = dt.getDay();
for(i = 0; i < 42; i++)
eval("document.myform.B"+i+".value=‘-‚");
if ((firstDay -2)<-1)
firstDay +=7;
dayspermonth = getDaysPerMonth(cMonth);
for(i = 1; i < dayspermonth+1; i++){
i1=(i<10)? "0"+i : i;
eval("document.myform.B"+(i+firstDay -2)+".value=’"+i1+"’");
}
document.myform.Mesice.selectedIndex=cMonth;
document.myform.Rok.value=cYear;
}

Funkce si nejdříve z předaného datumu uloží do proměnných den, měsíc a rok pro pozdější použití. Dále si zjistí pořadí prvního dne v měsíce. To zjistíme pomocí metody getDay() objektu Date. Pak funkce vymaže obsah tlačítek pro jednotlivé dny a vypočítá posuv pro zobrazování. Tento posuv je nutný jelikož dny jsou indexovány od nuly a první den týdnu je chápán v US formátu, tj. jako neděle. Pak zavoláme funkci getDaysPerMonth s parametrem, kterým je stávající měsíc. Měsíce jsou opět indexovány od nuly. Tato metoda vrací počet dnů v měsíci a vypočítává délku února.

function getDaysPerMonth(m){
daysArray=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
days=daysArray[m];
if (m==1){
if((cYear% 4) == 0) {
if(((cYear% 100) == 0) && (cYear% 400) != 0)
days = 28;
else
days = 29;
}
}
return days;
}

Potom nastavíme hodnoty tlačítek se dny. Dny s číslem menším než 10 zarovnáme zprava na nulu, aby byla všechna tlačítka stejně široká. Jelikož funkce setCalendar může být volána z více míst, pro jistotu nastavíme pulldown menu s měsíci na stávající a to samé provedeme s polem pro roky.

Funkce, která slouží pro změnu měsíce se jmenuje setNMonth a jako parametr dostává číslo měsíce. Funkce se aktivuje při změně měsíce v pulldown menu.

function setNMonth(m){
cMonth=m;
setCalendar(new Date(cYear,cMonth,1));
}

Obdobná funkce pro nastavení roku se jmenuje setNYear. Obsahuje navíc pouze kontrolu zda zadaný rok je číslo. Aktivuje se stiskem tlačítka "Rok".

function setNYear(){
temp=parseInt(document.myform.Rok.value);
if (isNaN(temp)){
alert("Rok musí být číslo");
return;
}
cYear=temp;
setCalendar(new Date(cYear,cMonth,1));
}

No a aby náš script dělal i něco jiného než ukazoval kalendář, tak jednotlivá tlačítka reagují na událost onClick a posílají svoji hodnotu do funkce showDate, která zobrazí vybrané datum.

function ShowDate(temp){
if (temp==“-„)
return;
cDay=temp;
strA=cDay + „.“ + (cMonth+1) + „.“ + cYear+ „\n“;
strA+=cDay + „.“ + document.myform.Mesice.options[cMonth].text + “ “ +cYear;
alert(strA);
}

A nakonec nesmí chybět ani ukázka.

Kalendář by měl bez problémů fungovat od čtyřkových verzí prohlížečů nahoru, testováno v Internet Exploreru 5.0 a Netscape 4.75. A to je pro dnešek vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět