CalendarMonth KIT

On this page

See also

Calendar, CalendarRange, MobileCalendar

Month picker component. If you want a textfield, see InputMonth

Basic

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Selected month:

Hovered month:

    
      <tui-calendar-month
    [value]="value"
    (hoveredItemChange)="onMonthHovered($event)"
    (monthClick)="onMonthClick($event)"
/>
<p>Selected month: {{ value }}</p>
<p>Hovered month: {{ hoveredMonth }}</p>

Range

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Selected value:

    
      <tui-calendar-month
    [max]="max"
    [min]="min"
    [value]="value"
    (monthClick)="onMonthClick($event)"
/>
<p>Selected value: {{ value }}</p>

GitHub StackBlitz