Kalendář v JavaScriptu

31. října 2000

•

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ář:

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.

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.