Měsíční kalendář v JavaScriptu potřetí

V minulých dvou článcích jsme si ukázali výrobu JavaScriptového měsíčního kalendáře a jeho navázání na tabulku plánovaných událostí či výročí. Protože každým pořádným kalendářem je potřeba listovat, ukážeme si dnes, jak lze do uvedeného skriptu doplnit navigaci mezi měsíci, potažmo léty.

Ukázka se zobrazí po kliknutí zde. Oproti původnímu kalendáři přibyla v horní části stránky tabulka se sérií odkazů, které přepínají zobrazení kalendáře pro další měsíce roku, eventuelně pro další roky.

Na začátek něco teoretických úvah. Navigace je v principu dělána tak, že se obnovuje (nebo spíše znovu otevírá) aktuální stránka, přičemž parametry, který rok a měsíc se má zobrazit, jsou předávány v URL – adrese odkazu obvyklou „otazníkovo-ampersandovou“ konvencí. V uvedeném příkladu je jak vytváření tohoto URL, tak jeho zpětné dekódování řešeno na klientské straně JavaScriptem. Stejný princip lze ovšem realizovat serverovým skriptem, např. ASP, popřípadě se o tuto práci mohou obě strany „podělit“. Volba řešení je otázkou vkusu a technických možností konkrétní aplikace, jako třetí možnost předání parametrů lze naznačit použití cookie, které se ovšem zdá být nejméně spolehlivé (uživatel může mít cookies vypnuty).

Volba klientský/serverový skript má také vliv na tabulku událostí či výročí. Pokud použijeme ke generování skript na straně serveru, stačí generovat události pouze pro zobrazovaný měsíc, v případě klientského skriptu musíme mít ve stránce vypsány události pro celý rok (tak jak je to v příkladu), nebo dokonce rozšířit tabulku událostí z formátu měsíce x dny o třetí rozměr (roky) a vypsat všechny události v celém rozmezí let, které si uživatel může zobrazit. Uvedená ukázka toto neřeší, tj. zobrazuje pouze každoročně se opakující události (např. výročí).

Do třetice, při použití serverového skriptu je namístě uvážit, zda celé vypisování tabulky nepřesunout na serverovou stranu a JavaScriptu se tak nevyhnout úplně. Osobně se domnívám, že záleží na aplikaci – tam, kde je kalendář pouze doplňkem webu a nikoliv jeho životně důležitou součástí, každopádně použití JavaScriptu ulehčí serveru – vždy je však třeba vzít v úvahu uživatele, který má JavaScript vypnut a kalendář se mu nezobrazí.

Šedivá všechna teorie, zelený je strom života. Pojďme k provedeným úpravám (ukázka opět využívá v dřívějších článcích popsané skripty, a proto si popíšeme pouze změny či doplnění).

Jako první přibyla ke skriptu nová funkce WriteNavigation. Ta vypisuje tabulku zobrazenou v záhlaví stránky s odkazy na ostatní měsíce roku a na předchozí/následující rok. Přijímá dva parametry, the_month a the_year, které určují aktuální měsíc a rok (které jsou v tabulce zvýrazněny). Veškeré odkazy vytvořené v této funkci volají „redirekční“ funkci ChangeDate, kterou si popíšeme vzápětí. Funkce WriteNavigation je pouze sérií volání document.write, v nejjednodušší grafické formě. Vhodné grafické řešení by například bylo připodobnit tuto tabulku záložkám, známým z dialogových boxů v rozhraní Windows9x.

Funkce ChangeDate má za úkol vytvořit URL adresu, obsahující jako parametry měsíc a rok, který se má zobrazit (ty jsou do funkce předány jako její parametry), a provést skok na tuto adresu. Je využita vlastnost href objektu location, podmínka ve funkci má za úkol odfiltrovat „parametrovou“ část stávající adresy – tedy případ, kdy už byla aspoň jednou redirekce provedena a funkce ChangeDate se volá znovu.

Funkce WriteMonthTable nedoznala proti minulému článku žádných úprav vyjma rozšíření vypisované tabulky na 600px, kvůli zarovnání s tabulkou vypisovanou funkcí WriteNavigation.

Zbývá uvést poslední část kódu, jíž se nahradí skript, který v předchozích verzích volal funkci WriteMonthTable s parametry odpovídajícími aktuálnímu datu. Nyní má tento kód za úkol zjistit z URL adresy předané parametry požadovaného měsíce a roku, a zavolat s těmito parametry výpis jak navigační tabulky (WriteNavigation), tak samotného měsíčního kalendáře (WriteMonthTable).

Poznámka na okraj: zde se k dekódování parametrů používá řetězcových funkcí na celé URL adrese, část odkazu s parametry lze rovněž volitelně získat pomocí konstrukce location.search.

To je pro tentokrát k měsíčnímu kalendáři vše. Princip navigace a kódování parametrů lze po zobecnění s výhodou použít i pro jiné aplikace, zejména tam, kde není k dispozici podpora serverových skriptů.

Přeji vám příjemný den.

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

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