Data

MonthCalendar

A month grid with events as continuous bars, day markers and a +N link for what does not fit — for schedules, deadlines, shifts or bookings.

Features8

API

Theming

Basic

Events are bars from start to end (inclusive) that continue across weeks; markers are pills in the day header. Today is a filled circle, weekends are tinted.

The page owns the month: move it with own buttons. dayClick gives the day (also from +N), eventClick the event; selectedDate highlights a day and takes the keyboard focus — try the arrow keys.

November 2026

Click a day

40 lines

<div class="bar">  <button    txButton    icon="chevron-left"    severity="secondary"    variant="text"    [rounded]="true"    aria-label="Previous month"    (click)="shift(-1)"  ></button>  <strong class="title">{{ title() }}</strong>  <button    txButton    icon="chevron-right"    severity="secondary"    variant="text"    [rounded]="true"    aria-label="Next month"    (click)="shift(1)"  ></button>  <button    txButton    label="Today"    severity="secondary"    variant="outlined"    size="small"    (click)="goToday()"  ></button></div><tx-month-calendar  [month]="month()"  [events]="events"  [selectedDate]="selected()"  (dayClick)="selected.set($event)"  (eventClick)="opened.set($event.title)"/><p class="hint" aria-live="polite">  {{ selected() ? 'Selected ' + selected()!.toDateString() : 'Click a day'  }}{{ opened() ? ' · opened “' + opened() + '”' : '' }}</p>

Lanes

maxLanes sets how many bar rows a week shows; the rest becomes a +N link on each day (its text comes from labels.more).

15 lines

<div class="bar">  <tx-select    ariaLabel="Bar rows"    [options]="options"    [ngModel]="lanes()"    (ngModelChange)="lanes.set($event)"  /></div><tx-month-calendar  [month]="month"  [today]="month"  [events]="events"  [maxLanes]="lanes()"  [labels]="{ more: '+{count} more' }"/>

Week start

locale names the weekdays and days, weekStartsOn picks the first column; both follow the kit locale when not set. labels overrides the texts.

8 lines

<tx-month-calendar  locale="uk-UA"  [weekStartsOn]="1"  [month]="month"  [today]="month"  [events]="events"  [labels]="{ today: 'Сьогодні', region: 'Календар відпусток', more: 'ще {count}' }"/>

Event template

A txMonthCalendarEvent template draws a bar; it gets the event (with your data) and the week segment — startsHere, endsHere, span, lane, column.

11 lines

<tx-month-calendar [month]="month" [today]="month" [events]="events">  <ng-template txMonthCalendarEvent let-event let-segment="segment">    @if (segment.startsHere) {      <tx-icon name="home" />    }    <span class="label">{{ event.title }}</span>    @if (segment.span > 1) {      <span class="guests">{{ guests(event) }} guests</span>    }  </ng-template></tx-month-calendar>

Compact

Narrower than 560px — a side panel or a phone — the calendar shows short weekday names and coloured dots for events and markers instead of bars and pills. It measures its own width, not the window.

10 lines

<div class="narrow">  <tx-month-calendar    [month]="month"    [today]="today"    [events]="events"    [markers]="markers"    [selectedDate]="'2026-10-21'"    [weekStartsOn]="1"  /></div>

Design tokens

dt changes the tokens of one calendar — here a rounder frame, taller rows and pill-shaped bars.

11 lines

<tx-month-calendar  [month]="month"  [today]="month"  [events]="events"  [dt]="{    root: { borderRadius: '16px' },    week: { headHeight: '36px', laneHeight: '26px' },    event: { height: '22px', borderRadius: '11px', fontSize: '12px' },    number: { todayBackground: 'var(--tx-success-base)' },  }"/>

Pass through

pt styles the parts — here uppercase weekday names and bars.