EntwicklerBausteine
Saisonkalender
<fepli-calendar>
Alle Termine einer Saison, als Monats- oder Wochenansicht. Der Kalender öffnet beim nächsten Termin, der noch bevorsteht. Auf einer schmalen Seite wird das Raster zu einer Liste der Tage mit Terminen.
Ausprobieren
Wählen Sie Optionen. Vorschau und Snippet aktualisieren sich.
Ansicht
Akzentfarbe
Ecken
stadt.example.fepli.eu/ferienprogrammVorschau
Snippet
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
<fepli-calendar edition="herbstferien-2026"></fepli-calendar>Attribute
- Name
edition- Typ
- string
- Pflicht
- erforderlich
- Beschreibung
Der Alias der Saison. Mehrere Aliasse, durch Kommas getrennt, teilen sich einen Kalender.
- Name
view- Typ
- "month" | "week"
- Standard:
- month
- Beschreibung
Monats- oder Wochenansicht.
- Name
category- Typ
- string
- Beschreibung
Nur Termine dieser Kategorie (Alias).
- Name
lang- Typ
- "de" | "en"
- Beschreibung
- Sprache des Bausteins. Standard ist das Attribut
langIhrer Seite.
Gestaltung
Setzen Sie diese CSS-Variablen am Element oder an einem übergeordneten Element. Alles andere richtet sich nach Ihrer Seite.
- Name
--fepli-accent- Typ
- color
- Standard:
- oklch(0.60 0.22 29)
- Beschreibung
- Ihre Markenfarbe, wie eingegeben: Links, Termine und der Knopf zum Anmelden. Wie im fepli-Admin wird der Knopf bei einer roten Markenfarbe dunkel, damit er nicht wie eine Warnung wirkt, und bei einer zu hellen so weit abgedunkelt, dass weiße Schrift sich liest.
- Name
--fepli-radius- Typ
- length
- Standard:
- 8px
- Beschreibung
- Ecken von Schaltflächen, Feldern und Filtern; Karten und der Dialog nehmen das Anderthalbfache, Abzeichen drei Viertel. 0 macht alles eckig.
- Name
--fepli-shadow- Typ
- 0 | 1
- Standard:
- 1
- Beschreibung
- Schatten: 1 die leichten der fepli-Website, 0 keine; Dialoge behalten etwas.
- Name
--fepli-font- Typ
- font-family
- Standard:
- inherit
- Beschreibung
- Schrift des Bausteins. Standard ist die Schrift Ihrer Seite.
- Name
--fepli-text- Typ
- color
- Standard:
- Mist 900
- Beschreibung
- Farbe der Schrift auf Karten und im Dialog.
- Name
--fepli-surface- Typ
- color
- Standard:
- white
- Beschreibung
- Hintergrund der Karten und des Dialogs, in dem sich ein Angebot öffnet; standardmäßig weiß. Setzen Sie ihn zusammen mit
--fepli-text, wenn Ihre Seite dunkel ist.
- Name
color-scheme- Typ
- light | dark
- Standard:
- inherit
- Beschreibung
- Standard-CSS. Auf einer dunklen Seite setzen Sie color-scheme: dark; Grautöne und Statusfarben drehen sich wie im dunklen Admin.