fepli
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 lang Ihrer 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.

War diese Seite hilfreich?