Taiga UI 5.0 is out!

MobileCalendar ADDON-MOBILE

Examples API GitHub

On this page

See also

Calendar, CalendarRange, CalendarMonth

A calendar for mobile devices. It is used in date picker controls on mobile devices if tuiMobileCalendar directive is applied.

You can use TUI_CALENDAR_DATE_STREAM token to set value from outside (see samples)

Custom dropdown

Choose a date 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <button
        appearance="secondary"
        iconStart="@tui.calendar"
        tuiIconButton
        type="button"
        [style.border-radius.%]="100"
        (click)="onClick()"
    >
        Choose a date
    </button>
    <span
        class="date"
        [class.date_empty]="empty"
    >
        {{ date$ | async }}
    </span>
</div>

    

      
      
    

  
    
      .wrapper {
    display: flex;
    align-items: center;
}

.date {
    margin-inline-start: 1rem;

    &_empty {
        color: var(--tui-text-tertiary);
    }
}

Range

Choose range

Mon
Tue
Wed
Thu
Fri
Sat
Sun 
    
      
    

      
      
    

  
    
      <div class="example">
    <tui-mobile-calendar
        [max]="max"
        [min]="min"
    />
</div>

    

      
      
    

  
    
      .example {
    block-size: 35rem;
}

Localization

Use tuiCalendarOptionsProvider to change start day of the week (Monday by default)

Choose day

Sun
Mon
Tue
Wed
Thu
Fri
Sat 
    
      
    

      
      
    

  
    
      <tui-mobile-calendar [min]="min" />

    

      
      
    

  
    
      tui-mobile-calendar {
    max-inline-size: 20rem;
    block-size: 30rem;
}

Custom dropdown (range)

Choose a date range 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <button
        appearance="secondary"
        iconStart="@tui.calendar"
        tuiIconButton
        type="button"
        [style.border-radius.%]="100"
        (click)="onClick()"
    >
        Calendar
    </button>
    <span
        class="date"
        [class.date_empty]="empty"
    >
        {{ date$ | async }}
    </span>
</div>

    

      
      
    

  
    
      .wrapper {
    display: flex;
    align-items: center;
}

.date {
    margin-inline-start: 1rem;

    &_empty {
        color: var(--tui-text-tertiary);
    }
}

Custom dropdown (multi)

Choose dates 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <button
        appearance="secondary"
        iconStart="@tui.calendar"
        tuiIconButton
        type="button"
        [style.border-radius.%]="100"
        (click)="onClick()"
    >
        Calendar
    </button>
    <span
        class="date"
        [class.date_empty]="empty"
    >
        {{ date$ | async }}
    </span>
</div>

    

      
      
    

  
    
      .wrapper {
    display: flex;
    align-items: center;
}

.date {
    margin-inline-start: 1rem;

    &_empty {
        color: var(--tui-text-tertiary);
    }
}

Without header

Mon
Tue
Wed
Thu
Fri
Sat
Sun 
    
      
    

      
      
    

  
    
      <tui-mobile-calendar
    [max]="max"
    [min]="min"
/>

    

      
      
    

  
    
      :host {
    display: block;
    block-size: 35rem;
}
GitHub StackBlitz