Interaktiver Playground

Konfiguriere jeden Input und beobachte, wie die Komponente live aktualisiert wird. Das generierte Template bleibt synchron, während du es anpasst.

Month, week, day and year views with localisation, configurable week start and time grid. Tweak the options and styling tokens to preview the calendar live.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Team Standup9 AM

Design Review2 PM

Sprint Planning11 AM

1:1 with Manager3 PM

Product Demo10 AM

Release Window5 PM

Kickoff9 AM

Vendor Call10 AM

Retro4 PM

viewView

variantVariant (accent)Re-bases --hub-calendar-accent: the today / selected day, the active view button and the event chips. Any other string is also accepted and read as --hub-sys-color-<variant>.

weekStartsOnWeek starts on

localeLocaleFalls back to English when the language pack is unavailable.

heightHeightSizes the calendar without a stylesheet, which is the point: a scoped hub-calendar rule outranks the component’s own layout and can unstack it. auto grows to the content and scrolls nothing.

showWeekNumbersShow week numbersfalseAdds a week-number column to the month view, numbered from the day the week starts on (ISO-8601 when that day is Monday).

dayStartHourDay start hourFirst hour shown in the day and week time grids.

dayEndHourDay end hourLast hour shown in the day and week time grids.

dragAndDropEnabledDrag & droptrueAllow events to be dragged onto a different day.

Generated template

Angular Calendar-Komponente | ng-hub-ui-calendar

Interaktiver Playground

September 2026