Table Calendar Component - Browse months using AJAX

V předchozím článku jsme si ukázali, jak zobrazit data ve formě kalendáře pomocí komponenty  Table Calendar. Nyní si ukážeme, jak vytvořit kalendář, ve kterém půjde listovat i jednotlivými měsíci. Bude zde použita technologie AJAX (Asynchronous JavaScript and XML, která umožňuje načíst část stránky bez toho, aby bylo nutné celou stránku znovu celou generovat.

Příprava layoutu

Představme si, že kalendář, který jsme si vytvořili pomocí předchozího článku, zobrazujeme v nějakém panelu, tedy, že jej máme vložen v global layoutu. To znamená, že v global layoutu máme přímo umístěnou komponentu Table Calendar.

Abychom mohli dynamicky načítat kalendář, musíme tuto komponentu přesunout do samostatného layoutu (tento a pouze tento layout pak budeme načítat pomocí AJAX). Vytvoříme tedy nový layout například s názvem calendar a do něj umístíme původní komponentu Table Calendar. V global layoutu tuto původní komponentu nahradíme komponentou Include Layout s nastavením názvu layoutu calendar, čímž bude docíleno to, že při načtení stránky se kalendář z layoutu calendar vloží.

Abychom mohli pomocí JavaScriptu a AJAX zaměnit obsah tohoto kalendáře, je nutné ještě "obalit" komponentu Include Layout v global layoutu divem, kterému musíme nastavit nějaké id - např. calendarDiv, abychom tento div mohli pomocí JavaScript najít a nahradit jeho obsah novým kalendářem po kliknutí na tlačítka následující nebo předchozí měsíc. Tyto tlačítka vytvoříme později.

Na konci tohoto kroku tedy máme v global layoutu div s id=calendarDiv, v něm komponentu Include Layout a samostatný layout s nazvem calendar, který již bude generovat samotný kalendář.

Zobrazení aktuálního měsíce a tlačítek pro posun mezi měsíci

Nyní upravíme layout s názvem calendar. Do tohoto layoutu vložíme na začátek tento PHP skript:

if ($month == "")
	$month = (int)date("m", time());
if ($year == "")
	$year = (int)date("Y", time());

$prevMonth = ($month-1 < 1 ? 12 : $month-1);
$prevYear = ($month-1 < 1 ? $year-1 : $year);
$nextMonth = ($month+1 > 12 ? 1 : $month+1);
$nextYear = ($month+1 > 12 ? $year+1 : $year);

$months = array("leden", "únor", "březen", "duben", "květen", "červen", "červenec", "srpen", "září", "říjen", "listopad", "prosinec");

$bom = TDateTime::BOM(mktime(0, 0, 0, $month, 1, $year))->asString();
$eom = TDateTime::EOM(mktime(0, 0, 0, $month, 1, $year))->asString();

Pomocí AJAX totiž budeme předávat parametry $month a $year, které budou určovat, který měsíc a rok se má zobrazit. Proměnné $bom a $eom určují datum prvního a posledního dne v daném měsíci v SQL formátu a využijeme je v samotné komponentě Table Calendar. Proměnné $prevMonth, $prevYear, $nextMonth a $nextYear pak využijeme u tlačítek pro posun mezi měsíci.

Nyní tedy upravíme samotnou komponentu Table Calendar tak, že nastavíme tyto vlastnosti, díky čemuž máme dynamické zobrazování určitého měsíce:

Datum od: {php: $bom}
Datum do: {php: $eom}

Teď už zbývá pouze do tohoto layoutu doplnit zobrazení měsíce a roku a tlačítek pro posun mezi měsíci. Pro zobrazení aktuálního měsíce a roku vložte tento PHP skript:

echo $months[$month-1]."/".$year;

A pak už jenom stačí vytvořit 2 odkazy pro posun mezi měsíci:

<a onclick="loadCalendar({php:$prevMonth},{php:$prevYear});return false;">Předchozí měsíc</a>
<a onclick="loadCalendar({php:$nextMonth},{php:$nextYear});return false;">Další měsíc</a>

Jak je vidět, není to klasický odkaz, ale po kliknutí se volá JavaScript, na který se teď podíváme.

JavaScript pro načtení a zobrazení kalendáře pomocí AJAX

Nyní už zbývá poslední krok, deklarace funkce obsluhující načítání kalendáře. Do global layoutu tedy vložíme JavaScript s tímto obsahem:

function loadCalendar(month, year)
{
        // najdeme div, který obsahuje původní kalendář a jehož obsah chceme nahradit
	var container = document.getElementById("calendarDiv");

        // načteme pomocí AJAX layout s názvem calendar, předáváme parametry month a year
	var content = AJAX.getLayout("calendar", {'month':month,'year':year});

        // nahradíme obsah divu načteným novým kalendářem
	container.innerHTML = content;
}

... kalendář, kterým lze procházet je hotový

Powered by Visual PHP ™