# DayPickerCalendar

*Category:* Components
*Section:* Pickers
*Source:* https://uikit.developers.rio.cloud/#/components/dayPickerCalendar
*Captured:* 2026-04-27T14:57:50.733Z

DayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.

## DayPickerCalendar

It keeps the public API small while still supporting custom selection variants, hidden and disabled days, custom modifiers, and injected day content.

## Single selection

The calendar wrapper exposes the supported selection modes without coupling consumers to the rawreact-day-picker component API.

### Example: Single date

Single date
January February March April May June July August September October November December April 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 2026 April 2026 Mo Tu We Th Fr Sa Su

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

You picked: No date selected

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const DayPickerCalendarSingleSelectionExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>();

    return (
        <div>
            <FormLabel>Single date</FormLabel>
            <DayPickerCalendar mode='single' value={selectedDay} onChange={setSelectedDay} />
            <div className='padding-top-15'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerCalendarSingleSelectionExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Single date</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="single" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2026</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="false" aria-label="April 2026" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-01">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-10">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 14 April 2026">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026">15</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2026">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-27" data-today="true">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Monday, 27 April 2026">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="padding-top-15">
        <b>You picked:</b> No date selected
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Calendar sizes

Use size to adjust the density of the day grid. The size variant changes the spacing and dimensions of the day cells themselves.

### Example: Small

Small
January February March April May June July August September October November December April 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 2026 April 2026 Mo Tu We Th Fr Sa Su

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

Medium (default)
January February March April May June July August September October November December April 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 2026 April 2026 Mo Tu We Th Fr Sa Su

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

Large
January February March April May June July August September October November December April 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 2026 April 2026 Mo Tu We Th Fr Sa Su

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

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar, { type DateRange } from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

type CompleteDateRange = {
    from: Date;
    to: Date;
};

const createCurrentMonthMidRange = (): CompleteDateRange => {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
    const middleDay = Math.max(2, Math.min(lastDayOfMonth - 1, Math.ceil(lastDayOfMonth / 2)));

    return {
        from: new Date(year, month, middleDay - 1),
        to: new Date(year, month, middleDay + 1),
    };
};

const DayPickerCalendarSizesExample = () => {
    const initialRange = createCurrentMonthMidRange();
    const initialMonth = new Date(initialRange.from.getFullYear(), initialRange.from.getMonth(), 1);

    const [smallRange, setSmallRange] = useState<DateRange | undefined>(initialRange);
    const [mediumRange, setMediumRange] = useState<DateRange | undefined>(initialRange);
    const [largeRange, setLargeRange] = useState<DateRange | undefined>(initialRange);

    return (
        <div className='display-grid gap-20 grid-cols-1-xs grid-cols-3-lg'>
            <div>
                <FormLabel>Small</FormLabel>
                <DayPickerCalendar
                    mode='range'
                    size='sm'
                    value={smallRange}
                    onChange={setSmallRange}
                    defaultMonth={initialMonth}
                />
            </div>

            <div>
                <FormLabel>Medium (default)</FormLabel>
                <DayPickerCalendar
                    mode='range'
                    value={mediumRange}
                    onChange={setMediumRange}
                    defaultMonth={initialMonth}
                />
            </div>

            <div>
                <FormLabel>Large</FormLabel>
                <DayPickerCalendar
                    mode='range'
                    size='lg'
                    value={largeRange}
                    onChange={setLargeRange}
                    defaultMonth={initialMonth}
                />
            </div>
        </div>
    );
};

export default DayPickerCalendarSizesExample;
```

#### HTML (html)

```html
<div class="display-grid gap-20 grid-cols-1-xs grid-cols-3-lg">
    <div>
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Small</div>
        <div class="rdp-root DayPicker display-block DayPicker--sm" lang="en-GB" data-mode="range" data-nav-layout="around">
            <div class="rdp-months">
                <div data-animated-month="true" class="rdp-month">
                    <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                            </polygon>
                        </svg>
                    </button>
                    <div data-animated-caption="true" class="rdp-month_caption">
                        <div class="rdp-dropdowns">
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                    <option value="0">January</option>
                                    <option value="1">February</option>
                                    <option value="2">March</option>
                                    <option value="3">April</option>
                                    <option value="4">May</option>
                                    <option value="5">June</option>
                                    <option value="6">July</option>
                                    <option value="7">August</option>
                                    <option value="8">September</option>
                                    <option value="9">October</option>
                                    <option value="10">November</option>
                                    <option value="11">December</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                    <option value="1926">1926</option>
                                    <option value="1927">1927</option>
                                    <option value="1928">1928</option>
                                    <option value="1929">1929</option>
                                    <option value="1930">1930</option>
                                    <option value="1931">1931</option>
                                    <option value="1932">1932</option>
                                    <option value="1933">1933</option>
                                    <option value="1934">1934</option>
                                    <option value="1935">1935</option>
                                    <option value="1936">1936</option>
                                    <option value="1937">1937</option>
                                    <option value="1938">1938</option>
                                    <option value="1939">1939</option>
                                    <option value="1940">1940</option>
                                    <option value="1941">1941</option>
                                    <option value="1942">1942</option>
                                    <option value="1943">1943</option>
                                    <option value="1944">1944</option>
                                    <option value="1945">1945</option>
                                    <option value="1946">1946</option>
                                    <option value="1947">1947</option>
                                    <option value="1948">1948</option>
                                    <option value="1949">1949</option>
                                    <option value="1950">1950</option>
                                    <option value="1951">1951</option>
                                    <option value="1952">1952</option>
                                    <option value="1953">1953</option>
                                    <option value="1954">1954</option>
                                    <option value="1955">1955</option>
                                    <option value="1956">1956</option>
                                    <option value="1957">1957</option>
                                    <option value="1958">1958</option>
                                    <option value="1959">1959</option>
                                    <option value="1960">1960</option>
                                    <option value="1961">1961</option>
                                    <option value="1962">1962</option>
                                    <option value="1963">1963</option>
                                    <option value="1964">1964</option>
                                    <option value="1965">1965</option>
                                    <option value="1966">1966</option>
                                    <option value="1967">1967</option>
                                    <option value="1968">1968</option>
                                    <option value="1969">1969</option>
                                    <option value="1970">1970</option>
                                    <option value="1971">1971</option>
                                    <option value="1972">1972</option>
                                    <option value="1973">1973</option>
                                    <option value="1974">1974</option>
                                    <option value="1975">1975</option>
                                    <option value="1976">1976</option>
                                    <option value="1977">1977</option>
                                    <option value="1978">1978</option>
                                    <option value="1979">1979</option>
                                    <option value="1980">1980</option>
                                    <option value="1981">1981</option>
                                    <option value="1982">1982</option>
                                    <option value="1983">1983</option>
                                    <option value="1984">1984</option>
                                    <option value="1985">1985</option>
                                    <option value="1986">1986</option>
                                    <option value="1987">1987</option>
                                    <option value="1988">1988</option>
                                    <option value="1989">1989</option>
                                    <option value="1990">1990</option>
                                    <option value="1991">1991</option>
                                    <option value="1992">1992</option>
                                    <option value="1993">1993</option>
                                    <option value="1994">1994</option>
                                    <option value="1995">1995</option>
                                    <option value="1996">1996</option>
                                    <option value="1997">1997</option>
                                    <option value="1998">1998</option>
                                    <option value="1999">1999</option>
                                    <option value="2000">2000</option>
                                    <option value="2001">2001</option>
                                    <option value="2002">2002</option>
                                    <option value="2003">2003</option>
                                    <option value="2004">2004</option>
                                    <option value="2005">2005</option>
                                    <option value="2006">2006</option>
                                    <option value="2007">2007</option>
                                    <option value="2008">2008</option>
                                    <option value="2009">2009</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                    <option value="2016">2016</option>
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    <option value="2019">2019</option>
                                    <option value="2020">2020</option>
                                    <option value="2021">2021</option>
                                    <option value="2022">2022</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026">2026</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2026</span>
                        </div>
                    </div>
                    <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                            </polygon>
                        </svg>
                    </button>
                    <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
                        <thead aria-hidden="true">
                            <tr data-animated-weekdays="true" class="rdp-weekdays">
                                <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                                <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                                <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                                <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                                <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                                <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                                <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                            </tr>
                        </thead>
                        <tbody data-animated-weeks="true" class="rdp-weeks">
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-01">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-02">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-03">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-04">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-05">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-06">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-07">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-08">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-09">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-10">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-11">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-12">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-13">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-17">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-18">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-19">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-20">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2026">20</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-21">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-22">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-23">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-24">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-25">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-26">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-27" data-today="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 27 April 2026">27</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-28">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-29">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-30">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Medium (default)</div>
        <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="range" data-nav-layout="around">
            <div class="rdp-months">
                <div data-animated-month="true" class="rdp-month">
                    <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                            </polygon>
                        </svg>
                    </button>
                    <div data-animated-caption="true" class="rdp-month_caption">
                        <div class="rdp-dropdowns">
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                    <option value="0">January</option>
                                    <option value="1">February</option>
                                    <option value="2">March</option>
                                    <option value="3">April</option>
                                    <option value="4">May</option>
                                    <option value="5">June</option>
                                    <option value="6">July</option>
                                    <option value="7">August</option>
                                    <option value="8">September</option>
                                    <option value="9">October</option>
                                    <option value="10">November</option>
                                    <option value="11">December</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                    <option value="1926">1926</option>
                                    <option value="1927">1927</option>
                                    <option value="1928">1928</option>
                                    <option value="1929">1929</option>
                                    <option value="1930">1930</option>
                                    <option value="1931">1931</option>
                                    <option value="1932">1932</option>
                                    <option value="1933">1933</option>
                                    <option value="1934">1934</option>
                                    <option value="1935">1935</option>
                                    <option value="1936">1936</option>
                                    <option value="1937">1937</option>
                                    <option value="1938">1938</option>
                                    <option value="1939">1939</option>
                                    <option value="1940">1940</option>
                                    <option value="1941">1941</option>
                                    <option value="1942">1942</option>
                                    <option value="1943">1943</option>
                                    <option value="1944">1944</option>
                                    <option value="1945">1945</option>
                                    <option value="1946">1946</option>
                                    <option value="1947">1947</option>
                                    <option value="1948">1948</option>
                                    <option value="1949">1949</option>
                                    <option value="1950">1950</option>
                                    <option value="1951">1951</option>
                                    <option value="1952">1952</option>
                                    <option value="1953">1953</option>
                                    <option value="1954">1954</option>
                                    <option value="1955">1955</option>
                                    <option value="1956">1956</option>
                                    <option value="1957">1957</option>
                                    <option value="1958">1958</option>
                                    <option value="1959">1959</option>
                                    <option value="1960">1960</option>
                                    <option value="1961">1961</option>
                                    <option value="1962">1962</option>
                                    <option value="1963">1963</option>
                                    <option value="1964">1964</option>
                                    <option value="1965">1965</option>
                                    <option value="1966">1966</option>
                                    <option value="1967">1967</option>
                                    <option value="1968">1968</option>
                                    <option value="1969">1969</option>
                                    <option value="1970">1970</option>
                                    <option value="1971">1971</option>
                                    <option value="1972">1972</option>
                                    <option value="1973">1973</option>
                                    <option value="1974">1974</option>
                                    <option value="1975">1975</option>
                                    <option value="1976">1976</option>
                                    <option value="1977">1977</option>
                                    <option value="1978">1978</option>
                                    <option value="1979">1979</option>
                                    <option value="1980">1980</option>
                                    <option value="1981">1981</option>
                                    <option value="1982">1982</option>
                                    <option value="1983">1983</option>
                                    <option value="1984">1984</option>
                                    <option value="1985">1985</option>
                                    <option value="1986">1986</option>
                                    <option value="1987">1987</option>
                                    <option value="1988">1988</option>
                                    <option value="1989">1989</option>
                                    <option value="1990">1990</option>
                                    <option value="1991">1991</option>
                                    <option value="1992">1992</option>
                                    <option value="1993">1993</option>
                                    <option value="1994">1994</option>
                                    <option value="1995">1995</option>
                                    <option value="1996">1996</option>
                                    <option value="1997">1997</option>
                                    <option value="1998">1998</option>
                                    <option value="1999">1999</option>
                                    <option value="2000">2000</option>
                                    <option value="2001">2001</option>
                                    <option value="2002">2002</option>
                                    <option value="2003">2003</option>
                                    <option value="2004">2004</option>
                                    <option value="2005">2005</option>
                                    <option value="2006">2006</option>
                                    <option value="2007">2007</option>
                                    <option value="2008">2008</option>
                                    <option value="2009">2009</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                    <option value="2016">2016</option>
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    <option value="2019">2019</option>
                                    <option value="2020">2020</option>
                                    <option value="2021">2021</option>
                                    <option value="2022">2022</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026">2026</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2026</span>
                        </div>
                    </div>
                    <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                            </polygon>
                        </svg>
                    </button>
                    <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
                        <thead aria-hidden="true">
                            <tr data-animated-weekdays="true" class="rdp-weekdays">
                                <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                                <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                                <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                                <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                                <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                                <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                                <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                            </tr>
                        </thead>
                        <tbody data-animated-weeks="true" class="rdp-weeks">
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-01">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-02">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-03">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-04">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-05">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-06">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-07">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-08">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-09">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-10">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-11">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-12">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-13">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-17">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-18">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-19">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-20">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2026">20</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-21">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-22">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-23">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-24">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-25">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-26">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-27" data-today="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 27 April 2026">27</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-28">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-29">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-30">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Large</div>
        <div class="rdp-root DayPicker display-block DayPicker--lg" lang="en-GB" data-mode="range" data-nav-layout="around">
            <div class="rdp-months">
                <div data-animated-month="true" class="rdp-month">
                    <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                            </polygon>
                        </svg>
                    </button>
                    <div data-animated-caption="true" class="rdp-month_caption">
                        <div class="rdp-dropdowns">
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                    <option value="0">January</option>
                                    <option value="1">February</option>
                                    <option value="2">March</option>
                                    <option value="3">April</option>
                                    <option value="4">May</option>
                                    <option value="5">June</option>
                                    <option value="6">July</option>
                                    <option value="7">August</option>
                                    <option value="8">September</option>
                                    <option value="9">October</option>
                                    <option value="10">November</option>
                                    <option value="11">December</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                    <option value="1926">1926</option>
                                    <option value="1927">1927</option>
                                    <option value="1928">1928</option>
                                    <option value="1929">1929</option>
                                    <option value="1930">1930</option>
                                    <option value="1931">1931</option>
                                    <option value="1932">1932</option>
                                    <option value="1933">1933</option>
                                    <option value="1934">1934</option>
                                    <option value="1935">1935</option>
                                    <option value="1936">1936</option>
                                    <option value="1937">1937</option>
                                    <option value="1938">1938</option>
                                    <option value="1939">1939</option>
                                    <option value="1940">1940</option>
                                    <option value="1941">1941</option>
                                    <option value="1942">1942</option>
                                    <option value="1943">1943</option>
                                    <option value="1944">1944</option>
                                    <option value="1945">1945</option>
                                    <option value="1946">1946</option>
                                    <option value="1947">1947</option>
                                    <option value="1948">1948</option>
                                    <option value="1949">1949</option>
                                    <option value="1950">1950</option>
                                    <option value="1951">1951</option>
                                    <option value="1952">1952</option>
                                    <option value="1953">1953</option>
                                    <option value="1954">1954</option>
                                    <option value="1955">1955</option>
                                    <option value="1956">1956</option>
                                    <option value="1957">1957</option>
                                    <option value="1958">1958</option>
                                    <option value="1959">1959</option>
                                    <option value="1960">1960</option>
                                    <option value="1961">1961</option>
                                    <option value="1962">1962</option>
                                    <option value="1963">1963</option>
                                    <option value="1964">1964</option>
                                    <option value="1965">1965</option>
                                    <option value="1966">1966</option>
                                    <option value="1967">1967</option>
                                    <option value="1968">1968</option>
                                    <option value="1969">1969</option>
                                    <option value="1970">1970</option>
                                    <option value="1971">1971</option>
                                    <option value="1972">1972</option>
                                    <option value="1973">1973</option>
                                    <option value="1974">1974</option>
                                    <option value="1975">1975</option>
                                    <option value="1976">1976</option>
                                    <option value="1977">1977</option>
                                    <option value="1978">1978</option>
                                    <option value="1979">1979</option>
                                    <option value="1980">1980</option>
                                    <option value="1981">1981</option>
                                    <option value="1982">1982</option>
                                    <option value="1983">1983</option>
                                    <option value="1984">1984</option>
                                    <option value="1985">1985</option>
                                    <option value="1986">1986</option>
                                    <option value="1987">1987</option>
                                    <option value="1988">1988</option>
                                    <option value="1989">1989</option>
                                    <option value="1990">1990</option>
                                    <option value="1991">1991</option>
                                    <option value="1992">1992</option>
                                    <option value="1993">1993</option>
                                    <option value="1994">1994</option>
                                    <option value="1995">1995</option>
                                    <option value="1996">1996</option>
                                    <option value="1997">1997</option>
                                    <option value="1998">1998</option>
                                    <option value="1999">1999</option>
                                    <option value="2000">2000</option>
                                    <option value="2001">2001</option>
                                    <option value="2002">2002</option>
                                    <option value="2003">2003</option>
                                    <option value="2004">2004</option>
                                    <option value="2005">2005</option>
                                    <option value="2006">2006</option>
                                    <option value="2007">2007</option>
                                    <option value="2008">2008</option>
                                    <option value="2009">2009</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                    <option value="2016">2016</option>
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    <option value="2019">2019</option>
                                    <option value="2020">2020</option>
                                    <option value="2021">2021</option>
                                    <option value="2022">2022</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026">2026</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2026</span>
                        </div>
                    </div>
                    <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                            </polygon>
                        </svg>
                    </button>
                    <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
                        <thead aria-hidden="true">
                            <tr data-animated-weekdays="true" class="rdp-weekdays">
                                <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                                <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                                <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                                <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                                <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                                <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                                <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                            </tr>
                        </thead>
                        <tbody data-animated-weeks="true" class="rdp-weeks">
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-01">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-02">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-03">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-04">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-05">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-06">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-07">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-08">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-09">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-10">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-11">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-12">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-13">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
                                </td>
                                <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-17">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-18">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-19">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-04-20">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2026">20</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-21">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-22">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-23">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-24">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-25">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-26">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-27" data-today="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 27 April 2026">27</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-28">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-29">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-04-30">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
                                    <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Range selection

Range mode keeps a two-step selection flow, can show two months at once, and can optionally be constrained to a specific month interval.

### Example: Date ranges

Date ranges
January February March April May June July August September October November December March 2015 2015 March 2015

Mo Tu We Th Fr Sa Su

23 24 25 26 27 28 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

January February March April May June July August September October November December April 2015 2015 April 2015 Mo Tu We Th Fr Sa Su

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

You picked: No range selected

#### React (tsx)

```tsx
import { useState } from 'react';
import DayPickerCalendar, { type DateRange } from '@rio-cloud/rio-uikit/DayPickerCalendar';
import Divider from '@rio-cloud/rio-uikit/Divider';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const formatRange = (range: DateRange | undefined, locale = 'en-GB') => {
    if (!range?.from && !range?.to) {
        return 'No range selected';
    }

    const formatter = new Intl.DateTimeFormat(locale);
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerRangeSelectionExample = () => {
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>();

    return (
        <div className='max-width-600'>
            <FormLabel>Date ranges</FormLabel>
            <DayPickerCalendar
                mode='range'
                value={selectedRange}
                onChange={setSelectedRange}
                numberOfMonths={2}
                startMonth={new Date(2015, 0)}
                endMonth={new Date(2015, 3)}
            />
            <Divider />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRange(selectedRange)}
            </div>
        </div>
    );
};

export default DayPickerRangeSelectionExample;
```

#### HTML (html)

```html
<div class="max-width-600">
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Date ranges</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="range" data-multiple-months="true" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4" disabled="">May</option>
                                <option value="5" disabled="">June</option>
                                <option value="6" disabled="">July</option>
                                <option value="7" disabled="">August</option>
                                <option value="8" disabled="">September</option>
                                <option value="9" disabled="">October</option>
                                <option value="10" disabled="">November</option>
                                <option value="11" disabled="">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">March<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="2015">2015</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2015<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">March 2015</span>
                    </div>
                </div>
                <table role="grid" aria-multiselectable="true" aria-label="March 2015" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-23" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 23 February 2015">23</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-24" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 24 February 2015">24</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-25" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 25 February 2015">25</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-26" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 26 February 2015">26</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-27" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 27 February 2015">27</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-02-28" data-month="2015-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 28 February 2015">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-01">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Sunday, 1 March 2015">1</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-03-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 2 March 2015">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 3 March 2015">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 4 March 2015">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 5 March 2015">5</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 6 March 2015">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 7 March 2015">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 8 March 2015">8</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-03-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 9 March 2015">9</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-10">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 10 March 2015">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 11 March 2015">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 12 March 2015">12</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 13 March 2015">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 14 March 2015">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 15 March 2015">15</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-03-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 16 March 2015">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 17 March 2015">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 18 March 2015">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 19 March 2015">19</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 20 March 2015">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 21 March 2015">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 22 March 2015">22</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-03-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 23 March 2015">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 24 March 2015">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 25 March 2015">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 26 March 2015">26</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-27">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 27 March 2015">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 28 March 2015">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 29 March 2015">29</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-03-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2015">30</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-03-31">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2015">31</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-04-01" data-month="2015-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2015">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-04-02" data-month="2015-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2015">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-04-03" data-month="2015-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2015">3</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-04-04" data-month="2015-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2015">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-04-05" data-month="2015-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2015">5</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div data-animated-month="true" class="rdp-month">
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4" disabled="">May</option>
                                <option value="5" disabled="">June</option>
                                <option value="6" disabled="">July</option>
                                <option value="7" disabled="">August</option>
                                <option value="8" disabled="">September</option>
                                <option value="9" disabled="">October</option>
                                <option value="10" disabled="">November</option>
                                <option value="11" disabled="">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="2015">2015</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2015<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2015</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" tabindex="-1" aria-disabled="true" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="true" aria-label="April 2015" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-03-30" data-month="2015-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2015">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2015-03-31" data-month="2015-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2015">31</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-01">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2015">1</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2015">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2015">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2015">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2015">5</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-04-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2015">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2015">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2015">8</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2015">9</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-10">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2015">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2015">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2015">12</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-04-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2015">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 14 April 2015">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2015">15</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2015">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2015">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2015">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2015">19</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-04-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2015">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2015">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2015">22</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2015">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2015">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2015">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2015">26</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2015-04-27">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2015">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2015">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2015">29</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2015-04-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2015">30</button>
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-01" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-02" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-03" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-04" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-05" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-06" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-07" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-08" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-09" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2015-05-10" data-month="2015-05" data-hidden="true" data-outside="true">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No range selected
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Calendar in a dialog

The calendar wrapper also works well inside larger dialog layouts, where the selection is combined with additional form controls and only committed on apply.

### Example: Example 4

Open event calendar dialog Scheduled delivery slot: 15.04.2026 09:00 - 21.04.2026 09:00

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';
import { format, isAfter, isBefore, isValid, parse, setHours, setMinutes } from 'date-fns';

import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
import DayPickerCalendar, { type DateRange } from '@rio-cloud/rio-uikit/DayPickerCalendar';
import Dialog from '@rio-cloud/rio-uikit/Dialog';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import NumberControl from '@rio-cloud/rio-uikit/NumberControl';
import Switch from '@rio-cloud/rio-uikit/Switch';
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import classNames from '@rio-cloud/rio-uikit/classNames';

const createDefaultRange = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), today.getMonth(), 15);
    const end = new Date(today.getFullYear(), today.getMonth(), 21);

    return {
        from: start,
        to: end,
    } satisfies DateRange;
};

const getTimeValue = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');

const formatDateValue = (date: Date | undefined) => (date ? format(date, 'yyyy-MM-dd') : '');

const applyTimeToDate = (date: Date | undefined, timeValue: string) => {
    if (!date || !timeValue) {
        return date;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    return setMinutes(setHours(date, hours), minutes);
};

const parseDateValue = (value: string) => {
    if (!value) {
        return;
    }

    const parsedDate = parse(value, 'yyyy-MM-dd', new Date());
    return isValid(parsedDate) && format(parsedDate, 'yyyy-MM-dd') === value ? parsedDate : undefined;
};

const updateDateRange = (value: DateRange | undefined, key: 'from' | 'to', nextDate: Date | undefined) => {
    const nextRange = {
        from: key === 'from' ? nextDate : value?.from,
        to: key === 'to' ? nextDate : value?.to,
    };

    if (!nextRange.from && !nextRange.to) {
        return;
    }

    return nextRange satisfies DateRange;
};

const formatDateRange = (value: DateRange | undefined) => {
    if (!value?.from && !value?.to) {
        return 'No range selected';
    }

    const from = value?.from ? format(value.from, 'MMMM d, yyyy') : '...';
    const to = value?.to ? format(value.to, 'MMMM d, yyyy') : '...';

    return `${from} - ${to}`;
};

const formatScheduledValue = (value: DateRange | undefined, startTimeValue: string, endTimeValue: string) => {
    if (!value?.from && !value?.to) {
        return 'No event scheduled';
    }

    const from = value?.from ? `${format(value.from, 'dd.MM.yyyy')} ${startTimeValue}` : '...';
    const to = value?.to ? `${format(value.to, 'dd.MM.yyyy')} ${endTimeValue}` : '...';

    return `${from} - ${to}`;
};

const DayPickerCalendarDialogExample = () => {
    const defaultRange = createDefaultRange();
    const defaultVisibleMonth = new Date(defaultRange.from.getFullYear(), defaultRange.from.getMonth(), 1);

    const [showDialog, setShowDialog] = useState(false);
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(defaultRange);
    const [selectedStartTimeValue, setSelectedStartTimeValue] = useState('09:00');
    const [selectedEndTimeValue, setSelectedEndTimeValue] = useState('09:00');
    const [selectedTrailerCount, setSelectedTrailerCount] = useState(1);
    const [selectedOpenToAllCarriers, setSelectedOpenToAllCarriers] = useState(true);
    const [selectedPaperlessTransport, setSelectedPaperlessTransport] = useState(false);

    const [draftRange, setDraftRange] = useState<DateRange | undefined>(selectedRange);
    const [draftStartTimeValue, setDraftStartTimeValue] = useState(selectedStartTimeValue);
    const [draftEndTimeValue, setDraftEndTimeValue] = useState(selectedEndTimeValue);
    const [draftTrailerCount, setDraftTrailerCount] = useState(selectedTrailerCount);
    const [draftOpenToAllCarriers, setDraftOpenToAllCarriers] = useState(selectedOpenToAllCarriers);
    const [draftPaperlessTransport, setDraftPaperlessTransport] = useState(selectedPaperlessTransport);
    const [draftStartDateInput, setDraftStartDateInput] = useState(formatDateValue(selectedRange?.from));
    const [draftEndDateInput, setDraftEndDateInput] = useState(formatDateValue(selectedRange?.to));
    const [visibleMonth, setVisibleMonth] = useState(defaultVisibleMonth);

    useEffect(() => {
        setDraftStartDateInput(formatDateValue(draftRange?.from));
    }, [draftRange?.from?.getTime()]);

    useEffect(() => {
        setDraftEndDateInput(formatDateValue(draftRange?.to));
    }, [draftRange?.to?.getTime()]);

    const openDialog = () => {
        setDraftRange(selectedRange);
        setDraftStartTimeValue(selectedStartTimeValue);
        setDraftEndTimeValue(selectedEndTimeValue);
        setDraftTrailerCount(selectedTrailerCount);
        setDraftOpenToAllCarriers(selectedOpenToAllCarriers);
        setDraftPaperlessTransport(selectedPaperlessTransport);
        setDraftStartDateInput(formatDateValue(selectedRange?.from));
        setDraftEndDateInput(formatDateValue(selectedRange?.to));
        setVisibleMonth(
            new Date(
                (selectedRange?.from ?? defaultRange.from).getFullYear(),
                (selectedRange?.from ?? defaultRange.from).getMonth(),
                1
            )
        );
        setShowDialog(true);
    };

    const closeDialog = () => {
        setShowDialog(false);
    };

    const applyDialog = () => {
        setSelectedRange(draftRange);
        setSelectedStartTimeValue(draftStartTimeValue);
        setSelectedEndTimeValue(draftEndTimeValue);
        setSelectedTrailerCount(draftTrailerCount);
        setSelectedOpenToAllCarriers(draftOpenToAllCarriers);
        setSelectedPaperlessTransport(draftPaperlessTransport);
        setShowDialog(false);
    };

    const handleDateInputChange = (key: 'from' | 'to', nextValue: string) => {
        const setInputValue = key === 'from' ? setDraftStartDateInput : setDraftEndDateInput;
        setInputValue(nextValue);

        if (!nextValue) {
            setDraftRange(previousValue => updateDateRange(previousValue, key, undefined));
            return;
        }

        const parsedDate = parseDateValue(nextValue);
        if (!parsedDate) {
            return;
        }

        setDraftRange(previousValue => updateDateRange(previousValue, key, parsedDate));
        setVisibleMonth(new Date(parsedDate.getFullYear(), parsedDate.getMonth(), 1));
    };

    const handleDateInputBlur = (key: 'from' | 'to') => {
        const value = key === 'from' ? draftStartDateInput : draftEndDateInput;
        const setInputValue = key === 'from' ? setDraftStartDateInput : setDraftEndDateInput;
        const parsedDate = parseDateValue(value);

        if (value === '' || parsedDate) {
            return;
        }

        setInputValue(formatDateValue(key === 'from' ? draftRange?.from : draftRange?.to));
    };

    const startDateTime = applyTimeToDate(draftRange?.from, draftStartTimeValue);
    const endDateTime = applyTimeToDate(draftRange?.to, draftEndTimeValue);
    const hasStartDateOrderError = !!startDateTime && !!endDateTime && isAfter(startDateTime, endDateTime);
    const hasEndDateOrderError = !!startDateTime && !!endDateTime && isBefore(endDateTime, startDateTime);
    const hasDateOrderError = hasStartDateOrderError || hasEndDateOrderError;
    const startDateOrderErrorMessage = 'Start date must be on or before end date.';
    const endDateOrderErrorMessage = 'End date must be on or after start date.';

    return (
        <div>
            <Button bsStyle='primary' onClick={openDialog}>
                Open event calendar dialog
            </Button>

            <div className='padding-top-10'>
                <b>Scheduled delivery slot:</b>{' '}
                {formatScheduledValue(selectedRange, selectedStartTimeValue, selectedEndTimeValue)}
            </div>

            <Dialog show={showDialog} onClose={closeDialog} showCloseButton>
                <Dialog.Title title='Schedule delivery slot' subtitle='Plan a delivery window and handling details' />

                <Dialog.Body className='padding-x-20 padding-y-25'>
                    <div className='display-flex flex-column flex-row-sm column-gap-50 row-gap-15'>
                        <DayPickerCalendar
                            mode='range'
                            size='md'
                            value={draftRange}
                            onChange={setDraftRange}
                            month={visibleMonth}
                            onMonthChange={setVisibleMonth}
                            className='align-self-center'
                        />

                        <div className='flex-1-1 display-flex flex-column gap-25'>
                            <div className='display-flex flex-column gap-15'>
                                <div>
                                    <div className='display-flex gap-10'>
                                        <div className='flex-1-1'>
                                            <FormLabel>Start date</FormLabel>
                                            <div
                                                className={classNames(
                                                    'form-group',
                                                    hasStartDateOrderError && 'has-feedback has-error'
                                                )}
                                            >
                                                <ClearableInput
                                                    value={draftStartDateInput}
                                                    onChange={value => handleDateInputChange('from', value)}
                                                    onBlur={() => handleDateInputBlur('from')}
                                                    onClear={() => handleDateInputChange('from', '')}
                                                    mask='0000-00-00'
                                                    maskVisibility='never'
                                                    maskOverwrite='shift'
                                                    hasError={hasStartDateOrderError}
                                                    inputClassName='bg-white'
                                                />
                                                {hasStartDateOrderError && (
                                                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />
                                                )}
                                                {hasStartDateOrderError && (
                                                    <span className='help-block'>
                                                        <span>{startDateOrderErrorMessage}</span>
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                        <div className='form-group width-40pct'>
                                            <FormLabel>Start time</FormLabel>
                                            <TimePicker
                                                value={draftStartTimeValue || getTimeValue(draftRange?.from)}
                                                onChange={setDraftStartTimeValue}
                                                disabled={!draftRange?.from}
                                            />
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div className='display-flex gap-10'>
                                        <div className='flex-1-1'>
                                            <FormLabel>End date</FormLabel>
                                            <div
                                                className={classNames(
                                                    'form-group',
                                                    hasEndDateOrderError && 'has-feedback has-error'
                                                )}
                                            >
                                                <ClearableInput
                                                    value={draftEndDateInput}
                                                    onChange={value => handleDateInputChange('to', value)}
                                                    onBlur={() => handleDateInputBlur('to')}
                                                    onClear={() => handleDateInputChange('to', '')}
                                                    mask='0000-00-00'
                                                    maskVisibility='never'
                                                    maskOverwrite='shift'
                                                    hasError={hasEndDateOrderError}
                                                    inputClassName='bg-white'
                                                />
                                                {hasEndDateOrderError && (
                                                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />
                                                )}
                                                {hasEndDateOrderError && (
                                                    <span className='help-block'>
                                                        <span>{endDateOrderErrorMessage}</span>
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                        <div className='form-group width-40pct'>
                                            <FormLabel>End time</FormLabel>
                                            <TimePicker
                                                value={draftEndTimeValue || getTimeValue(draftRange?.to)}
                                                onChange={setDraftEndTimeValue}
                                                disabled={!draftRange?.to}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className='padding-top-10 display-flex flex-column-xs gap-25'>
                                <div className='width-100 width-100pct-xs'>
                                    <FormLabel>Expected trailers</FormLabel>
                                    <NumberControl
                                        min={1}
                                        max={3}
                                        step={1}
                                        value={draftTrailerCount}
                                        onChange={value => setDraftTrailerCount(value ?? 0)}
                                    />
                                </div>

                                <div className='min-width-200'>
                                    <FormLabel>Settings</FormLabel>
                                    <div className='space-y-10'>
                                        <Switch
                                            checked={draftOpenToAllCarriers}
                                            onChange={() => setDraftOpenToAllCarriers(!draftOpenToAllCarriers)}
                                            labelPosition='right'
                                            customTextStyle
                                        >
                                            <div className='text-size-14 text-color-darker'>Open to all carriers</div>
                                        </Switch>

                                        <Switch
                                            checked={draftPaperlessTransport}
                                            onChange={() => setDraftPaperlessTransport(!draftPaperlessTransport)}
                                            labelPosition='right'
                                            customTextStyle
                                        >
                                            <div className='text-size-14 text-color-darker'>
                                                Paperless transport documents
                                            </div>
                                        </Switch>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Dialog.Body>

                <Dialog.Footer>
                    <div className='display-flex justify-content-between align-items-center gap-15 width-100'>
                        <div className='text-color-dark'>
                            <b>Range:</b> {formatDateRange(draftRange)}
                        </div>

                        <ButtonToolbar>
                            <Button bsStyle='muted' onClick={closeDialog}>
                                Cancel
                            </Button>
                            <Button bsStyle='primary' onClick={applyDialog} disabled={hasDateOrderError}>
                                Schedule delivery slot
                            </Button>
                        </ButtonToolbar>
                    </div>
                </Dialog.Footer>
            </Dialog>
        </div>
    );
};

export default DayPickerCalendarDialogExample;
```

#### HTML (html)

```html
<div>
    <button type="button" class="btn btn-primary btn-component" tabindex="0">Open event calendar dialog</button>
    <div class="padding-top-10">
        <b>Scheduled delivery slot:</b> 15.04.2026 09:00 - 21.04.2026 09:00
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Multiple selection

Multiple mode is useful for scenarios like booking, planning, or marking several independent dates.

### Example: Multiple dates

Multiple dates
January February March April May June July August September October November December April 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 2026 April 2026 Mo Tu We Th Fr Sa Su

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

You picked: 27/04/2026

#### React (tsx)

```tsx
import { useState } from 'react';
import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import Divider from '@rio-cloud/rio-uikit/Divider';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const DayPickerMultipleSelectionExample = () => {
    const [selectedDates, setSelectedDates] = useState<Date[] | undefined>([new Date()]);

    const formattedDates = selectedDates?.length
        ? selectedDates.map(date => new Intl.DateTimeFormat('en-GB').format(date)).join(', ')
        : 'No dates selected';

    return (
        <div>
            <FormLabel>Multiple dates</FormLabel>
            <DayPickerCalendar mode='multiple' value={selectedDates} onChange={setSelectedDates} />
            <Divider />
            <div className='padding-top-15'>
                <b>You picked:</b> {formattedDates}
            </div>
        </div>
    );
};

export default DayPickerMultipleSelectionExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Multiple dates</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="multiple" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">April 2026</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-01">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-10">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 14 April 2026">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026">15</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-04-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 20 April 2026">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-today rdp-selected" role="gridcell" aria-selected="true" data-day="2026-04-27" data-selected="true" data-today="true">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Monday, 27 April 2026, selected">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-04-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="padding-top-15">
        <b>You picked:</b> 27/04/2026
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Modifiers and custom marked days

Modifiers let you attach domain-specific meaning like booked or available dates and style them separately.

### Example: Single date with modifiers

Single date with modifiers
January February March April May June July August September October November December June 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 2024 June 2024 Mo Tu We Th Fr Sa Su

27 28 29 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

You picked: No date selected
Try to pick a booked day.

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar, { type Modifiers } from '@rio-cloud/rio-uikit/DayPickerCalendar';
import Divider from '@rio-cloud/rio-uikit/Divider';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const DayPickerCalendarModifiersExample = () => {
    const [selected, setSelected] = useState<Date | undefined>();
    const [booked, setBooked] = useState(false);

    const bookedDays = [new Date(2024, 5, 8), new Date(2024, 5, 9)];
    const availableDays = [new Date(2024, 5, 15), new Date(2024, 5, 21)];

    const handleDayChange = (value: Date | undefined, modifiers: Modifiers) => {
        setBooked(value !== undefined && modifiers.booked);
        setSelected(value);
    };

    return (
        <div>
            <FormLabel>Single date with modifiers</FormLabel>
            <DayPickerCalendar
                mode='single'
                defaultMonth={new Date(2024, 5, 8)}
                modifiers={{ booked: bookedDays, available: availableDays }}
                modifiersClassNames={{
                    booked: 'text-color-danger',
                    available: 'text-color-success',
                }}
                onChange={handleDayChange}
                value={selected}
            />
            <Divider />
            <div className='padding-x-10 padding-y-5'>
                <b>You picked:</b> {selected ? new Intl.DateTimeFormat('en-GB').format(selected) : 'No date selected'}
            </div>
            <div className='padding-x-10 padding-bottom-5 text-color-darker'>
                {booked ? 'This day is already booked.' : 'Try to pick a booked day.'}
            </div>
        </div>
    );
};

export default DayPickerCalendarModifiersExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Single date with modifiers</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="single" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">June<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2024<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">June 2024</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="false" aria-label="June 2024" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-05-27" data-month="2024-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 May 2024">27</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-05-28" data-month="2024-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 May 2024">28</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-05-29" data-month="2024-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 May 2024">29</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-05-30" data-month="2024-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 May 2024">30</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-05-31" data-month="2024-05" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 31 May 2024">31</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-01">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Saturday, 1 June 2024">1</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 2 June 2024">2</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2024-06-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 3 June 2024">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 4 June 2024">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 5 June 2024">5</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 6 June 2024">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 7 June 2024">7</button>
                            </td>
                            <td class="rdp-day text-color-danger" role="gridcell" data-day="2024-06-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 8 June 2024">8</button>
                            </td>
                            <td class="rdp-day text-color-danger" role="gridcell" data-day="2024-06-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 9 June 2024">9</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2024-06-10">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 10 June 2024">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 11 June 2024">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 12 June 2024">12</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 13 June 2024">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 14 June 2024">14</button>
                            </td>
                            <td class="rdp-day text-color-success" role="gridcell" data-day="2024-06-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 15 June 2024">15</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 16 June 2024">16</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2024-06-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 17 June 2024">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 18 June 2024">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 19 June 2024">19</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 20 June 2024">20</button>
                            </td>
                            <td class="rdp-day text-color-success" role="gridcell" data-day="2024-06-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 21 June 2024">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 22 June 2024">22</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 23 June 2024">23</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2024-06-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 24 June 2024">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 25 June 2024">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 26 June 2024">26</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-27">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 27 June 2024">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 28 June 2024">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 29 June 2024">29</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2024-06-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 30 June 2024">30</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-01" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 July 2024">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-02" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 July 2024">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-03" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 July 2024">3</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-04" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 July 2024">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-05" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 July 2024">5</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-06" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 July 2024">6</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2024-07-07" data-month="2024-07" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 July 2024">7</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="padding-x-10 padding-y-5">
        <b>You picked:</b> No date selected
    </div>
    <div class="padding-x-10 padding-bottom-5 text-color-darker">Try to pick a booked day.</div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Reserved days

Reserved days can be modeled with disabledDays plus custom modifiers and CSS classes from the outside.

### Example: Reserved days

Reserved days
January February March April May June July August September October November December March 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 2026 March 2026 Mo Tu We Th Fr Sa Su

23 24 25 26 27 28 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

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const DayPickerCalendarReservedDaysExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>();
    const reservedDays = [new Date(2026, 2, 8), new Date(2026, 2, 9), new Date(2026, 2, 10)];

    return (
        <div>
            <FormLabel>Reserved days</FormLabel>
            <DayPickerCalendar
                mode='single'
                defaultMonth={new Date(2026, 2, 1)}
                disabledDays={reservedDays}
                modifiers={{ reserved: reservedDays }}
                modifiersClassNames={{
                    reserved: 'text-italic bg-warning opacity-50 scale-90 rounded',
                }}
                value={selectedDate}
                onChange={setSelectedDate}
            />
        </div>
    );
};

export default DayPickerCalendarReservedDaysExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Reserved days</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="single" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">March<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">March 2026</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="false" aria-label="March 2026" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-23" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 23 February 2026">23</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-24" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 24 February 2026">24</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-25" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 25 February 2026">25</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-26" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 26 February 2026">26</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-27" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 27 February 2026">27</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-28" data-month="2026-02" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 28 February 2026">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-01">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Sunday, 1 March 2026">1</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 2 March 2026">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 3 March 2026">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 4 March 2026">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 5 March 2026">5</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 6 March 2026">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 7 March 2026">7</button>
                            </td>
                            <td class="rdp-day rdp-disabled text-italic bg-warning opacity-50 scale-90 rounded" role="gridcell" data-day="2026-03-08" data-disabled="true">
                                <button class="rdp-day_button" type="button" disabled="" tabindex="-1" aria-label="Sunday, 8 March 2026">8</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-disabled text-italic bg-warning opacity-50 scale-90 rounded" role="gridcell" data-day="2026-03-09" data-disabled="true">
                                <button class="rdp-day_button" type="button" disabled="" tabindex="-1" aria-label="Monday, 9 March 2026">9</button>
                            </td>
                            <td class="rdp-day rdp-disabled text-italic bg-warning opacity-50 scale-90 rounded" role="gridcell" data-day="2026-03-10" data-disabled="true">
                                <button class="rdp-day_button" type="button" disabled="" tabindex="-1" aria-label="Tuesday, 10 March 2026">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-11">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 11 March 2026">11</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 12 March 2026">12</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 13 March 2026">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 14 March 2026">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 15 March 2026">15</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 16 March 2026">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 17 March 2026">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 18 March 2026">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 19 March 2026">19</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-20">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 20 March 2026">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 21 March 2026">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 22 March 2026">22</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 23 March 2026">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 24 March 2026">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 25 March 2026">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 26 March 2026">26</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-27">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 27 March 2026">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 28 March 2026">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 29 March 2026">29</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-31">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-01" data-month="2026-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-02" data-month="2026-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-03" data-month="2026-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-04" data-month="2026-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-05" data-month="2026-04" data-outside="true">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Hidden days

Hidden days are not rendered at all, which is useful for compact calendars that should only expose certain weekdays.

### Example: Hidden days in a month

Hidden days in a month
January February March April May June July August September October November December May 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 2026 May 2026 Mo Tu We Th Fr Sa Su

1 2 3
4 5 6 7 8 9
12 13 14 15 16 17
18 19 21 22 23 24
25 26 27 28 29 30 31

You picked: No date selected
Hidden: 10/05/2026, 11/05/2026, 20/05/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const hiddenDays = [new Date(2026, 4, 10), new Date(2026, 4, 11), new Date(2026, 4, 20)];

const DayPickerCalendarHiddenDaysExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>();

    return (
        <div>
            <FormLabel>Hidden days in a month</FormLabel>
            <DayPickerCalendar
                mode='single'
                defaultMonth={hiddenDays[0]}
                showOutsideDays={false}
                hiddenDays={hiddenDays}
                value={selectedDay}
                onChange={setSelectedDay}
            />
            <div className='padding-top-15'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
            <div className='padding-top-5 text-color-dark'>
                Hidden: {hiddenDays.map(date => new Intl.DateTimeFormat('en-GB').format(date)).join(', ')}
            </div>
        </div>
    );
};

export default DayPickerCalendarHiddenDaysExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Hidden days in a month</div>
    <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="single" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">May 2026</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="false" aria-label="May 2026" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-hidden rdp-outside rdp-today" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-hidden="true" data-outside="true" data-today="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-01">
                                <button class="rdp-day_button" type="button" tabindex="0" aria-label="Friday, 1 May 2026">1</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-02">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-03">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-05-04">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-05">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-06">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-07">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-08">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-09">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
                            </td>
                            <td class="rdp-day rdp-hidden" role="gridcell" data-day="2026-05-10" data-hidden="true">
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-hidden" role="gridcell" data-day="2026-05-11" data-hidden="true">
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-12">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-13">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-14">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-15">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 15 May 2026">15</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-16">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-17">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026">17</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-05-18">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-19">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
                            </td>
                            <td class="rdp-day rdp-hidden" role="gridcell" data-day="2026-05-20" data-hidden="true">
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-21">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-22">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-23">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-24">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-05-25">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-26">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-27">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-28">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-29">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-30">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-05-31">
                                <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                            <td class="rdp-day rdp-hidden rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-hidden="true" data-outside="true">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="padding-top-15">
        <b>You picked:</b> No date selected
    </div>
    <div class="padding-top-5 text-color-dark">Hidden: 10/05/2026, 11/05/2026, 20/05/2026</div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Marker dots

Marker dots can be rendered with custom day content to visualize additional events or statuses per day.

### Example: Marker dots

Marker dots
January February March April May June July August September October November December March 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 2026 March 2026 Mo Tu We Th Fr Sa Su

23 24 25 26 27 28 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

Logistics events
Select a day to inspect planned logistics events.

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

type LogisticsEvent = {
    colorClassName: string;
    title: string;
    time: string;
};

const plannedEventsByDay: Record<number, LogisticsEvent[]> = {
    6: [
        { colorClassName: 'text-color-warmup-raspberry', title: 'Late dock arrival', time: '08:15' },
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Customs inspection', time: '10:30' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Inbound pallet unload', time: '14:00' },
    ],
    7: [{ colorClassName: 'text-color-warmup-salmon', title: 'Trailer handover', time: '09:00' }],
    8: [
        { colorClassName: 'text-color-warmup-raspberry', title: 'Temperature alert check', time: '07:45' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Warehouse slot booking', time: '11:15' },
    ],
    9: [
        { colorClassName: 'text-color-warmup-raspberry', title: 'Carrier delay review', time: '06:30' },
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Border clearance', time: '09:45' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Dock assignment', time: '15:30' },
    ],
    10: [{ colorClassName: 'text-color-warmup-raspberry', title: 'Missed ETA follow-up', time: '12:00' }],
    13: [
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Return documents check', time: '08:20' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Loading sequence update', time: '13:10' },
    ],
    14: [
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Seal verification', time: '09:40' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Yard coordination', time: '16:00' },
    ],
    15: [
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Pickup preparation', time: '08:00' },
        { colorClassName: 'text-color-warmup-salmon', title: 'Carrier check-in', time: '11:50' },
    ],
    16: [
        { colorClassName: 'text-color-warmup-raspberry', title: 'Damaged goods report', time: '10:05' },
        { colorClassName: 'text-color-coldplay-aubergine', title: 'Replacement dispatch', time: '17:20' },
    ],
    17: [{ colorClassName: 'text-color-coldplay-aubergine', title: 'Proof of delivery review', time: '15:45' }],
};

const DayPickerCalendarMarkersExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>();

    const selectedDayEvents = selectedDate ? plannedEventsByDay[selectedDate.getDate()] || [] : undefined;

    const selectedDateLabel =
        selectedDate &&
        new Intl.DateTimeFormat('en-GB', {
            weekday: 'long',
            day: '2-digit',
            month: 'long',
            year: 'numeric',
        }).format(selectedDate);

    return (
        <div>
            <FormLabel>Marker dots</FormLabel>
            <div className='display-flex gap-50 align-items-start flex-wrap'>
                <DayPickerCalendar
                    mode='single'
                    defaultMonth={new Date(2026, 2, 1)}
                    renderDayContent={(date, modifiers) => {
                        if (modifiers.outside) {
                            return null;
                        }

                        const markerColors = plannedEventsByDay[date.getDate()]?.map(event => event.colorClassName);

                        return markerColors ? (
                            <span className='position-absolute top-0 display-inline-flex text-size-12 scale-50'>
                                {markerColors.map((colorClassName, index) => (
                                    <span
                                        key={`${date.toISOString()}-${colorClassName}-${index}`}
                                        className={`rioglyph rioglyph-sphere ${colorClassName}`}
                                    />
                                ))}
                            </span>
                        ) : null;
                    }}
                    value={selectedDate}
                    onChange={setSelectedDate}
                />

                <div className='width-300'>
                    <div className='text-medium text-color-darkest'>Logistics events</div>
                    {selectedDateLabel && <div className='text-color-dark margin-bottom-15'>{selectedDateLabel}</div>}

                    {!selectedDate ? (
                        <div className='text-color-gray'>Select a day to inspect planned logistics events.</div>
                    ) : selectedDayEvents && selectedDayEvents.length > 0 ? (
                        <ul className='list-group border rounded margin-bottom-0'>
                            {selectedDayEvents.map(event => (
                                <li key={`${event.time}-${event.title}`} className='list-group-item'>
                                    <div className='display-flex align-items-start gap-10'>
                                        <span
                                            className={`rioglyph rioglyph-sphere margin-top-3 ${event.colorClassName}`}
                                        />
                                        <div>
                                            <div className='text-medium text-color-darker'>{event.title}</div>
                                            <div className='text-color-gray'>{event.time}</div>
                                        </div>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    ) : (
                        <div className='text-color-gray'>No logistics events are scheduled for the selected day.</div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default DayPickerCalendarMarkersExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Marker dots</div>
    <div class="display-flex gap-50 align-items-start flex-wrap">
        <div class="rdp-root DayPicker display-block DayPicker--md" lang="en-GB" data-mode="single" data-nav-layout="around">
            <div class="rdp-months">
                <div data-animated-month="true" class="rdp-month">
                    <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                            </polygon>
                        </svg>
                    </button>
                    <div data-animated-caption="true" class="rdp-month_caption">
                        <div class="rdp-dropdowns">
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                    <option value="0">January</option>
                                    <option value="1">February</option>
                                    <option value="2">March</option>
                                    <option value="3">April</option>
                                    <option value="4">May</option>
                                    <option value="5">June</option>
                                    <option value="6">July</option>
                                    <option value="7">August</option>
                                    <option value="8">September</option>
                                    <option value="9">October</option>
                                    <option value="10">November</option>
                                    <option value="11">December</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">March<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span data-disabled="false" class="rdp-dropdown_root">
                                <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                    <option value="1926">1926</option>
                                    <option value="1927">1927</option>
                                    <option value="1928">1928</option>
                                    <option value="1929">1929</option>
                                    <option value="1930">1930</option>
                                    <option value="1931">1931</option>
                                    <option value="1932">1932</option>
                                    <option value="1933">1933</option>
                                    <option value="1934">1934</option>
                                    <option value="1935">1935</option>
                                    <option value="1936">1936</option>
                                    <option value="1937">1937</option>
                                    <option value="1938">1938</option>
                                    <option value="1939">1939</option>
                                    <option value="1940">1940</option>
                                    <option value="1941">1941</option>
                                    <option value="1942">1942</option>
                                    <option value="1943">1943</option>
                                    <option value="1944">1944</option>
                                    <option value="1945">1945</option>
                                    <option value="1946">1946</option>
                                    <option value="1947">1947</option>
                                    <option value="1948">1948</option>
                                    <option value="1949">1949</option>
                                    <option value="1950">1950</option>
                                    <option value="1951">1951</option>
                                    <option value="1952">1952</option>
                                    <option value="1953">1953</option>
                                    <option value="1954">1954</option>
                                    <option value="1955">1955</option>
                                    <option value="1956">1956</option>
                                    <option value="1957">1957</option>
                                    <option value="1958">1958</option>
                                    <option value="1959">1959</option>
                                    <option value="1960">1960</option>
                                    <option value="1961">1961</option>
                                    <option value="1962">1962</option>
                                    <option value="1963">1963</option>
                                    <option value="1964">1964</option>
                                    <option value="1965">1965</option>
                                    <option value="1966">1966</option>
                                    <option value="1967">1967</option>
                                    <option value="1968">1968</option>
                                    <option value="1969">1969</option>
                                    <option value="1970">1970</option>
                                    <option value="1971">1971</option>
                                    <option value="1972">1972</option>
                                    <option value="1973">1973</option>
                                    <option value="1974">1974</option>
                                    <option value="1975">1975</option>
                                    <option value="1976">1976</option>
                                    <option value="1977">1977</option>
                                    <option value="1978">1978</option>
                                    <option value="1979">1979</option>
                                    <option value="1980">1980</option>
                                    <option value="1981">1981</option>
                                    <option value="1982">1982</option>
                                    <option value="1983">1983</option>
                                    <option value="1984">1984</option>
                                    <option value="1985">1985</option>
                                    <option value="1986">1986</option>
                                    <option value="1987">1987</option>
                                    <option value="1988">1988</option>
                                    <option value="1989">1989</option>
                                    <option value="1990">1990</option>
                                    <option value="1991">1991</option>
                                    <option value="1992">1992</option>
                                    <option value="1993">1993</option>
                                    <option value="1994">1994</option>
                                    <option value="1995">1995</option>
                                    <option value="1996">1996</option>
                                    <option value="1997">1997</option>
                                    <option value="1998">1998</option>
                                    <option value="1999">1999</option>
                                    <option value="2000">2000</option>
                                    <option value="2001">2001</option>
                                    <option value="2002">2002</option>
                                    <option value="2003">2003</option>
                                    <option value="2004">2004</option>
                                    <option value="2005">2005</option>
                                    <option value="2006">2006</option>
                                    <option value="2007">2007</option>
                                    <option value="2008">2008</option>
                                    <option value="2009">2009</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                    <option value="2016">2016</option>
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    <option value="2019">2019</option>
                                    <option value="2020">2020</option>
                                    <option value="2021">2021</option>
                                    <option value="2022">2022</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026">2026</option>
                                </select>
                                <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                        <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                        </polygon>
                                    </svg>
                                </span>
                            </span>
                            <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">March 2026</span>
                        </div>
                    </div>
                    <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                        <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                            <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                            </polygon>
                        </svg>
                    </button>
                    <table role="grid" aria-multiselectable="false" aria-label="March 2026" class="rdp-month_grid">
                        <thead aria-hidden="true">
                            <tr data-animated-weekdays="true" class="rdp-weekdays">
                                <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                                <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                                <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                                <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                                <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                                <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                                <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                            </tr>
                        </thead>
                        <tbody data-animated-weeks="true" class="rdp-weeks">
                            <tr class="rdp-week">
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-23" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Monday, 23 February 2026" class="rdp-day_button">23</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-24" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 24 February 2026" class="rdp-day_button">24</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-25" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 25 February 2026" class="rdp-day_button">25</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-26" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 26 February 2026" class="rdp-day_button">26</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-27" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Friday, 27 February 2026" class="rdp-day_button">27</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-28" data-month="2026-02" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 28 February 2026" class="rdp-day_button">28</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-01">
                                    <button type="button" tabindex="0" aria-label="Sunday, 1 March 2026" class="rdp-day_button">1</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-03-02">
                                    <button type="button" tabindex="-1" aria-label="Monday, 2 March 2026" class="rdp-day_button">2</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-03">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 3 March 2026" class="rdp-day_button">3</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-04">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 4 March 2026" class="rdp-day_button">4</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-05">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 5 March 2026" class="rdp-day_button">5</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-06">
                                    <button type="button" tabindex="-1" aria-label="Friday, 6 March 2026" class="rdp-day_button">6<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-raspberry">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-07">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 7 March 2026" class="rdp-day_button">7<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-08">
                                    <button type="button" tabindex="-1" aria-label="Sunday, 8 March 2026" class="rdp-day_button">8<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-raspberry">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-03-09">
                                    <button type="button" tabindex="-1" aria-label="Monday, 9 March 2026" class="rdp-day_button">9<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-raspberry">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-10">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 10 March 2026" class="rdp-day_button">10<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-raspberry">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-11">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 11 March 2026" class="rdp-day_button">11</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-12">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 12 March 2026" class="rdp-day_button">12</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-13">
                                    <button type="button" tabindex="-1" aria-label="Friday, 13 March 2026" class="rdp-day_button">13<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-14">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 14 March 2026" class="rdp-day_button">14<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-15">
                                    <button type="button" tabindex="-1" aria-label="Sunday, 15 March 2026" class="rdp-day_button">15<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-salmon">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-03-16">
                                    <button type="button" tabindex="-1" aria-label="Monday, 16 March 2026" class="rdp-day_button">16<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-warmup-raspberry">
                                            </span>
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-17">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 17 March 2026" class="rdp-day_button">17<span class="position-absolute top-0 display-inline-flex text-size-12 scale-50">
                                            <span class="rioglyph rioglyph-sphere text-color-coldplay-aubergine">
                                            </span>
                                        </span>
                                    </button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-18">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 18 March 2026" class="rdp-day_button">18</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-19">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 19 March 2026" class="rdp-day_button">19</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-20">
                                    <button type="button" tabindex="-1" aria-label="Friday, 20 March 2026" class="rdp-day_button">20</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-21">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 21 March 2026" class="rdp-day_button">21</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-22">
                                    <button type="button" tabindex="-1" aria-label="Sunday, 22 March 2026" class="rdp-day_button">22</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-03-23">
                                    <button type="button" tabindex="-1" aria-label="Monday, 23 March 2026" class="rdp-day_button">23</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-24">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 24 March 2026" class="rdp-day_button">24</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-25">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 25 March 2026" class="rdp-day_button">25</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-26">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 26 March 2026" class="rdp-day_button">26</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-27">
                                    <button type="button" tabindex="-1" aria-label="Friday, 27 March 2026" class="rdp-day_button">27</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-28">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 28 March 2026" class="rdp-day_button">28</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-29">
                                    <button type="button" tabindex="-1" aria-label="Sunday, 29 March 2026" class="rdp-day_button">29</button>
                                </td>
                            </tr>
                            <tr class="rdp-week">
                                <td class="rdp-day" role="gridcell" data-day="2026-03-30">
                                    <button type="button" tabindex="-1" aria-label="Monday, 30 March 2026" class="rdp-day_button">30</button>
                                </td>
                                <td class="rdp-day" role="gridcell" data-day="2026-03-31">
                                    <button type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026" class="rdp-day_button">31</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-01" data-month="2026-04" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026" class="rdp-day_button">1</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-02" data-month="2026-04" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Thursday, 2 April 2026" class="rdp-day_button">2</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-03" data-month="2026-04" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Friday, 3 April 2026" class="rdp-day_button">3</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-04" data-month="2026-04" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Saturday, 4 April 2026" class="rdp-day_button">4</button>
                                </td>
                                <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-05" data-month="2026-04" data-outside="true">
                                    <button type="button" tabindex="-1" aria-label="Sunday, 5 April 2026" class="rdp-day_button">5</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="width-300">
            <div class="text-medium text-color-darkest">Logistics events</div>
            <div class="text-color-gray">Select a day to inspect planned logistics events.</div>
        </div>
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |

## Custom day icons

Use renderDayContent to render optional React nodes inside specific day cells, for example custom icons or tooltip anchors.

### Example: Custom day content

Custom day content
January February March April May June July August September October November December March 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 2026 March 2026 Mo Tu We Th Fr Sa Su

23 24 25 26 27 28 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

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPickerCalendar from '@rio-cloud/rio-uikit/DayPickerCalendar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';

const dayIcons: Record<number, string> = {
    4: 'rioglyph-delivery',
    11: 'rioglyph-warning-sign',
    18: 'rioglyph-info-sign',
};

const DayPickerCalendarDayIconsExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>();

    return (
        <div>
            <FormLabel>Custom day content</FormLabel>
            <DayPickerCalendar
                mode='single'
                size='lg'
                defaultMonth={new Date(2026, 2, 1)}
                renderDayContent={(date, modifiers) => {
                    if (modifiers.outside) {
                        return null;
                    }

                    const day = date.getDate();
                    const iconName = dayIcons[day];

                    return iconName ? (
                        <SimpleTooltip
                            content={`Special day ${date.toDateString()}`}
                            placement='bottom'
                            className='max-width-150'
                        >
                            <span className='position-absolute bottom-0 right-0 text-size-12 text-color-dark'>
                                <span className={`rioglyph ${iconName}`} />
                            </span>
                        </SimpleTooltip>
                    ) : null;
                }}
                value={selectedDate}
                onChange={setSelectedDate}
            />
        </div>
    );
};

export default DayPickerCalendarDayIconsExample;
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Custom day content</div>
    <div class="rdp-root DayPicker display-block DayPicker--lg" lang="en-GB" data-mode="single" data-nav-layout="around">
        <div class="rdp-months">
            <div data-animated-month="true" class="rdp-month">
                <button type="button" class="rdp-button_previous" aria-label="Go to the Previous Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20">
                        </polygon>
                    </svg>
                </button>
                <div data-animated-caption="true" class="rdp-month_caption">
                    <div class="rdp-dropdowns">
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-months_dropdown" aria-label="Choose the Month">
                                <option value="0">January</option>
                                <option value="1">February</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">March<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span data-disabled="false" class="rdp-dropdown_root">
                            <select class="rdp-dropdown rdp-years_dropdown" aria-label="Choose the Year">
                                <option value="1926">1926</option>
                                <option value="1927">1927</option>
                                <option value="1928">1928</option>
                                <option value="1929">1929</option>
                                <option value="1930">1930</option>
                                <option value="1931">1931</option>
                                <option value="1932">1932</option>
                                <option value="1933">1933</option>
                                <option value="1934">1934</option>
                                <option value="1935">1935</option>
                                <option value="1936">1936</option>
                                <option value="1937">1937</option>
                                <option value="1938">1938</option>
                                <option value="1939">1939</option>
                                <option value="1940">1940</option>
                                <option value="1941">1941</option>
                                <option value="1942">1942</option>
                                <option value="1943">1943</option>
                                <option value="1944">1944</option>
                                <option value="1945">1945</option>
                                <option value="1946">1946</option>
                                <option value="1947">1947</option>
                                <option value="1948">1948</option>
                                <option value="1949">1949</option>
                                <option value="1950">1950</option>
                                <option value="1951">1951</option>
                                <option value="1952">1952</option>
                                <option value="1953">1953</option>
                                <option value="1954">1954</option>
                                <option value="1955">1955</option>
                                <option value="1956">1956</option>
                                <option value="1957">1957</option>
                                <option value="1958">1958</option>
                                <option value="1959">1959</option>
                                <option value="1960">1960</option>
                                <option value="1961">1961</option>
                                <option value="1962">1962</option>
                                <option value="1963">1963</option>
                                <option value="1964">1964</option>
                                <option value="1965">1965</option>
                                <option value="1966">1966</option>
                                <option value="1967">1967</option>
                                <option value="1968">1968</option>
                                <option value="1969">1969</option>
                                <option value="1970">1970</option>
                                <option value="1971">1971</option>
                                <option value="1972">1972</option>
                                <option value="1973">1973</option>
                                <option value="1974">1974</option>
                                <option value="1975">1975</option>
                                <option value="1976">1976</option>
                                <option value="1977">1977</option>
                                <option value="1978">1978</option>
                                <option value="1979">1979</option>
                                <option value="1980">1980</option>
                                <option value="1981">1981</option>
                                <option value="1982">1982</option>
                                <option value="1983">1983</option>
                                <option value="1984">1984</option>
                                <option value="1985">1985</option>
                                <option value="1986">1986</option>
                                <option value="1987">1987</option>
                                <option value="1988">1988</option>
                                <option value="1989">1989</option>
                                <option value="1990">1990</option>
                                <option value="1991">1991</option>
                                <option value="1992">1992</option>
                                <option value="1993">1993</option>
                                <option value="1994">1994</option>
                                <option value="1995">1995</option>
                                <option value="1996">1996</option>
                                <option value="1997">1997</option>
                                <option value="1998">1998</option>
                                <option value="1999">1999</option>
                                <option value="2000">2000</option>
                                <option value="2001">2001</option>
                                <option value="2002">2002</option>
                                <option value="2003">2003</option>
                                <option value="2004">2004</option>
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                            </select>
                            <span class="rdp-caption_label" aria-hidden="true">2026<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
                                    <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
                                    </polygon>
                                </svg>
                            </span>
                        </span>
                        <span role="status" aria-live="polite" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">March 2026</span>
                    </div>
                </div>
                <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
                    <svg class="rdp-chevron" width="24" height="24" viewBox="0 0 24 24">
                        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20">
                        </polygon>
                    </svg>
                </button>
                <table role="grid" aria-multiselectable="false" aria-label="March 2026" class="rdp-month_grid">
                    <thead aria-hidden="true">
                        <tr data-animated-weekdays="true" class="rdp-weekdays">
                            <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
                            <th aria-label="Tuesday" class="rdp-weekday" scope="col">Tu</th>
                            <th aria-label="Wednesday" class="rdp-weekday" scope="col">We</th>
                            <th aria-label="Thursday" class="rdp-weekday" scope="col">Th</th>
                            <th aria-label="Friday" class="rdp-weekday" scope="col">Fr</th>
                            <th aria-label="Saturday" class="rdp-weekday" scope="col">Sa</th>
                            <th aria-label="Sunday" class="rdp-weekday" scope="col">Su</th>
                        </tr>
                    </thead>
                    <tbody data-animated-weeks="true" class="rdp-weeks">
                        <tr class="rdp-week">
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-23" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Monday, 23 February 2026" class="rdp-day_button">23</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-24" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 24 February 2026" class="rdp-day_button">24</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-25" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 25 February 2026" class="rdp-day_button">25</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-26" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Thursday, 26 February 2026" class="rdp-day_button">26</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-27" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Friday, 27 February 2026" class="rdp-day_button">27</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-02-28" data-month="2026-02" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Saturday, 28 February 2026" class="rdp-day_button">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-01">
                                <button type="button" tabindex="0" aria-label="Sunday, 1 March 2026" class="rdp-day_button">1</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-02">
                                <button type="button" tabindex="-1" aria-label="Monday, 2 March 2026" class="rdp-day_button">2</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-03">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 3 March 2026" class="rdp-day_button">3</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-04">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 4 March 2026" class="rdp-day_button">4<span class="position-absolute bottom-0 right-0 text-size-12 text-color-dark">
                                        <span class="rioglyph rioglyph-delivery">
                                        </span>
                                    </span>
                                </button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-05">
                                <button type="button" tabindex="-1" aria-label="Thursday, 5 March 2026" class="rdp-day_button">5</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-06">
                                <button type="button" tabindex="-1" aria-label="Friday, 6 March 2026" class="rdp-day_button">6</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-07">
                                <button type="button" tabindex="-1" aria-label="Saturday, 7 March 2026" class="rdp-day_button">7</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-08">
                                <button type="button" tabindex="-1" aria-label="Sunday, 8 March 2026" class="rdp-day_button">8</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-09">
                                <button type="button" tabindex="-1" aria-label="Monday, 9 March 2026" class="rdp-day_button">9</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-10">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 10 March 2026" class="rdp-day_button">10</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-11">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 11 March 2026" class="rdp-day_button">11<span class="position-absolute bottom-0 right-0 text-size-12 text-color-dark">
                                        <span class="rioglyph rioglyph-warning-sign">
                                        </span>
                                    </span>
                                </button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-12">
                                <button type="button" tabindex="-1" aria-label="Thursday, 12 March 2026" class="rdp-day_button">12</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-13">
                                <button type="button" tabindex="-1" aria-label="Friday, 13 March 2026" class="rdp-day_button">13</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-14">
                                <button type="button" tabindex="-1" aria-label="Saturday, 14 March 2026" class="rdp-day_button">14</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-15">
                                <button type="button" tabindex="-1" aria-label="Sunday, 15 March 2026" class="rdp-day_button">15</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-16">
                                <button type="button" tabindex="-1" aria-label="Monday, 16 March 2026" class="rdp-day_button">16</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-17">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 17 March 2026" class="rdp-day_button">17</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-18">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 18 March 2026" class="rdp-day_button">18<span class="position-absolute bottom-0 right-0 text-size-12 text-color-dark">
                                        <span class="rioglyph rioglyph-info-sign">
                                        </span>
                                    </span>
                                </button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-19">
                                <button type="button" tabindex="-1" aria-label="Thursday, 19 March 2026" class="rdp-day_button">19</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-20">
                                <button type="button" tabindex="-1" aria-label="Friday, 20 March 2026" class="rdp-day_button">20</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-21">
                                <button type="button" tabindex="-1" aria-label="Saturday, 21 March 2026" class="rdp-day_button">21</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-22">
                                <button type="button" tabindex="-1" aria-label="Sunday, 22 March 2026" class="rdp-day_button">22</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-23">
                                <button type="button" tabindex="-1" aria-label="Monday, 23 March 2026" class="rdp-day_button">23</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-24">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 24 March 2026" class="rdp-day_button">24</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-25">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 25 March 2026" class="rdp-day_button">25</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-26">
                                <button type="button" tabindex="-1" aria-label="Thursday, 26 March 2026" class="rdp-day_button">26</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-27">
                                <button type="button" tabindex="-1" aria-label="Friday, 27 March 2026" class="rdp-day_button">27</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-28">
                                <button type="button" tabindex="-1" aria-label="Saturday, 28 March 2026" class="rdp-day_button">28</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-29">
                                <button type="button" tabindex="-1" aria-label="Sunday, 29 March 2026" class="rdp-day_button">29</button>
                            </td>
                        </tr>
                        <tr class="rdp-week">
                            <td class="rdp-day" role="gridcell" data-day="2026-03-30">
                                <button type="button" tabindex="-1" aria-label="Monday, 30 March 2026" class="rdp-day_button">30</button>
                            </td>
                            <td class="rdp-day" role="gridcell" data-day="2026-03-31">
                                <button type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026" class="rdp-day_button">31</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-01" data-month="2026-04" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026" class="rdp-day_button">1</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-02" data-month="2026-04" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Thursday, 2 April 2026" class="rdp-day_button">2</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-03" data-month="2026-04" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Friday, 3 April 2026" class="rdp-day_button">3</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-04" data-month="2026-04" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Saturday, 4 April 2026" class="rdp-day_button">4</button>
                            </td>
                            <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-05" data-month="2026-04" data-outside="true">
                                <button type="button" tabindex="-1" aria-label="Sunday, 5 April 2026" class="rdp-day_button">5</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonCalendar props

### CommonCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |
| className | string | — | Additional classes for the calendar root element. |
| numberOfMonths | 1 \| 2 | 1 | Number of visible calendar months. |
| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |
| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |
| showWeekNumber | boolean | false | Shows the calendar week number column. |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |
| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |
| month | Date | — | Controlled currently visible month. |
| onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
| startMonth | Date | — | Lower month boundary for month navigation. |
| endMonth | Date | — | Upper month boundary for month navigation. |
| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |
| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |
| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |
| modifiersClassNames | Record<string, string> | — | Additional CSS classes attached to custom modifiers. |
| renderDayContent | (date: Date, modifiers: Modifiers) => ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |

#### Props: SingleDayPickerCalendar props

### SingleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |

#### Props: MultipleDayPickerCalendar props

### MultipleDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |

#### Props: RangeDayPickerCalendar props

### RangeDayPickerCalendar props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |