Přizpůsobení kalendáře

Kalendář je JavaScript komponenta zobrazující dostupnost konkrétního zdroje a umožňující vytvářet rezervace. V kalendáři zdroje se rovněž mohou zobrazovat akce pořádané na příslušném zdroji.

Kalendářová komponenta je založena na veřejně dostupné komponentě JQuery FullCalendar, takže v případě potřeby je možné využít veškerou standardní funkcionalitu této komponenty. Věříme však, že pro základní a rychlé použití není potřeba programovat funkcionalitu s komponentou FullCalendar, nicméně pro nadstandardní funkcionalitu to možné je.

Web: https://fullcalendar.io/

Dokumentace: https://fullcalendar.io/docs/

Příklad:

Máte-li DIV placeholder pojmenovaný flb_placeholder

<div id="flb_placeholder"></div>

pak posunout kalendář na příslušný datum je možné následujícím voláním

$("#flb_placeholder div.flb_calendar").fullCalendar('gotoDate','2024-06-15');

Nicméně, primární přizpůsobování FlexBookové JavaScript komponenty typu kalendář se provádí pomocí parametrů předaných komponentě flbResourceCalendar. V příkladech níže si ukážeme jednotlivé příklady základního použití.

Render a renderText

Níže uvedený příklad využívá parameter render a renderText.

flbResourceCalendar('flexbook_resource_calendar_1', {
                resourceId: [7],
                resourceLabel: 'Rezervace',
                renderText: ['legend','name','description','price'],
                render: ['reservation','occupied','event'],
});

Parameterem renderText definujeme co vše se zobrazí nad kalendářem za texty. Parameter renderTxt je pole. Použijeme-li prázdné pole, pak se nad kalendářem nezobrazí žádné popisné informace o zdroji. Jednotlivé možnosti hodnot v poly jsou:

• name - zobrazí název zdroje

• description - zobrazí popis zdroje

• price - zobrazí cenu za rezervační jednotku na zdroji

• legend - zobrazí legendu k jednotlivým objektům v kalendáři

Parameterem render definujeme jaké objekty se v kalendáři mají zobrazovat specificky. Použijeme-li prázdné pole, pak se všechny rezervace a časy blokované akcemi na zdroji zobrazují jako nedostupnost. V případě, že nadefinujeme do pole jednotlivé objekty, pak se dané objekty zobrazí v kalendáři jako objekty se specifickou barvou a funkčností. Jednotlivé možnosti hodnot v poly jsou:

• occupied - zobrazí se nedostupnost. Do nedostupnosti patří aak explicitně definované nedostupnosti, tak i nedostupnosti v důsledku rezervací jiných uživatelů.

• reservation - zobrazí se specifické informace rezervací přihlášeného uživatele. Po kliknutí na objekt se zobrazí detail konkrétní rezervace.

• event - zobrazí se akce pořádané na zdroji. Po kliknutí na objekt se zobrazí detail konkrétní akce s možností rezervace na akci.

dateStart

Dalším parametrem je dateStart, který definuje první datum, od kterého se zobrazí dny v kalendáři.

flbResourceCalendar('flexbook_resource_calendar_2', {
                resourceId: [577,578],
                dateStart: '2016-11-02',
                resourceLabel: 'Rezervace',
});

Multizdrojový kalendář

Kalendář je možné zobrazit pro jeden konkrétní zdroj tak jako ve všech výše uvedených příkladech. Druhou možností je multizdrojový kalendář, který zobrazí více zdrojů v jednom kalendáři. Zdroje se zadávají pomocí pole v parametru resourceId.

flbResourceCalendar('flexbook_resource_calendar_3', {
                resourceId: [577,578],
                resourceLabel: 'Rezervace',
});

Standardně se multizdrojový kalendář zobrazuje s horizontální časovou osou a zdroji zobrazenými vertikálně. Časovou osu je možné změnit z horizontální orientace na orientaci vertikální pomocí parametru viewDirection.

flbResourceCalendar('flexbook_resource_calendar_3', {
                resourceId: [577,578],
                dateStart: '2016-11-02',
                resourceLabel: 'Rezervace',
                viewDirection : 'vertical',
});

Note: Parameter viewDirection, používaný pro směr časové osy, je použitelný jen v multizdrojovém kalendáři.

Přizpůsobení stylů objektů v kalendáři

Potřebujete-li změnit styly (barvu pozadí, textů, apod.) jednotlivých objektů v kalendáři, pak pro to můžete použít níže uvedené CSS třídy.

Nedostupnost je možné přizpůsobit takto

/* unavailability */
div.flb_calendar .fc-bgevent {
 background-color : LightGray;
 color : black !important;
}

Rezervace přihlášeného uživatele je možné přizpůsobit takto

/* occupied by reservation */
div.flb_calendar .event_reservation {
 background-color : MediumPurple;
 color : white;
}

Akce na zdroji je možné přizpůsobit takto

/* event on resource */
div.flb_calendar .event_providerEvent {
 background-color : LightGreen;
 color : black;
}

Kalendář má standardně zvýrazněný aktuální den žlutou barvou. V případě potřeby barvu změnit můžete to zajistit níže uvedeným CSS stylem. Uvedený přílad nastavuje bílou barvu která je použita standardně pro ostatní dny, čímž se prakticky zajistí zrušení zvýraznění aktuálního dne.

div.flb_calendar .fc-bg .fc-today { background: white; }