Taiga UI 5 is out!

CalendarRange KIT

Examples API GitHub

On this page

See also

Calendar, MobileCalendar, CalendarMonth

Component for choosing date range in calendar

Basic

May
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 
    
      
    

      
      
    

  
    
      <tui-calendar-range />

With value

March
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{ "from": "2019-03-11", "to": "2019-03-14" } 
    
      
    

      
      
    

  
    
      <tui-calendar-range [(value)]="value" />
{{ value | json }}

With ranges

May
Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7 
    
      
    

      
      
    

  
    
      <tui-calendar-range [items]="items" />

Localization

Use tuiCalendarOptionsProvider to change start day of the week (Monday by default)
May
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 
    
      
    

      
      
    

  
    
      <tui-calendar-range />

With another range switcher

May
Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7 
    
      
    

      
      
    

  
    
      <tui-calendar-range
    [items]="items"
    [value]="value"
    [(item)]="selected"
    (valueChange)="onValue($event)"
/>

@if (isLastVisible) {
    <p>
        <button
            tuiLink
            type="button"
            (click)="reset()"
        >
            Reset
        </button>
    </p>
}

@if (isSelected && !isDefault) {
    <p>
        You are seeing {{ selected }}.
        @if (!isLastVisible) {
            <button
                tuiLink
                type="button"
                (click)="toggle()"
            >
                Switch to {{ opposite }}
            </button>
        }
    </p>
}
GitHub StackBlitz