Měsíční kalendář pomocí JavaScriptu podruhé

25. září 2001

•

V minulém článku jsme si předvedli zobrazení měsíčního kalendáře pomocí JavaScriptu. Dnes doplníme tento kalendář o jednoduchý diář plánovaných akcí nebo výročí.

Na úvod je potřeba zdůraznit, že dále uvedený skript má za úkol pouze zobrazit do měsíčního kalendáře zadaná data událostí. Neřeší tedy přidávání dat do databáze – i toto by se sice dalo aspoň v omezeném rozsahu realizovat „čistým“ JavaScriptem (například pomocí cookies), osobně se však domnívám, že by šlo o řešení poněkud samoúčelné a že hlavní aplikace kalendáře bude v propojení se serverovým skriptem (ASP, PHP), který může v návaznosti na databázi řešit správu událostí, výročí, popřípadě úkolů. Na klientském (java)skriptu zůstává tedy pouze úkol rozumného zobrazení, který si nyní popíšeme.

První úkolem je vytvoření vhodné datové struktury, do níž budou data o událostech zapsána. V příkladu je použito dvourozměrné pole (respektive „pole polí“ v rozložení měsíce x dny), odpovídající jednotlivým dnům v roce. Každý prvek pole může obsahovat hodnotu null (bez události) nebo objekt Event, který v sobě ukládá data o jedné nebo více událostech připadajících na daný den. Vytvoření a inicializace zmíněného pole vypadá takto:

var c_event = new Array()
for( var i=1; i<=12; i++ ) {
 c_event[i]=new Array
 for(j=0; j<31; j++)
 c_event[i][j] = null
}

Chceme-li do pole c_event ukládat objekty typu Event, musíme vytvořit konstruktor. Ten v sobě obsahuje jednak inicializaci objektu a rovněž definici metody Add, která má za úkol přidat jednu událost do objektu Event. Pro zestručnění zápisu následného kódu konstruktor zároveň okamžitě volá metodu Add, tzn. přidává ihned první událost do objektu Event – do sebe sama. První parametr konstruktoru i metody Add, txt, popisuje přidávanou událost – např. textem „Schůze ve 12.30“, druhý určuje prioritu události číslem v rozsahu 1..3.

function Event( txt, priority ) {
    this.txts = new Array()
    this.priorities = new Array()
    this.count = 0
    this.Add = function( txt, priority ) {
        this.count++
        this.txts[this.count] = txt
        this.priorities[this.count] = priority
    }
    this.Add(txt,priority)
}

Jako třetí vytvoříme pomocnou funkci AddEvent pro přidání události do pole c_event, která kontroluje, zda příslušná buňka pole již obsahuje objekt Event či nikoliv a podle toho buď voláním konstruktoru vytváří nový objekt, nebo pouze přidává událost do stávajícího objektu:

function AddEvent( theDay, theMonth , txt, priority ) {
    if(c_event[theMonth][theDay-1]==null) {
        c_event[theMonth][theDay-1] = new Event( txt, priority )
    } else {
        c_event[theMonth][theDay-1].Add( txt, priority )
    }
}

Nyní může následovat úsek, v němž jsou do výše uvedených datových struktur plněna konkrétní data. Jak již bylo řečeno, tuto část JavaScriptového kódu by měl generovat serverový skript (lze rovněž s výhodou využít odkaz na „include“ .js soubor). Přidání dat v našem příkladu vypadá nějak takto:

AddEvent( 12,9, "Maruška má svátek", 2 )
AddEvent( 22,9, "Začíná podzim", 3 )
AddEvent( 22,9, "Janička má narozeniny", 1 )

Zbývající část se zabývá nutnými úpravami skriptu, uvedeného v minulém čísle, pro potřeby zobrazení právě nadefinovaných událostí. Pro úsporu místa si zde neukážeme skript celý, pouze jeho nutné úpravy.

Hlavní modifikace se týká funkce WriteCell, která zobrazuje obsah buňky tabulky (tj. jednoho dne). Přibyl jí třetí parametr, určující objekt Event s událostmi pro zobrazovaný den (může rovněž nabývat hodnoty null). Na funkci není nic složitého, jedná se opět jen o sérii volání document.write a zcela jistě bude při konkrétní aplikaci upravována s ohledem na grafiku celé stránky.

Další úpravy se týkají funkce WriteMonthTable,respektive všech volání WriteCell v této funkci. Pro první a poslední volání (kde se vytvářejí prázdné doplňující buňky tabulky se šedým podkladem, doplníme pouze předání třetího parametru null…

WriteCell("gray",0,null)

…pro zbývající dvě volání funkce WriteCell již jako třetí parametr předáme hodnotu konkrétní buňky pole c_event:

WriteCell(cellColor,day_counter,c_event[the_month+1][day_counter-1])

Jak celý upravený měsíční kalendář s přehledem událostí vypadá, se můžete přesvědčit zde (protože data událostí jsou navedena jen pro září, nezobrazí se v otevřeném okně kalendář pro aktuální měsíc, ale pro září aktuálního roku).

To je pro tentokrát vše, přeji vám příjemný den.