# 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:
Dokumentace:
Příklad:
Máte-li DIV placeholder pojmenovaný flb\_placeholder
> \\
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; }
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://flexbook.gitbook.io/integracni-manual/javascript-komponenty/prizpusobeni-kalendare.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.