Taiga UI 5.0 is out!

Calendar CORE

Examples API GitHub

On this page

See also

CalendarRange, MobileCalendar, CalendarMonth

A simple calendar. If you want a textfield with date, see InputDate and InputDateRange

Basic

April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
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
1
2
3
4
5
6
7
8
9
10 
    
      
    

      
      
    

  
    
      <tui-calendar
    [value]="value"
    (dayClick)="onDayClick($event)"
/>
@if (value) {
    <div>Chosen date: {{ value }}</div>
}

Range

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
May 2026
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 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <tui-calendar
        [maxViewedMonth]="firstMonth"
        [month]="firstMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeFirst($event)"
    />
    <tui-calendar
        [maxViewedMonth]="middleMonth"
        [minViewedMonth]="middleMonth"
        [month]="middleMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeMiddle($event)"
    />
    <tui-calendar
        [minViewedMonth]="lastMonth"
        [month]="lastMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeLast($event)"
    />
</div>
@if (value) {
    <div>Chosen dates: {{ value }}</div>
}

    

      
      
    

  
    
      .wrapper {
    display: flex;
}

With markers

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
May 2026
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 
    
      
    

      
      
    

  
    
      <div class="wrapper">
    <tui-calendar
        [markerHandler]="markerHandler"
        [maxViewedMonth]="firstMonth"
        [month]="firstMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeFirst($event)"
    />
    <tui-calendar
        [markerHandler]="markerHandler"
        [maxViewedMonth]="middleMonth"
        [minViewedMonth]="middleMonth"
        [month]="middleMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeMiddle($event)"
    />
    <tui-calendar
        [markerHandler]="markerHandler"
        [minViewedMonth]="lastMonth"
        [month]="lastMonth"
        [showAdjacent]="false"
        [value]="value"
        [(hoveredItem)]="hoveredItem"
        (dayClick)="onDayClick($event)"
        (monthChange)="onMonthChangeLast($event)"
    />
</div>
@if (value) {
    <div>Chosen dates: {{ value }}</div>
}

    

      
      
    

  
    
      .wrapper {
    display: flex;
}

Localization

Use tuiCalendarOptionsProvider to change start day of the week (Monday by default)
July
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
8
9 
    
      
    

      
      
    

  
    
      <tui-calendar [value]="value" />

Color customization

Use tuiCalendarOptionsProvider to change cell's data-type attribute and customize its color. (The default color for Saturday and Sunday is var(--tui-text-negative))
April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
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
1
2
3
4
5
6
7
8
9
10 
    
      
    

      
      
    

  
    
      <tui-calendar />

    

      
      
    

  
    
      tui-calendar-sheet [data-type='holiday']::before {
    background-color: var(--tui-chart-categorical-09);
}

Select multiple dates

April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
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
1
2
3
4
5
6
7
8
9
10
Chosen dates: 
    
      
    

      
      
    

  
    
      <tui-calendar
    [value]="value"
    (dayClick)="onDayClick($event)"
/>
<div>Chosen dates: {{ value }}</div>

Open in year view

1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115
2116
2117
2118
2119
2120
2121
2122
2123
2124
2125 
    
      
    

      
      
    

  
    
      <tui-calendar
    initialView="year"
    [value]="value"
    (dayClick)="onDayClick($event)"
/>
@if (value) {
    <div>Chosen date: {{ value }}</div>
}
GitHub StackBlitz