> ## 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.
# Teemaeditori – Kalenteri
> Muokkaa saatavuuskalenterin ulkoasua — varastotasojen värit ja rajat, valittu päivä, päiväruudun muoto, reuna ja sisennys.
Kalenteri-paneelissa muokataan saatavuuskalenteria, joka näkyy listaussivuilla vuokrapäivien valintaa varten. Varastotasojen värit kertovat, kuinka paljon varastoa kunakin päivänä on saatavilla, ja määritettävät rajat ohjaavat, milloin kukin väri on käytössä.
Kalenterin varastotasomerkinnät näkyvät vain, kun listaussivun verkkokauppasisällön asetuksissa on käytössä **Show stock level**. Kun se on pois käytöstä, päiväruudut näkyvät ilman värikoodausta ja varastotasojen selite piilotetaan.
## Varastotasojen värit
Jokaisella varastotasolla on oma tausta- ja tekstivärinsä. Tasoja on neljä:
| Asetus | Oletus | Kuvaus |
| ------------------ | --------- | ----------------------------------------------------------------------------------- |
| Vähäinen, tausta | `#FDA29B` | Niiden päiväruutujen taustaväri, jotka ovat vähäisen varaston rajalla tai sen alle. |
| Vähäinen, teksti | `#344054` | Vähäisen varaston päiväruutujen tekstin väri. |
| Rajallinen, tausta | `#F5C771` | Niiden päiväruutujen taustaväri, jotka ovat vähäisen ja rajallisen rajan välissä. |
| Rajallinen, teksti | `#344054` | Rajallisen varaston päiväruutujen tekstin väri. |
| Runsas, tausta | `#B4EFD5` | Rajallisen rajan ylittävien päiväruutujen taustaväri. |
| Runsas, teksti | `#344054` | Runsaan varaston päiväruutujen tekstin väri. |
| Loppu, tausta | `#E4E6EB` | Niiden päiväruutujen taustaväri, joissa varastoa ei ole saatavilla. |
| Loppu, teksti | `#6B7280` | Loppuunmyytyjen päiväruutujen tekstin väri. |
## Varastotasojen rajat
Rajat ohjaavat, milloin kukin väri on käytössä. Ne ovat prosenttiosuuksia saatavilla olevasta varastosta suhteessa sijainnin kokonaisvarastoon.
| Asetus | Tyyppi | Oletus | Vaihteluväli | Kuvaus |
| ---------- | ------ | ------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Vähäinen | Numero | 25 % | 0–100 % | Päivät, joiden saatavuus on tässä prosentissa tai sen alle, näkyvät **vähäisen** varaston värillä. |
| Rajallinen | Numero | 60 % | 0–100 % | Päivät, joiden saatavuus on vähäisen rajan ja tämän prosentin välissä, näkyvät **rajallisen** varaston värillä. Tämän prosentin ylittävät päivät näkyvät **runsaana**. |
Vähäisen rajan on oltava pienempi tai yhtä suuri kuin rajallisen raja. Jos asetat vähäisen rajan rajallista suuremmaksi, paneeli säätää rajallisen rajan automaattisesti vastaamaan sitä.
## Valittu päivä
Kalenterissa parhaillaan valitun päivän värit.
| Asetus | Oletus | Kuvaus |
| ------ | --------- | --------------------------------- |
| Tausta | `#212121` | Valitun päiväruudun taustaväri. |
| Teksti | `#FFFFFF` | Valitun päiväruudun tekstin väri. |
## Päiväruutu
| Asetus | Tyyppi | Oletus | Vaihteluväli | Kuvaus |
| ----------------- | ----------- | ------ | ------------ | ---------------------------------------------------------------- |
| Kulmien pyöristys | Liukusäädin | 50 % | 0–50 % | Kuinka pyöreä kukin päiväruutu on. 0 % on neliö, 50 % on ympyrä. |
## Tänään
| Asetus | Oletus | Kuvaus |
| ------ | --------- | ------------------------------------- |
| Reuna | `#212121` | Tämän päivän päiväruudun reunan väri. |
## Reuna
| Asetus | Tyyppi | Oletus | Vaihteluväli | Kuvaus |
| ----------------- | ----------- | --------- | ------------ | ------------------------------------------ |
| Väri | Väri | `#212121` | — | Kalenterin ympärillä olevan reunan väri. |
| Paksuus | Liukusäädin | 1 px | 0–4 px | Kalenterin ympärillä olevan reunan leveys. |
| Kulmien pyöristys | Liukusäädin | 0 px | 0–40 px | Kuinka pyöreät kalenterin kulmat ovat. |
## Säiliö
| Asetus | Tyyppi | Oletus | Vaihteluväli | Kuvaus |
| -------- | ----------- | ------ | ------------ | ---------------------------------------------------------- |
| Sisennys | Liukusäädin | 1 px | 0–16 px | Sisäinen tyhjä tila kalenterin reunan ja sisällön välissä. |
## Varastotasojen selite
Kun **Show stock level** on käytössä, kalenterin alle tulee selite, jossa näkyvät värinäytteet ja tekstit kullekin varastotasolle (loppu, vähäinen, rajallinen, runsas). Näytteen muoto vastaa päiväruudun kulmien pyöristystä, jotta ulkoasu pysyy yhtenäisenä.
Voit muokata selitteen tekstejä listaussivun verkkokauppasisällön asetuksissa. Jos teksti jätetään tyhjäksi, kyseinen selitekohta piilotetaan.
## CSS-muuttujat
```css CSS variables theme={null}
:root {
/* Stock level colours */
--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;
/* Stock level thresholds */
--storefront-calendar-stock-low-threshold: 25;
--storefront-calendar-stock-limited-threshold: 60;
/* Selected date */
--storefront-calendar-selected-background-color: #212121;
--storefront-calendar-selected-text-color: #FFFFFF;
/* Today */
--storefront-calendar-today-border-color: #212121;
/* Day cell */
--storefront-calendar-day-cell-corner-radius: 50%;
/* Border */
--storefront-calendar-border-color: #212121;
--storefront-calendar-border-width: 1px;
--storefront-calendar-border-radius: 0px;
/* Container */
--storefront-calendar-container-padding: 1px;
/* Other */
--storefront-calendar-accent-color: #212121;
--storefront-calendar-background-color: #FFFFFF;
}
```
## Aiheeseen liittyvät
Määritä verkkokaupan väripaletti.
Määritä lomakekenttien tyylit.