DevelopersEmbeds
Edition calendar
<fepli-calendar>
All dates of an edition, as a month or week view. It opens on the next date that is still to come; on a narrow page, the grid becomes a list of the days that have dates.
Try it
Pick options – the preview and the snippet update.
View
Accent colour
Corners
stadt.example.fepli.eu/ferienprogrammPreview
Snippet
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
<fepli-calendar edition="herbstferien-2026"></fepli-calendar>Attributes
- Name
edition- Type
- string
- Required
- required
- Description
The alias of the edition. Several aliases, separated by commas, share one calendar.
- Name
view- Type
- "month" | "week"
- Default:
- month
- Description
Month or week view.
- Name
category- Type
- string
- Description
Only dates of this category (alias).
- Name
lang- Type
- "de" | "en"
- Description
- Language of the embed. By default, the
langattribute of your page.
Theming
Set these CSS custom properties on the element or on any parent. Everything else follows your page.
- Name
--fepli-accent- Type
- color
- Default:
- oklch(0.60 0.22 29)
- Description
- Your brand colour, as entered: links, dates and the apply button. As in the fepli admin, a red brand colour turns the apply button ink, so it does not read as a warning, and one too light for white text is darkened until it reads.
- Name
--fepli-radius- Type
- length
- Default:
- 8px
- Description
- Corners of buttons, fields and chips; cards and the dialog take one and a half times this, badges three quarters. 0 makes everything square.
- Name
--fepli-shadow- Type
- 0 | 1
- Default:
- 1
- Description
- Shadows: 1 the slight ones of the fepli website, 0 none; dialogs keep a little.
- Name
--fepli-font- Type
- font-family
- Default:
- inherit
- Description
- Font of the embed. By default, the font of your page.
- Name
--fepli-text- Type
- color
- Default:
- Mist 900
- Description
- Colour of the text on cards and in the dialog.
- Name
--fepli-surface- Type
- color
- Default:
- white
- Description
- Background of cards and of the dialog an offer opens in; white by default. Set it together with
--fepli-textif your page is dark.
- Name
color-scheme- Type
- light | dark
- Default:
- inherit
- Description
- Standard CSS. On a dark page set color-scheme: dark; the greys and status colours turn round as in the admin’s dark theme.