> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor storefrontu - Kalendář

> Přizpůsobte widget kalendáře dostupnosti: barvy a prahy úrovně zásob, vybrané datum, tvar buňky dne, rámeček a odsazení kontejneru.

![Panel nastavení kalendáře v editoru storefrontu](https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-calendar.webp?fit=max\&auto=format\&n=lZhc_tO8u1u_bL0Q\&q=85\&s=91bd0a9af4f033c4c59ef53a224756dd)

Editor storefrontu > Kalendář

Panel Kalendář přizpůsobuje widget kalendáře dostupnosti, který se zobrazuje na stránkách nabídek pro výběr data pronájmu. Barvy úrovně zásob ukazují, kolik zásob je dostupných na dané datum, a nastavitelné prahy určují, kdy se použije jaké barevné pásmo.

> [!NOTE]
>
> Indikátory úrovně zásob v kalendáři jsou viditelné pouze tehdy, když je v nastavení obsahu storefrontu pro stránku nabídky zapnutá možnost **Show stock level**. Když je vypnutá, buňky dat se vykreslují bez barevného rozlišení a legenda úrovně zásob je skrytá.

## Barvy úrovně zásob

Každá úroveň zásob má samostatnou barvu pozadí a textu. K dispozici jsou čtyři úrovně:

| Nastavení | Výchozí | Popis |
| - | - | - |
| Pozadí nízkého stavu | `#FDA29B` | Barva pozadí buněk dat na úrovni prahu Nízký nebo pod ním. |
| Text pro nízký stav | `#344054` | Barva textu uvnitř buněk dat s nízkým stavem zásob. |
| Pozadí omezeného stavu | `#F5C771` | Barva pozadí buněk dat mezi prahy Nízký a Omezený. |
| Text pro omezený stav | `#344054` | Barva textu uvnitř buněk dat s omezeným stavem zásob. |
| Pozadí vysokého stavu | `#B4EFD5` | Barva pozadí buněk dat nad prahem Omezený. |
| Text pro vysoký stav | `#344054` | Barva textu uvnitř buněk dat s vysokým stavem zásob. |
| Pozadí stavu vyprodáno | `#E4E6EB` | Barva pozadí buněk dat bez dostupných zásob. |
| Text stavu vyprodáno | `#6B7280` | Barva textu uvnitř buněk dat bez dostupných zásob. |

## Prahy úrovně zásob

Prahy určují, kdy se použije které barevné pásmo. Jsou to procenta dostupných zásob vůči celkovým zásobám na dané lokalitě.

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Nízký | Číslo | 25 % | 0–100 % | Data s dostupností na této úrovni nebo pod ní zobrazují barvu **Nízký**. |
| Omezený | Číslo | 60 % | 0–100 % | Data s dostupností mezi prahem Nízký a touto úrovní zobrazují barvu **Omezený**. Data nad touto úrovní zobrazují **Vysoký**. |

Práh Nízký musí být menší nebo roven prahu Omezený. Pokud nastavíte Nízký nad Omezený, panel automaticky upraví Omezený tak, aby odpovídal.

## Vybrané datum

Barvy pro aktuálně vybrané datum v kalendáři.

| Nastavení | Výchozí | Popis |
| - | - | - |
| Pozadí | `#212121` | Barva pozadí buňky vybraného data. |
| Text | `#FFFFFF` | Barva textu buňky vybraného data. |

## Buňka dne

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Poloměr rohu | Posuvník | 50 % | 0–50 % | Jak zaoblená je každá buňka dne. 0 % je čtvercová, 50 % je kruhová. |

## Dnes

| Nastavení | Výchozí | Popis |
| - | - | - |
| Rámeček | `#212121` | Barva rámečku buňky dnešního data. |

## Rámeček

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Barva | Barva | `#212121` | - | Barva rámečku kolem widgetu kalendáře. |
| Tloušťka | Posuvník | 1 px | 0–4 px | Šířka rámečku kolem widgetu kalendáře. |
| Poloměr rohu | Posuvník | 0 px | 0–40 px | Jak zaoblené jsou rohy kalendáře. |

## Kontejner

| Nastavení | Typ | Výchozí | Rozsah | Popis |
| - | - | - | - | - |
| Odsazení | Posuvník | 1 px | 0–16 px | Vnitřní odsazení mezi rámečkem kalendáře a jeho obsahem. |

## Legenda úrovně zásob

Když je zapnutá možnost **Show stock level**, pod kalendářem se zobrazí legenda s barevnými vzorky a popisky pro každou úroveň zásob (Vyprodáno, Nízký, Omezený, Vysoký). Tvar vzorku odpovídá poloměru rohu buňky dne pro vizuální konzistenci.

Popisky legendy si můžete přizpůsobit v nastavení obsahu storefrontu pro stránku nabídky. Pokud ponecháte popisek prázdný, daná položka legendy se skryje.

## CSS proměnné

```css CSS proměnné theme={null}
:root {
  /* Barvy úrovně zásob */
  --storefront-calendar-stock-low-color: #FDA29B;
  --storefront-calendar-stock-low-text-color: #344054;
  --storefront-calendar-stock-limited-color: #F5C771;
  --storefront-calendar-stock-limited-text-color: #344054;
  --storefront-calendar-stock-high-color: #B4EFD5;
  --storefront-calendar-stock-high-text-color: #344054;
  --storefront-calendar-stock-out-background-color: #E4E6EB;
  --storefront-calendar-stock-out-text-color: #6B7280;

  /* Prahy úrovně zásob */
  --storefront-calendar-stock-low-threshold: 25;
  --storefront-calendar-stock-limited-threshold: 60;

  /* Vybrané datum */
  --storefront-calendar-selected-background-color: #212121;
  --storefront-calendar-selected-text-color: #FFFFFF;

  /* Dnes */
  --storefront-calendar-today-border-color: #212121;

  /* Buňka dne */
  --storefront-calendar-day-cell-corner-radius: 50%;

  /* Rámeček */
  --storefront-calendar-border-color: #212121;
  --storefront-calendar-border-width: 1px;
  --storefront-calendar-border-radius: 0px;

  /* Kontejner */
  --storefront-calendar-container-padding: 1px;

  /* Ostatní */
  --storefront-calendar-accent-color: #212121;
  --storefront-calendar-background-color: #FFFFFF;
}
```

## Související články

> **[Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md)**
>
> Definujte barevnou paletu storefrontu.

> **[Vstupy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/inputs.md)**
>
> Nastavte styl polí formuláře.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.