EventCalendar – kalendář s přehledem akcí

Pěkné a rychlé demo. Hoď to do doplňků, kde by se hodilo sepsat pár krátkých návodů, jak čeho dosáhnout a co je k tomu potřeba.

• Hodila by se možnost kliknout na daný datum a dostat jej do presenteru, kde by se s ním nějak pracovalo, např. se vypsaly dané akce apod.
• Jazykové verze by možná neuškodilo mít v nějakých externích souborech (neon syntax) místo getNames(), ušetřilo by se tím místo v controlu a usnadnila použitelnost.

P.S.: Konkurence je super způsob vývoje věcí a možnost inspirace, jen tak dál :).

• Jazykové verze by možná neuškodilo mít v nějakých externích souborech (neon syntax) místo getNames(), ušetřilo by se tím místo v controlu a usnadnila použitelnost.

Nebo tam dát jako výchozí angličtinu a přidat setter pro ITranslator.

Na stránku doplňků mě to momentálně nepustí (asi jak jsem krátce registrován), tak to zatím napíšu sem. Za všechny návrhy děkuju, zkusím si s tím pohrát. Současný stav považuji za verzi 0.1, takže kdybych něco provedl, upozorním na to a změním i číslo verze.

Použití komponenty EventCalendar:

pro základní použití stačí např. napsat továrničku na komponentu:

createComponentCalendar() {
	$cal = new EventCalendar();
        $cal->setEvents(new EventModel());
	return $cal;
}

tento kód vytvoří kalendář s anglickými názvy dnů a měsíců a týden bude začínat nedělí, navigační tlačítka posouvající měsíci budou zobrazena nahoře i dole

pro český formát kalendáře je nutné následující:

$cal->setLanguage(EventCalendar::CZECH); // české názvy měsíců a dnů
$cal->setMode(EventCalendar::FIRST_MONDAY); // týden začne pondělkem

pokud budu chtít z jakéhokoliv důvodu vlastní názvy dnů a měsíců (jiný jazyk, nekrácené názvy dnů apod.):

$cal->setLocalNames(array(
    "monthNames" => array(1 => "Enero", "Febrero", "Marzo", "Abril", "Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"),
    "wdays" => array("Lu","Ma","Mi","Ju","Vi","Sá","Do")
));

výše uvedeným například nastavím názvy dnů a měsíců do španělštiny

pozměnit mohu i výchozí navigaci, tímto se zbavím dolních tlačítek pro změnu měsíce:

$cal->setOptions(array("showBottomNav"=>FALSE));

nebo změním text horních tlačítek z << a >> na prázdný řetězec (a pomocí css si pak nastavím třeba obrázek):

$cal->setOptions(array("topNavPrev"=>"","topNavNext"=>""));

samotný model událostí pro kalendář pak musí implementovat toto rozhraní:

interface IEventModel {

    /**
     * zjistí, zda pro daný den existuje událost
     * @return boolean
     */
    public function isForDate($year,$month,$day);

    /**
     * vrátí pole událostí pro daný den
     * @return array
     */
    public function getForDate($year,$month,$day);
}

Poznámka: obou metodám v tuto chvíli předává komponenta měsíce a dny bez nul – např. pro leden 1 nikoli 01

CSS třídy ke stylování:
eventCalendar – div obalující celý kalendář
ec-monthTable – tabulka kalendáře
ec-validDay – den v měsíci
ec-eventDay – den, pro který existuje nějaká událost (zároveň obaluje události daného dne)
ec-empty – buňka tabulky, která neobsahuje žádný den (=jiný měsíc)
ec-dayOfEvents – třída pro samotný den (není rodičem pro div, který obaluje události dne, ale sourozencem)
ec-eventBox – div obal pro události dne
ec-event – obsahuje jednotlivou událost

výpis událostí se ve skutečnosti vypíše dovnitř buňky s daným dnem a pomocí css je pak pozicujeme

příklad stylů jsem hodil na github

kubajz: Super, díky za návod. A kam do Nette nahraju ty soubory z githubu?
Díky

Do budoucna mě napadly tyto věci:

• možnost po kliknutí na den poslat JSON s událostmi pro daný den (pouze pokud by šlo o AJAX požadavek)
• možnost předat Nette\Security\User a vykreslit události podle id a role uživatele

Výpis samotných událostí není escapován, odkaz na událost si tak lze dle mého názoru zkonstruovat již dnes.

Pokud bude někoho tento doplněk zajímat, mě bude zajímat názor na přidání těchto funkcionalit (vyžádalo by si to změnu modelu).
Všem díky za tipy.

@revoke Je to interface, takže v implementující třídě bude třeba ty dvě metody implementovat :).

@kubajz, @vojtech.dobes – jasně, děkuji za nakopnutí kluci ;-)

Každopádně ten kalendář má nějaké problémy s procházením směrem zpět (i v demu), vyzkoušejte…

Opraveno, na githubu již je opravená verze souboru EventCalendar.php , která váš problém řeší. Omlouvám se za chybu a díky za upozornění!

motorcb: jak bylo řečeno výše, musíš ty dvě metody (IEventModel::isForDate, IEventModel::getForDate) implementovat ve své třídě.

Strings::padLeft použiješ ve třídě, která implementuje IEventModel, aby toto a podobné problémy byly jasné, přichystám v následujících dnech demo i se zdrojovými kódy, kde by mělo být zobrazeno i to, jak získávat z databáze události jen aktuálně potřebné události – pro aktuální měsíc.

jak to může vypadat:

<?php
class EventModel extends Nette\Object implements IEventModel
{
public function getForDate($year,$month,$day) {
 $month = Strings::padLeft($month,2,'0');
}

 public function isForDate($year,$month,$day) {
// nějaký kód
}
// další metody
}
?>

Alternativa pomocí čístého PHP:

<?php
public function getForDate($year,$month,$day) {
  $dateWhichIsUsefullForDb = sprintf("%04d-%02d-%02d", $year, $month, $day);
// tento kód vrací datum ve formátu RRRR-MM-DD
}
?>

Zdravim!
Ked pripojim EventCalendar do mojej aplikacie, tak mi ladicka v HomePresenter-i vyhodi chybu Class ‚EventCalendar‘ not found. Ako by som to mohol opravit?
Dakujem za odpoved.

Super, zrovna potřebuju do projektu nějaký jednoduchý kalendář a ten tvůj vypadá dobře.

Ahoj,
je prosim nekde live demo, kde si je mozne komponentu prohlednout aniz bych se musel registrovat na Foursquare?

tak už jsem něco spíchnul na githubu

nezapomenout na nastavení config.neon a importu dat do db (určitý základ je v rootu projektu), nějaký další popis k tomu demu doplním během nasazení na svoji mašinu, koho bude zajímat jen jak to vypadá, tak to nebude muset stahovat.