@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UICalendarMonthView

    Calendar month-view component.

    Renders a traditional month grid (7 columns × 4–6 rows) populated with events from a CalendarDatasource. The user can navigate between months and select individual days.

    <ui-calendar-month-view
      [datasource]="calendarDs"
      [(selectedDate)]="selected"
      (dateSelected)="onPick($event)"
      (monthChanged)="onNav($event)"
    />
    Index

    Constructors

    constructor

    Properties

    ariaLabel datasource dateSelected days disabled displayMonth eventSelected maxEventsPerDay monthChanged monthLabel palette selectedDate showWeekNumbers weekdays weeks

    Methods

    goToMonth goToToday isSelected nextMonth onDayClick overflowCount previousMonth

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the calendar region.

    datasource: InputSignal<CalendarDatasource<unknown>> = ...

    The datasource providing calendar events.

    dateSelected: OutputEmitterRef<Date> = ...

    Emitted when the user clicks a day cell.

    days: Signal<CalendarMonthDay[]> = ...

    The 6 × 7 = 42 day cells filling the month grid.

    disabled: InputSignal<boolean> = ...

    Whether the calendar month view is disabled.

    displayMonth: WritableSignal<Date> = ...

    The first day of the currently displayed month.

    eventSelected: OutputEmitterRef<CalendarEvent<unknown>> = ...

    Emitted when the user clicks an event badge.

    maxEventsPerDay: InputSignal<number> = ...

    Maximum number of event badges shown per day cell.

    monthChanged: OutputEmitterRef<Date> = ...

    Emitted when the displayed month changes (navigation).

    monthLabel: Signal<string> = ...

    Header label, e.g. "March 2026".

    palette: InputSignal<readonly string[]> = ...

    Colour palette for events that lack an explicit color.

    selectedDate: ModelSignal<Date> = ...

    The currently selected date (two-way bindable). Defaults to today.

    showWeekNumbers: InputSignal<boolean> = ...

    Whether to show an ISO week-number column on the leading edge.

    weekdays: readonly string[] = WEEKDAY_LABELS

    Weekday column headers.

    weeks: Signal<CalendarWeekRow[]> = ...

    Rows of 7 days each (for the template grid).

    Methods

    • Navigate to a specific month.

      Parameters

      • date: Date

      Returns void

    • Navigate to today's month.

      Returns void

    • Check if a day is the currently selected date.

      Parameters

      • day: CalendarMonthDay

      Returns boolean

    • Navigate to the next month.

      Returns void

    • Handle day cell click — first click selects; second click on already-selected day opens popover.

      Parameters

      • day: CalendarMonthDay
      • event: MouseEvent

      Returns void

    • Return the overflow count for a day.

      Parameters

      • day: CalendarMonthDay

      Returns number

    • Navigate to the previous month.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods