@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/README.md +2 -1
  2. package/dist/doc-metadata.json +92 -92
  3. package/dist/docs/components/accentBar.md +1 -1
  4. package/dist/docs/components/activity.md +1 -1
  5. package/dist/docs/components/analyticsAnalysisOverlay.md +3 -1
  6. package/dist/docs/components/animatedNumber.md +2 -2
  7. package/dist/docs/components/animatedTextReveal.md +6 -6
  8. package/dist/docs/components/animations.md +22 -22
  9. package/dist/docs/components/appHeader.md +1 -1
  10. package/dist/docs/components/appLayout.md +31 -65
  11. package/dist/docs/components/appNavigationBar.md +1 -1
  12. package/dist/docs/components/areaCharts.md +7 -5
  13. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  14. package/dist/docs/components/assetTree.md +160 -142
  15. package/dist/docs/components/autosuggests.md +1 -1
  16. package/dist/docs/components/avatar.md +1 -1
  17. package/dist/docs/components/banner.md +2 -2
  18. package/dist/docs/components/barCharts.md +16 -14
  19. package/dist/docs/components/barList.md +9 -9
  20. package/dist/docs/components/basicMap.md +45 -1
  21. package/dist/docs/components/bottomSheet.md +1 -1
  22. package/dist/docs/components/button.md +1 -1
  23. package/dist/docs/components/buttonToolbar.md +1 -1
  24. package/dist/docs/components/calendarStripe.md +56 -56
  25. package/dist/docs/components/card.md +1 -1
  26. package/dist/docs/components/carousel.md +1 -1
  27. package/dist/docs/components/chartColors.md +3 -1
  28. package/dist/docs/components/chartsGettingStarted.md +3 -1
  29. package/dist/docs/components/chat.md +1 -1
  30. package/dist/docs/components/checkbox.md +3 -1
  31. package/dist/docs/components/circularProgress.md +5 -5
  32. package/dist/docs/components/clearableInput.md +1 -1
  33. package/dist/docs/components/collapse.md +4 -2
  34. package/dist/docs/components/composedCharts.md +17 -15
  35. package/dist/docs/components/contentLoader.md +1 -1
  36. package/dist/docs/components/dataTabs.md +1 -1
  37. package/dist/docs/components/datepickers.md +662 -660
  38. package/dist/docs/components/dayPicker.md +55 -5
  39. package/dist/docs/components/dayPickerCalendar.md +488 -468
  40. package/dist/docs/components/dialogs.md +1 -1
  41. package/dist/docs/components/divider.md +1 -1
  42. package/dist/docs/components/dropdowns.md +3270 -3244
  43. package/dist/docs/components/editableContent.md +1 -1
  44. package/dist/docs/components/expander.md +1 -1
  45. package/dist/docs/components/fade.md +1 -1
  46. package/dist/docs/components/fadeExpander.md +1 -1
  47. package/dist/docs/components/fadeUp.md +2 -2
  48. package/dist/docs/components/feedback.md +1 -1
  49. package/dist/docs/components/filePickers.md +1 -1
  50. package/dist/docs/components/formLabel.md +1 -1
  51. package/dist/docs/components/groupedItemList.md +1 -1
  52. package/dist/docs/components/htmlTable.md +113 -115
  53. package/dist/docs/components/iconList.md +3 -3
  54. package/dist/docs/components/imagePreloader.md +1 -1
  55. package/dist/docs/components/labeledElement.md +1 -1
  56. package/dist/docs/components/licensePlate.md +1 -1
  57. package/dist/docs/components/lineCharts.md +6 -4
  58. package/dist/docs/components/listMenu.md +1 -1
  59. package/dist/docs/components/loadMore.md +1 -1
  60. package/dist/docs/components/mainNavigation.md +1 -1
  61. package/dist/docs/components/mapCircle.md +1 -1
  62. package/dist/docs/components/mapCluster.md +3 -1
  63. package/dist/docs/components/mapContext.md +1 -1
  64. package/dist/docs/components/mapDraggableMarker.md +1 -1
  65. package/dist/docs/components/mapGettingStarted.md +39 -1
  66. package/dist/docs/components/mapInfoBubble.md +1 -1
  67. package/dist/docs/components/mapLayerGroup.md +1 -1
  68. package/dist/docs/components/mapMarker.md +3 -1
  69. package/dist/docs/components/mapPolygon.md +1 -1
  70. package/dist/docs/components/mapRoute.md +1 -1
  71. package/dist/docs/components/mapSettings.md +36 -9
  72. package/dist/docs/components/mapUtils.md +65 -2
  73. package/dist/docs/components/mapViewportHistory.md +287 -0
  74. package/dist/docs/components/multiselects.md +171 -1
  75. package/dist/docs/components/noData.md +1 -1
  76. package/dist/docs/components/notifications.md +1 -1
  77. package/dist/docs/components/numbercontrol.md +1 -1
  78. package/dist/docs/components/onboarding.md +1 -1
  79. package/dist/docs/components/page.md +1 -1
  80. package/dist/docs/components/pager.md +1 -1
  81. package/dist/docs/components/pieCharts.md +38 -36
  82. package/dist/docs/components/popover.md +1 -1
  83. package/dist/docs/components/position.md +1 -1
  84. package/dist/docs/components/radialBarCharts.md +27 -25
  85. package/dist/docs/components/radioCardGroup.md +1 -1
  86. package/dist/docs/components/radiobutton.md +3 -1
  87. package/dist/docs/components/releaseNotes.md +1 -1
  88. package/dist/docs/components/resizer.md +3 -1
  89. package/dist/docs/components/responsiveColumnStripe.md +3 -1
  90. package/dist/docs/components/responsiveVideo.md +1 -1
  91. package/dist/docs/components/rioglyph.md +1 -1
  92. package/dist/docs/components/rules.md +1 -1
  93. package/dist/docs/components/saveableInput.md +247 -247
  94. package/dist/docs/components/selects.md +168 -51
  95. package/dist/docs/components/sidebar.md +1 -1
  96. package/dist/docs/components/sliders.md +1 -1
  97. package/dist/docs/components/smoothScrollbars.md +3 -1
  98. package/dist/docs/components/spinners.md +1 -1
  99. package/dist/docs/components/states.md +15 -1
  100. package/dist/docs/components/statsWidgets.md +1 -1
  101. package/dist/docs/components/statusBar.md +3 -1
  102. package/dist/docs/components/stepButton.md +1 -1
  103. package/dist/docs/components/steppedProgressBars.md +1 -1
  104. package/dist/docs/components/subNavigation.md +1 -1
  105. package/dist/docs/components/supportMarker.md +1 -1
  106. package/dist/docs/components/svgImage.md +1 -1
  107. package/dist/docs/components/switch.md +3 -1
  108. package/dist/docs/components/table.md +1998 -221
  109. package/dist/docs/components/tableControls.md +51 -51
  110. package/dist/docs/components/tagManager.md +1 -1
  111. package/dist/docs/components/tags.md +1 -1
  112. package/dist/docs/components/teaser.md +3 -1
  113. package/dist/docs/components/textTruncateMiddle.md +1 -1
  114. package/dist/docs/components/timeline.md +1 -1
  115. package/dist/docs/components/timepicker.md +3 -1
  116. package/dist/docs/components/toggleButton.md +1 -1
  117. package/dist/docs/components/tooltip.md +5 -1
  118. package/dist/docs/components/tracker.md +1 -1
  119. package/dist/docs/components/virtualList.md +58 -56
  120. package/dist/docs/foundations.md +271 -105
  121. package/dist/docs/start/changelog.md +44 -212
  122. package/dist/docs/start/goodtoknow.md +8 -2
  123. package/dist/docs/start/guidelines/color-combinations.md +5 -1
  124. package/dist/docs/start/guidelines/custom-css.md +26 -2
  125. package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
  126. package/dist/docs/start/guidelines/formatting.md +2256 -249
  127. package/dist/docs/start/guidelines/iframe.md +37 -1
  128. package/dist/docs/start/guidelines/obfuscate-data.md +26 -2
  129. package/dist/docs/start/guidelines/print-css.md +16 -2
  130. package/dist/docs/start/guidelines/spinner.md +1 -1
  131. package/dist/docs/start/guidelines/state-in-url.md +1138 -11
  132. package/dist/docs/start/guidelines/supported-browsers.md +9 -2
  133. package/dist/docs/start/guidelines/writing.md +228 -2
  134. package/dist/docs/start/howto.md +160 -10
  135. package/dist/docs/start/intro.md +40 -2
  136. package/dist/docs/start/responsiveness.md +29 -1
  137. package/dist/docs/templates/ai-assistant.md +1 -1
  138. package/dist/docs/templates/common-table.md +55 -55
  139. package/dist/docs/templates/detail-views.md +2 -2
  140. package/dist/docs/templates/expandable-details.md +1 -1
  141. package/dist/docs/templates/feature-cards.md +37 -37
  142. package/dist/docs/templates/form-summary.md +15 -15
  143. package/dist/docs/templates/form-toggle.md +1 -1
  144. package/dist/docs/templates/list-blocks.md +137 -137
  145. package/dist/docs/templates/loading-progress.md +1 -1
  146. package/dist/docs/templates/options-panel.md +1 -1
  147. package/dist/docs/templates/panel-variants.md +1 -1
  148. package/dist/docs/templates/progress-cards.md +1 -1
  149. package/dist/docs/templates/progress-success.md +1 -1
  150. package/dist/docs/templates/settings-form.md +18 -18
  151. package/dist/docs/templates/stats-blocks.md +10 -10
  152. package/dist/docs/templates/table-panel.md +1 -1
  153. package/dist/docs/templates/usage-cards.md +1 -1
  154. package/dist/docs/utilities/classNames.md +89 -1
  155. package/dist/docs/utilities/deviceUtils.md +1 -1
  156. package/dist/docs/utilities/featureToggles.md +182 -2
  157. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  158. package/dist/docs/utilities/getTrackingAttributes.md +46 -1
  159. package/dist/docs/utilities/routeUtils.md +210 -2
  160. package/dist/docs/utilities/useAfterMount.md +1 -1
  161. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  162. package/dist/docs/utilities/useAverage.md +1 -1
  163. package/dist/docs/utilities/useClickOutside.md +1 -1
  164. package/dist/docs/utilities/useClipboard.md +2 -2
  165. package/dist/docs/utilities/useCookies.md +1 -1
  166. package/dist/docs/utilities/useCount.md +1 -1
  167. package/dist/docs/utilities/useDarkMode.md +1 -1
  168. package/dist/docs/utilities/useDebugInfo.md +3 -3
  169. package/dist/docs/utilities/useDraggableElement.md +1 -1
  170. package/dist/docs/utilities/useEffectOnce.md +1 -1
  171. package/dist/docs/utilities/useElapsedTime.md +1 -1
  172. package/dist/docs/utilities/useElementSize.md +1 -1
  173. package/dist/docs/utilities/useEsc.md +1 -1
  174. package/dist/docs/utilities/useEvent.md +1 -1
  175. package/dist/docs/utilities/useFocusTrap.md +1 -1
  176. package/dist/docs/utilities/useFullscreen.md +1 -1
  177. package/dist/docs/utilities/useHover.md +1 -1
  178. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  179. package/dist/docs/utilities/useInterval.md +1 -1
  180. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  181. package/dist/docs/utilities/useKey.md +1 -1
  182. package/dist/docs/utilities/useLocalStorage.md +1 -1
  183. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  184. package/dist/docs/utilities/useMax.md +1 -1
  185. package/dist/docs/utilities/useMin.md +1 -1
  186. package/dist/docs/utilities/useMutationObserver.md +1 -1
  187. package/dist/docs/utilities/useOnScreen.md +1 -1
  188. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  189. package/dist/docs/utilities/usePostMessage.md +1 -1
  190. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  191. package/dist/docs/utilities/usePrevious.md +111 -1
  192. package/dist/docs/utilities/useResizeObserver.md +1 -1
  193. package/dist/docs/utilities/useRioCookieConsent.md +1 -1
  194. package/dist/docs/utilities/useScrollPosition.md +1 -1
  195. package/dist/docs/utilities/useSearch.md +1 -1
  196. package/dist/docs/utilities/useSearchHighlight.md +1 -1
  197. package/dist/docs/utilities/useSorting.md +1 -1
  198. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  199. package/dist/docs/utilities/useSum.md +1 -1
  200. package/dist/docs/utilities/useTableExport.md +61 -61
  201. package/dist/docs/utilities/useTableSelection.md +72 -72
  202. package/dist/docs/utilities/useTimeout.md +1 -1
  203. package/dist/docs/utilities/useToggle.md +1 -1
  204. package/dist/docs/utilities/useUrlState.md +1 -1
  205. package/dist/docs/utilities/useWindowResize.md +1 -1
  206. package/dist/index.mjs +174 -70
  207. package/dist/search-synonyms.json +214 -76
  208. package/dist/version.json +2 -2
  209. package/package.json +8 -6
  210. package/dist/docs/components/mapRouteGenerator.md +0 -6
package/dist/docs/components/dayPickerCalendar.md CHANGED
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Pickers
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/dayPickerCalendar
6
- *Captured:* 2026-04-20T12:54:15.839Z
6
+ *Captured:* 2026-05-06T12:13:52.067Z
7
7
 
8
8
  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.
9
9
 
@@ -13,17 +13,19 @@ It keeps the public API small while still supporting custom selection variants,
13
13
 
14
14
  ## Single selection
15
15
 
16
+ The calendar wrapper exposes the supported selection modes without coupling consumers to the rawreact-day-picker component API.
17
+
16
18
  ### Example: Single date
17
19
 
18
20
  Single date
19
- 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
21
+ 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
20
22
 
21
- 30 31 1 2 3 4 5
22
- 6 7 8 9 10 11 12
23
- 13 14 15 16 17 18 19
24
- 20 21 22 23 24 25 26
25
23
  27 28 29 30 1 2 3
26
24
  4 5 6 7 8 9 10
25
+ 11 12 13 14 15 16 17
26
+ 18 19 20 21 22 23 24
27
+ 25 26 27 28 29 30 31
28
+ 1 2 3 4 5 6 7
27
29
 
28
30
  You picked: No date selected
29
31
 
@@ -84,7 +86,7 @@ export default DayPickerCalendarSingleSelectionExample;
84
86
  <option value="10">November</option>
85
87
  <option value="11">December</option>
86
88
  </select>
87
- <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
89
+ <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
88
90
  <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
89
91
  </polygon>
90
92
  </svg>
@@ -200,7 +202,7 @@ export default DayPickerCalendarSingleSelectionExample;
200
202
  </svg>
201
203
  </span>
202
204
  </span>
203
- <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>
205
+ <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>
204
206
  </div>
205
207
  </div>
206
208
  <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
@@ -209,7 +211,7 @@ export default DayPickerCalendarSingleSelectionExample;
209
211
  </polygon>
210
212
  </svg>
211
213
  </button>
212
- <table role="grid" aria-multiselectable="false" aria-label="April 2026" class="rdp-month_grid">
214
+ <table role="grid" aria-multiselectable="false" aria-label="May 2026" class="rdp-month_grid">
213
215
  <thead aria-hidden="true">
214
216
  <tr data-animated-weekdays="true" class="rdp-weekdays">
215
217
  <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
@@ -223,141 +225,141 @@ export default DayPickerCalendarSingleSelectionExample;
223
225
  </thead>
224
226
  <tbody data-animated-weeks="true" class="rdp-weeks">
225
227
  <tr class="rdp-week">
226
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
227
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
228
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-outside="true">
229
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
228
230
  </td>
229
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
230
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
231
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-outside="true">
232
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
231
233
  </td>
232
- <td class="rdp-day" role="gridcell" data-day="2026-04-01">
233
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
234
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-outside="true">
235
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
234
236
  </td>
235
- <td class="rdp-day" role="gridcell" data-day="2026-04-02">
236
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
237
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-outside="true">
238
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
237
239
  </td>
238
- <td class="rdp-day" role="gridcell" data-day="2026-04-03">
239
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
240
+ <td class="rdp-day" role="gridcell" data-day="2026-05-01">
241
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
240
242
  </td>
241
- <td class="rdp-day" role="gridcell" data-day="2026-04-04">
242
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
243
+ <td class="rdp-day" role="gridcell" data-day="2026-05-02">
244
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
243
245
  </td>
244
- <td class="rdp-day" role="gridcell" data-day="2026-04-05">
245
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
246
+ <td class="rdp-day" role="gridcell" data-day="2026-05-03">
247
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
246
248
  </td>
247
249
  </tr>
248
250
  <tr class="rdp-week">
249
- <td class="rdp-day" role="gridcell" data-day="2026-04-06">
250
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
251
+ <td class="rdp-day" role="gridcell" data-day="2026-05-04">
252
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
251
253
  </td>
252
- <td class="rdp-day" role="gridcell" data-day="2026-04-07">
253
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
254
+ <td class="rdp-day" role="gridcell" data-day="2026-05-05">
255
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
254
256
  </td>
255
- <td class="rdp-day" role="gridcell" data-day="2026-04-08">
256
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
257
+ <td class="rdp-day rdp-today" role="gridcell" data-day="2026-05-06" data-today="true">
258
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Wednesday, 6 May 2026">6</button>
257
259
  </td>
258
- <td class="rdp-day" role="gridcell" data-day="2026-04-09">
259
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
260
+ <td class="rdp-day" role="gridcell" data-day="2026-05-07">
261
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
260
262
  </td>
261
- <td class="rdp-day" role="gridcell" data-day="2026-04-10">
262
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
263
+ <td class="rdp-day" role="gridcell" data-day="2026-05-08">
264
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
263
265
  </td>
264
- <td class="rdp-day" role="gridcell" data-day="2026-04-11">
265
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
266
+ <td class="rdp-day" role="gridcell" data-day="2026-05-09">
267
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
266
268
  </td>
267
- <td class="rdp-day" role="gridcell" data-day="2026-04-12">
268
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
269
+ <td class="rdp-day" role="gridcell" data-day="2026-05-10">
270
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
269
271
  </td>
270
272
  </tr>
271
273
  <tr class="rdp-week">
272
- <td class="rdp-day" role="gridcell" data-day="2026-04-13">
273
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
274
+ <td class="rdp-day" role="gridcell" data-day="2026-05-11">
275
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 11 May 2026">11</button>
274
276
  </td>
275
- <td class="rdp-day" role="gridcell" data-day="2026-04-14">
276
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 14 April 2026">14</button>
277
+ <td class="rdp-day" role="gridcell" data-day="2026-05-12">
278
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
277
279
  </td>
278
- <td class="rdp-day" role="gridcell" data-day="2026-04-15">
279
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026">15</button>
280
+ <td class="rdp-day" role="gridcell" data-day="2026-05-13">
281
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
280
282
  </td>
281
- <td class="rdp-day" role="gridcell" data-day="2026-04-16">
282
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026">16</button>
283
+ <td class="rdp-day" role="gridcell" data-day="2026-05-14">
284
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
283
285
  </td>
284
- <td class="rdp-day" role="gridcell" data-day="2026-04-17">
285
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
286
+ <td class="rdp-day" role="gridcell" data-day="2026-05-15">
287
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 15 May 2026">15</button>
286
288
  </td>
287
- <td class="rdp-day" role="gridcell" data-day="2026-04-18">
288
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
289
+ <td class="rdp-day" role="gridcell" data-day="2026-05-16">
290
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026">16</button>
289
291
  </td>
290
- <td class="rdp-day" role="gridcell" data-day="2026-04-19">
291
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
292
+ <td class="rdp-day" role="gridcell" data-day="2026-05-17">
293
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026">17</button>
292
294
  </td>
293
295
  </tr>
294
296
  <tr class="rdp-week">
295
- <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-20" data-today="true">
296
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Monday, 20 April 2026">20</button>
297
+ <td class="rdp-day" role="gridcell" data-day="2026-05-18">
298
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
297
299
  </td>
298
- <td class="rdp-day" role="gridcell" data-day="2026-04-21">
299
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
300
+ <td class="rdp-day" role="gridcell" data-day="2026-05-19">
301
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
300
302
  </td>
301
- <td class="rdp-day" role="gridcell" data-day="2026-04-22">
302
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
303
+ <td class="rdp-day" role="gridcell" data-day="2026-05-20">
304
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 20 May 2026">20</button>
303
305
  </td>
304
- <td class="rdp-day" role="gridcell" data-day="2026-04-23">
305
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
306
+ <td class="rdp-day" role="gridcell" data-day="2026-05-21">
307
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
306
308
  </td>
307
- <td class="rdp-day" role="gridcell" data-day="2026-04-24">
308
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
309
+ <td class="rdp-day" role="gridcell" data-day="2026-05-22">
310
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
309
311
  </td>
310
- <td class="rdp-day" role="gridcell" data-day="2026-04-25">
311
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
312
+ <td class="rdp-day" role="gridcell" data-day="2026-05-23">
313
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
312
314
  </td>
313
- <td class="rdp-day" role="gridcell" data-day="2026-04-26">
314
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
315
+ <td class="rdp-day" role="gridcell" data-day="2026-05-24">
316
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
315
317
  </td>
316
318
  </tr>
317
319
  <tr class="rdp-week">
318
- <td class="rdp-day" role="gridcell" data-day="2026-04-27">
319
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
320
+ <td class="rdp-day" role="gridcell" data-day="2026-05-25">
321
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
320
322
  </td>
321
- <td class="rdp-day" role="gridcell" data-day="2026-04-28">
322
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
323
+ <td class="rdp-day" role="gridcell" data-day="2026-05-26">
324
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
323
325
  </td>
324
- <td class="rdp-day" role="gridcell" data-day="2026-04-29">
325
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
326
+ <td class="rdp-day" role="gridcell" data-day="2026-05-27">
327
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
326
328
  </td>
327
- <td class="rdp-day" role="gridcell" data-day="2026-04-30">
328
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
329
+ <td class="rdp-day" role="gridcell" data-day="2026-05-28">
330
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
329
331
  </td>
330
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
331
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
332
+ <td class="rdp-day" role="gridcell" data-day="2026-05-29">
333
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
332
334
  </td>
333
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
334
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
335
+ <td class="rdp-day" role="gridcell" data-day="2026-05-30">
336
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
335
337
  </td>
336
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
337
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
338
+ <td class="rdp-day" role="gridcell" data-day="2026-05-31">
339
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
338
340
  </td>
339
341
  </tr>
340
342
  <tr class="rdp-week">
341
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
342
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
343
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-outside="true">
344
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 June 2026">1</button>
343
345
  </td>
344
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
345
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
346
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-outside="true">
347
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 June 2026">2</button>
346
348
  </td>
347
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
348
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
349
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-outside="true">
350
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 June 2026">3</button>
349
351
  </td>
350
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
351
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
352
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-outside="true">
353
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 June 2026">4</button>
352
354
  </td>
353
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
354
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
355
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-outside="true">
356
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 June 2026">5</button>
355
357
  </td>
356
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
357
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
358
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-outside="true">
359
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 June 2026">6</button>
358
360
  </td>
359
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
360
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
361
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-outside="true">
362
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 June 2026">7</button>
361
363
  </td>
362
364
  </tr>
363
365
  </tbody>
@@ -433,37 +435,39 @@ export default DayPickerCalendarSingleSelectionExample;
433
435
 
434
436
  ## Calendar sizes
435
437
 
438
+ Use size to adjust the density of the day grid. The size variant changes the spacing and dimensions of the day cells themselves.
439
+
436
440
  ### Example: Small
437
441
 
438
442
  Small
439
- 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
443
+ 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
440
444
 
441
- 30 31 1 2 3 4 5
442
- 6 7 8 9 10 11 12
443
- 13 14 15 16 17 18 19
444
- 20 21 22 23 24 25 26
445
445
  27 28 29 30 1 2 3
446
446
  4 5 6 7 8 9 10
447
+ 11 12 13 14 15 16 17
448
+ 18 19 20 21 22 23 24
449
+ 25 26 27 28 29 30 31
450
+ 1 2 3 4 5 6 7
447
451
 
448
452
  Medium (default)
449
- 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
453
+ 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
450
454
 
451
- 30 31 1 2 3 4 5
452
- 6 7 8 9 10 11 12
453
- 13 14 15 16 17 18 19
454
- 20 21 22 23 24 25 26
455
455
  27 28 29 30 1 2 3
456
456
  4 5 6 7 8 9 10
457
+ 11 12 13 14 15 16 17
458
+ 18 19 20 21 22 23 24
459
+ 25 26 27 28 29 30 31
460
+ 1 2 3 4 5 6 7
457
461
 
458
462
  Large
459
- 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
463
+ 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
460
464
 
461
- 30 31 1 2 3 4 5
462
- 6 7 8 9 10 11 12
463
- 13 14 15 16 17 18 19
464
- 20 21 22 23 24 25 26
465
465
  27 28 29 30 1 2 3
466
466
  4 5 6 7 8 9 10
467
+ 11 12 13 14 15 16 17
468
+ 18 19 20 21 22 23 24
469
+ 25 26 27 28 29 30 31
470
+ 1 2 3 4 5 6 7
467
471
 
468
472
  #### React (tsx)
469
473
 
@@ -571,7 +575,7 @@ export default DayPickerCalendarSizesExample;
571
575
  <option value="10">November</option>
572
576
  <option value="11">December</option>
573
577
  </select>
574
- <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
578
+ <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
575
579
  <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
576
580
  </polygon>
577
581
  </svg>
@@ -687,7 +691,7 @@ export default DayPickerCalendarSizesExample;
687
691
  </svg>
688
692
  </span>
689
693
  </span>
690
- <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>
694
+ <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>
691
695
  </div>
692
696
  </div>
693
697
  <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
@@ -696,7 +700,7 @@ export default DayPickerCalendarSizesExample;
696
700
  </polygon>
697
701
  </svg>
698
702
  </button>
699
- <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
703
+ <table role="grid" aria-multiselectable="true" aria-label="May 2026" class="rdp-month_grid">
700
704
  <thead aria-hidden="true">
701
705
  <tr data-animated-weekdays="true" class="rdp-weekdays">
702
706
  <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
@@ -710,141 +714,141 @@ export default DayPickerCalendarSizesExample;
710
714
  </thead>
711
715
  <tbody data-animated-weeks="true" class="rdp-weeks">
712
716
  <tr class="rdp-week">
713
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
714
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
717
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-outside="true">
718
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
715
719
  </td>
716
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
717
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
720
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-outside="true">
721
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
718
722
  </td>
719
- <td class="rdp-day" role="gridcell" data-day="2026-04-01">
720
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
723
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-outside="true">
724
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
721
725
  </td>
722
- <td class="rdp-day" role="gridcell" data-day="2026-04-02">
723
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
726
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-outside="true">
727
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
724
728
  </td>
725
- <td class="rdp-day" role="gridcell" data-day="2026-04-03">
726
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
729
+ <td class="rdp-day" role="gridcell" data-day="2026-05-01">
730
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
727
731
  </td>
728
- <td class="rdp-day" role="gridcell" data-day="2026-04-04">
729
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
732
+ <td class="rdp-day" role="gridcell" data-day="2026-05-02">
733
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
730
734
  </td>
731
- <td class="rdp-day" role="gridcell" data-day="2026-04-05">
732
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
735
+ <td class="rdp-day" role="gridcell" data-day="2026-05-03">
736
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
733
737
  </td>
734
738
  </tr>
735
739
  <tr class="rdp-week">
736
- <td class="rdp-day" role="gridcell" data-day="2026-04-06">
737
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
740
+ <td class="rdp-day" role="gridcell" data-day="2026-05-04">
741
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
738
742
  </td>
739
- <td class="rdp-day" role="gridcell" data-day="2026-04-07">
740
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
743
+ <td class="rdp-day" role="gridcell" data-day="2026-05-05">
744
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
741
745
  </td>
742
- <td class="rdp-day" role="gridcell" data-day="2026-04-08">
743
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
746
+ <td class="rdp-day rdp-today" role="gridcell" data-day="2026-05-06" data-today="true">
747
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Wednesday, 6 May 2026">6</button>
744
748
  </td>
745
- <td class="rdp-day" role="gridcell" data-day="2026-04-09">
746
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
749
+ <td class="rdp-day" role="gridcell" data-day="2026-05-07">
750
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
747
751
  </td>
748
- <td class="rdp-day" role="gridcell" data-day="2026-04-10">
749
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
752
+ <td class="rdp-day" role="gridcell" data-day="2026-05-08">
753
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
750
754
  </td>
751
- <td class="rdp-day" role="gridcell" data-day="2026-04-11">
752
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
755
+ <td class="rdp-day" role="gridcell" data-day="2026-05-09">
756
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
753
757
  </td>
754
- <td class="rdp-day" role="gridcell" data-day="2026-04-12">
755
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
758
+ <td class="rdp-day" role="gridcell" data-day="2026-05-10">
759
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
756
760
  </td>
757
761
  </tr>
758
762
  <tr class="rdp-week">
759
- <td class="rdp-day" role="gridcell" data-day="2026-04-13">
760
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
763
+ <td class="rdp-day" role="gridcell" data-day="2026-05-11">
764
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 11 May 2026">11</button>
761
765
  </td>
762
- <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
763
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
766
+ <td class="rdp-day" role="gridcell" data-day="2026-05-12">
767
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
764
768
  </td>
765
- <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
766
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
769
+ <td class="rdp-day" role="gridcell" data-day="2026-05-13">
770
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
767
771
  </td>
768
- <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
769
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
772
+ <td class="rdp-day" role="gridcell" data-day="2026-05-14">
773
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
770
774
  </td>
771
- <td class="rdp-day" role="gridcell" data-day="2026-04-17">
772
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
775
+ <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-05-15" data-selected="true">
776
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Friday, 15 May 2026, selected">15</button>
773
777
  </td>
774
- <td class="rdp-day" role="gridcell" data-day="2026-04-18">
775
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
778
+ <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-05-16" data-selected="true">
779
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026, selected">16</button>
776
780
  </td>
777
- <td class="rdp-day" role="gridcell" data-day="2026-04-19">
778
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
781
+ <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-05-17" data-selected="true">
782
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026, selected">17</button>
779
783
  </td>
780
784
  </tr>
781
785
  <tr class="rdp-week">
782
- <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-20" data-today="true">
783
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 20 April 2026">20</button>
786
+ <td class="rdp-day" role="gridcell" data-day="2026-05-18">
787
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
784
788
  </td>
785
- <td class="rdp-day" role="gridcell" data-day="2026-04-21">
786
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
789
+ <td class="rdp-day" role="gridcell" data-day="2026-05-19">
790
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
787
791
  </td>
788
- <td class="rdp-day" role="gridcell" data-day="2026-04-22">
789
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
792
+ <td class="rdp-day" role="gridcell" data-day="2026-05-20">
793
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 20 May 2026">20</button>
790
794
  </td>
791
- <td class="rdp-day" role="gridcell" data-day="2026-04-23">
792
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
795
+ <td class="rdp-day" role="gridcell" data-day="2026-05-21">
796
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
793
797
  </td>
794
- <td class="rdp-day" role="gridcell" data-day="2026-04-24">
795
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
798
+ <td class="rdp-day" role="gridcell" data-day="2026-05-22">
799
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
796
800
  </td>
797
- <td class="rdp-day" role="gridcell" data-day="2026-04-25">
798
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
801
+ <td class="rdp-day" role="gridcell" data-day="2026-05-23">
802
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
799
803
  </td>
800
- <td class="rdp-day" role="gridcell" data-day="2026-04-26">
801
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
804
+ <td class="rdp-day" role="gridcell" data-day="2026-05-24">
805
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
802
806
  </td>
803
807
  </tr>
804
808
  <tr class="rdp-week">
805
- <td class="rdp-day" role="gridcell" data-day="2026-04-27">
806
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
809
+ <td class="rdp-day" role="gridcell" data-day="2026-05-25">
810
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
807
811
  </td>
808
- <td class="rdp-day" role="gridcell" data-day="2026-04-28">
809
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
812
+ <td class="rdp-day" role="gridcell" data-day="2026-05-26">
813
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
810
814
  </td>
811
- <td class="rdp-day" role="gridcell" data-day="2026-04-29">
812
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
815
+ <td class="rdp-day" role="gridcell" data-day="2026-05-27">
816
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
813
817
  </td>
814
- <td class="rdp-day" role="gridcell" data-day="2026-04-30">
815
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
818
+ <td class="rdp-day" role="gridcell" data-day="2026-05-28">
819
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
816
820
  </td>
817
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
818
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
821
+ <td class="rdp-day" role="gridcell" data-day="2026-05-29">
822
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
819
823
  </td>
820
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
821
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
824
+ <td class="rdp-day" role="gridcell" data-day="2026-05-30">
825
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
822
826
  </td>
823
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
824
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
827
+ <td class="rdp-day" role="gridcell" data-day="2026-05-31">
828
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
825
829
  </td>
826
830
  </tr>
827
831
  <tr class="rdp-week">
828
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
829
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
832
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-outside="true">
833
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 June 2026">1</button>
830
834
  </td>
831
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
832
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
835
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-outside="true">
836
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 June 2026">2</button>
833
837
  </td>
834
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
835
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
838
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-outside="true">
839
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 June 2026">3</button>
836
840
  </td>
837
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
838
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
841
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-outside="true">
842
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 June 2026">4</button>
839
843
  </td>
840
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
841
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
844
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-outside="true">
845
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 June 2026">5</button>
842
846
  </td>
843
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
844
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
847
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-outside="true">
848
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 June 2026">6</button>
845
849
  </td>
846
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
847
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
850
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-outside="true">
851
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 June 2026">7</button>
848
852
  </td>
849
853
  </tr>
850
854
  </tbody>
@@ -881,7 +885,7 @@ export default DayPickerCalendarSizesExample;
881
885
  <option value="10">November</option>
882
886
  <option value="11">December</option>
883
887
  </select>
884
- <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
888
+ <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
885
889
  <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
886
890
  </polygon>
887
891
  </svg>
@@ -997,7 +1001,7 @@ export default DayPickerCalendarSizesExample;
997
1001
  </svg>
998
1002
  </span>
999
1003
  </span>
1000
- <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>
1004
+ <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>
1001
1005
  </div>
1002
1006
  </div>
1003
1007
  <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
@@ -1006,7 +1010,7 @@ export default DayPickerCalendarSizesExample;
1006
1010
  </polygon>
1007
1011
  </svg>
1008
1012
  </button>
1009
- <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
1013
+ <table role="grid" aria-multiselectable="true" aria-label="May 2026" class="rdp-month_grid">
1010
1014
  <thead aria-hidden="true">
1011
1015
  <tr data-animated-weekdays="true" class="rdp-weekdays">
1012
1016
  <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
@@ -1020,141 +1024,141 @@ export default DayPickerCalendarSizesExample;
1020
1024
  </thead>
1021
1025
  <tbody data-animated-weeks="true" class="rdp-weeks">
1022
1026
  <tr class="rdp-week">
1023
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
1024
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
1027
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-outside="true">
1028
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
1025
1029
  </td>
1026
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
1027
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
1030
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-outside="true">
1031
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
1028
1032
  </td>
1029
- <td class="rdp-day" role="gridcell" data-day="2026-04-01">
1030
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
1033
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-outside="true">
1034
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
1031
1035
  </td>
1032
- <td class="rdp-day" role="gridcell" data-day="2026-04-02">
1033
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
1036
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-outside="true">
1037
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
1034
1038
  </td>
1035
- <td class="rdp-day" role="gridcell" data-day="2026-04-03">
1036
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
1039
+ <td class="rdp-day" role="gridcell" data-day="2026-05-01">
1040
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
1037
1041
  </td>
1038
- <td class="rdp-day" role="gridcell" data-day="2026-04-04">
1039
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
1042
+ <td class="rdp-day" role="gridcell" data-day="2026-05-02">
1043
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
1040
1044
  </td>
1041
- <td class="rdp-day" role="gridcell" data-day="2026-04-05">
1042
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
1045
+ <td class="rdp-day" role="gridcell" data-day="2026-05-03">
1046
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
1043
1047
  </td>
1044
1048
  </tr>
1045
1049
  <tr class="rdp-week">
1046
- <td class="rdp-day" role="gridcell" data-day="2026-04-06">
1047
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
1050
+ <td class="rdp-day" role="gridcell" data-day="2026-05-04">
1051
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
1048
1052
  </td>
1049
- <td class="rdp-day" role="gridcell" data-day="2026-04-07">
1050
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
1053
+ <td class="rdp-day" role="gridcell" data-day="2026-05-05">
1054
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
1051
1055
  </td>
1052
- <td class="rdp-day" role="gridcell" data-day="2026-04-08">
1053
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
1056
+ <td class="rdp-day rdp-today" role="gridcell" data-day="2026-05-06" data-today="true">
1057
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Wednesday, 6 May 2026">6</button>
1054
1058
  </td>
1055
- <td class="rdp-day" role="gridcell" data-day="2026-04-09">
1056
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
1059
+ <td class="rdp-day" role="gridcell" data-day="2026-05-07">
1060
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
1057
1061
  </td>
1058
- <td class="rdp-day" role="gridcell" data-day="2026-04-10">
1059
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
1062
+ <td class="rdp-day" role="gridcell" data-day="2026-05-08">
1063
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
1060
1064
  </td>
1061
- <td class="rdp-day" role="gridcell" data-day="2026-04-11">
1062
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
1065
+ <td class="rdp-day" role="gridcell" data-day="2026-05-09">
1066
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
1063
1067
  </td>
1064
- <td class="rdp-day" role="gridcell" data-day="2026-04-12">
1065
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
1068
+ <td class="rdp-day" role="gridcell" data-day="2026-05-10">
1069
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
1066
1070
  </td>
1067
1071
  </tr>
1068
1072
  <tr class="rdp-week">
1069
- <td class="rdp-day" role="gridcell" data-day="2026-04-13">
1070
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
1073
+ <td class="rdp-day" role="gridcell" data-day="2026-05-11">
1074
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 11 May 2026">11</button>
1071
1075
  </td>
1072
- <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
1073
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
1076
+ <td class="rdp-day" role="gridcell" data-day="2026-05-12">
1077
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
1074
1078
  </td>
1075
- <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
1076
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
1079
+ <td class="rdp-day" role="gridcell" data-day="2026-05-13">
1080
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
1077
1081
  </td>
1078
- <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
1079
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
1082
+ <td class="rdp-day" role="gridcell" data-day="2026-05-14">
1083
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
1080
1084
  </td>
1081
- <td class="rdp-day" role="gridcell" data-day="2026-04-17">
1082
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
1085
+ <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-05-15" data-selected="true">
1086
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Friday, 15 May 2026, selected">15</button>
1083
1087
  </td>
1084
- <td class="rdp-day" role="gridcell" data-day="2026-04-18">
1085
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
1088
+ <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-05-16" data-selected="true">
1089
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026, selected">16</button>
1086
1090
  </td>
1087
- <td class="rdp-day" role="gridcell" data-day="2026-04-19">
1088
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
1091
+ <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-05-17" data-selected="true">
1092
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026, selected">17</button>
1089
1093
  </td>
1090
1094
  </tr>
1091
1095
  <tr class="rdp-week">
1092
- <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-20" data-today="true">
1093
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 20 April 2026">20</button>
1096
+ <td class="rdp-day" role="gridcell" data-day="2026-05-18">
1097
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
1094
1098
  </td>
1095
- <td class="rdp-day" role="gridcell" data-day="2026-04-21">
1096
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
1099
+ <td class="rdp-day" role="gridcell" data-day="2026-05-19">
1100
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
1097
1101
  </td>
1098
- <td class="rdp-day" role="gridcell" data-day="2026-04-22">
1099
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
1102
+ <td class="rdp-day" role="gridcell" data-day="2026-05-20">
1103
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 20 May 2026">20</button>
1100
1104
  </td>
1101
- <td class="rdp-day" role="gridcell" data-day="2026-04-23">
1102
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
1105
+ <td class="rdp-day" role="gridcell" data-day="2026-05-21">
1106
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
1103
1107
  </td>
1104
- <td class="rdp-day" role="gridcell" data-day="2026-04-24">
1105
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
1108
+ <td class="rdp-day" role="gridcell" data-day="2026-05-22">
1109
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
1106
1110
  </td>
1107
- <td class="rdp-day" role="gridcell" data-day="2026-04-25">
1108
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
1111
+ <td class="rdp-day" role="gridcell" data-day="2026-05-23">
1112
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
1109
1113
  </td>
1110
- <td class="rdp-day" role="gridcell" data-day="2026-04-26">
1111
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
1114
+ <td class="rdp-day" role="gridcell" data-day="2026-05-24">
1115
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
1112
1116
  </td>
1113
1117
  </tr>
1114
1118
  <tr class="rdp-week">
1115
- <td class="rdp-day" role="gridcell" data-day="2026-04-27">
1116
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
1119
+ <td class="rdp-day" role="gridcell" data-day="2026-05-25">
1120
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
1117
1121
  </td>
1118
- <td class="rdp-day" role="gridcell" data-day="2026-04-28">
1119
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
1122
+ <td class="rdp-day" role="gridcell" data-day="2026-05-26">
1123
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
1120
1124
  </td>
1121
- <td class="rdp-day" role="gridcell" data-day="2026-04-29">
1122
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
1125
+ <td class="rdp-day" role="gridcell" data-day="2026-05-27">
1126
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
1123
1127
  </td>
1124
- <td class="rdp-day" role="gridcell" data-day="2026-04-30">
1125
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
1128
+ <td class="rdp-day" role="gridcell" data-day="2026-05-28">
1129
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
1126
1130
  </td>
1127
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
1128
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
1131
+ <td class="rdp-day" role="gridcell" data-day="2026-05-29">
1132
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
1129
1133
  </td>
1130
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
1131
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
1134
+ <td class="rdp-day" role="gridcell" data-day="2026-05-30">
1135
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
1132
1136
  </td>
1133
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
1134
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
1137
+ <td class="rdp-day" role="gridcell" data-day="2026-05-31">
1138
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
1135
1139
  </td>
1136
1140
  </tr>
1137
1141
  <tr class="rdp-week">
1138
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
1139
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
1142
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-outside="true">
1143
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 June 2026">1</button>
1140
1144
  </td>
1141
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
1142
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
1145
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-outside="true">
1146
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 June 2026">2</button>
1143
1147
  </td>
1144
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
1145
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
1148
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-outside="true">
1149
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 June 2026">3</button>
1146
1150
  </td>
1147
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
1148
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
1151
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-outside="true">
1152
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 June 2026">4</button>
1149
1153
  </td>
1150
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
1151
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
1154
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-outside="true">
1155
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 June 2026">5</button>
1152
1156
  </td>
1153
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
1154
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
1157
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-outside="true">
1158
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 June 2026">6</button>
1155
1159
  </td>
1156
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
1157
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
1160
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-outside="true">
1161
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 June 2026">7</button>
1158
1162
  </td>
1159
1163
  </tr>
1160
1164
  </tbody>
@@ -1191,7 +1195,7 @@ export default DayPickerCalendarSizesExample;
1191
1195
  <option value="10">November</option>
1192
1196
  <option value="11">December</option>
1193
1197
  </select>
1194
- <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
1198
+ <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
1195
1199
  <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
1196
1200
  </polygon>
1197
1201
  </svg>
@@ -1307,7 +1311,7 @@ export default DayPickerCalendarSizesExample;
1307
1311
  </svg>
1308
1312
  </span>
1309
1313
  </span>
1310
- <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>
1314
+ <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>
1311
1315
  </div>
1312
1316
  </div>
1313
1317
  <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
@@ -1316,7 +1320,7 @@ export default DayPickerCalendarSizesExample;
1316
1320
  </polygon>
1317
1321
  </svg>
1318
1322
  </button>
1319
- <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
1323
+ <table role="grid" aria-multiselectable="true" aria-label="May 2026" class="rdp-month_grid">
1320
1324
  <thead aria-hidden="true">
1321
1325
  <tr data-animated-weekdays="true" class="rdp-weekdays">
1322
1326
  <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
@@ -1330,141 +1334,141 @@ export default DayPickerCalendarSizesExample;
1330
1334
  </thead>
1331
1335
  <tbody data-animated-weeks="true" class="rdp-weeks">
1332
1336
  <tr class="rdp-week">
1333
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
1334
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
1337
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-outside="true">
1338
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
1335
1339
  </td>
1336
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
1337
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
1340
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-outside="true">
1341
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
1338
1342
  </td>
1339
- <td class="rdp-day" role="gridcell" data-day="2026-04-01">
1340
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
1343
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-outside="true">
1344
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
1341
1345
  </td>
1342
- <td class="rdp-day" role="gridcell" data-day="2026-04-02">
1343
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
1346
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-outside="true">
1347
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
1344
1348
  </td>
1345
- <td class="rdp-day" role="gridcell" data-day="2026-04-03">
1346
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
1349
+ <td class="rdp-day" role="gridcell" data-day="2026-05-01">
1350
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
1347
1351
  </td>
1348
- <td class="rdp-day" role="gridcell" data-day="2026-04-04">
1349
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
1352
+ <td class="rdp-day" role="gridcell" data-day="2026-05-02">
1353
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
1350
1354
  </td>
1351
- <td class="rdp-day" role="gridcell" data-day="2026-04-05">
1352
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
1355
+ <td class="rdp-day" role="gridcell" data-day="2026-05-03">
1356
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
1353
1357
  </td>
1354
1358
  </tr>
1355
1359
  <tr class="rdp-week">
1356
- <td class="rdp-day" role="gridcell" data-day="2026-04-06">
1357
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
1360
+ <td class="rdp-day" role="gridcell" data-day="2026-05-04">
1361
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
1358
1362
  </td>
1359
- <td class="rdp-day" role="gridcell" data-day="2026-04-07">
1360
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
1363
+ <td class="rdp-day" role="gridcell" data-day="2026-05-05">
1364
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
1361
1365
  </td>
1362
- <td class="rdp-day" role="gridcell" data-day="2026-04-08">
1363
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
1366
+ <td class="rdp-day rdp-today" role="gridcell" data-day="2026-05-06" data-today="true">
1367
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Wednesday, 6 May 2026">6</button>
1364
1368
  </td>
1365
- <td class="rdp-day" role="gridcell" data-day="2026-04-09">
1366
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
1369
+ <td class="rdp-day" role="gridcell" data-day="2026-05-07">
1370
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
1367
1371
  </td>
1368
- <td class="rdp-day" role="gridcell" data-day="2026-04-10">
1369
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
1372
+ <td class="rdp-day" role="gridcell" data-day="2026-05-08">
1373
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
1370
1374
  </td>
1371
- <td class="rdp-day" role="gridcell" data-day="2026-04-11">
1372
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
1375
+ <td class="rdp-day" role="gridcell" data-day="2026-05-09">
1376
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
1373
1377
  </td>
1374
- <td class="rdp-day" role="gridcell" data-day="2026-04-12">
1375
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
1378
+ <td class="rdp-day" role="gridcell" data-day="2026-05-10">
1379
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
1376
1380
  </td>
1377
1381
  </tr>
1378
1382
  <tr class="rdp-week">
1379
- <td class="rdp-day" role="gridcell" data-day="2026-04-13">
1380
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
1383
+ <td class="rdp-day" role="gridcell" data-day="2026-05-11">
1384
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 11 May 2026">11</button>
1381
1385
  </td>
1382
- <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-04-14" data-selected="true">
1383
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Tuesday, 14 April 2026, selected">14</button>
1386
+ <td class="rdp-day" role="gridcell" data-day="2026-05-12">
1387
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
1384
1388
  </td>
1385
- <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-04-15" data-selected="true">
1386
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026, selected">15</button>
1389
+ <td class="rdp-day" role="gridcell" data-day="2026-05-13">
1390
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
1387
1391
  </td>
1388
- <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-04-16" data-selected="true">
1389
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026, selected">16</button>
1392
+ <td class="rdp-day" role="gridcell" data-day="2026-05-14">
1393
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
1390
1394
  </td>
1391
- <td class="rdp-day" role="gridcell" data-day="2026-04-17">
1392
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
1395
+ <td class="rdp-day rdp-selected rdp-range_start" role="gridcell" aria-selected="true" data-day="2026-05-15" data-selected="true">
1396
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Friday, 15 May 2026, selected">15</button>
1393
1397
  </td>
1394
- <td class="rdp-day" role="gridcell" data-day="2026-04-18">
1395
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
1398
+ <td class="rdp-day rdp-selected rdp-range_middle" role="gridcell" aria-selected="true" data-day="2026-05-16" data-selected="true">
1399
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026, selected">16</button>
1396
1400
  </td>
1397
- <td class="rdp-day" role="gridcell" data-day="2026-04-19">
1398
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
1401
+ <td class="rdp-day rdp-selected rdp-range_end" role="gridcell" aria-selected="true" data-day="2026-05-17" data-selected="true">
1402
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026, selected">17</button>
1399
1403
  </td>
1400
1404
  </tr>
1401
1405
  <tr class="rdp-week">
1402
- <td class="rdp-day rdp-today" role="gridcell" data-day="2026-04-20" data-today="true">
1403
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Today, Monday, 20 April 2026">20</button>
1406
+ <td class="rdp-day" role="gridcell" data-day="2026-05-18">
1407
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
1404
1408
  </td>
1405
- <td class="rdp-day" role="gridcell" data-day="2026-04-21">
1406
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
1409
+ <td class="rdp-day" role="gridcell" data-day="2026-05-19">
1410
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
1407
1411
  </td>
1408
- <td class="rdp-day" role="gridcell" data-day="2026-04-22">
1409
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
1412
+ <td class="rdp-day" role="gridcell" data-day="2026-05-20">
1413
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 20 May 2026">20</button>
1410
1414
  </td>
1411
- <td class="rdp-day" role="gridcell" data-day="2026-04-23">
1412
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
1415
+ <td class="rdp-day" role="gridcell" data-day="2026-05-21">
1416
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
1413
1417
  </td>
1414
- <td class="rdp-day" role="gridcell" data-day="2026-04-24">
1415
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
1418
+ <td class="rdp-day" role="gridcell" data-day="2026-05-22">
1419
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
1416
1420
  </td>
1417
- <td class="rdp-day" role="gridcell" data-day="2026-04-25">
1418
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
1421
+ <td class="rdp-day" role="gridcell" data-day="2026-05-23">
1422
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
1419
1423
  </td>
1420
- <td class="rdp-day" role="gridcell" data-day="2026-04-26">
1421
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
1424
+ <td class="rdp-day" role="gridcell" data-day="2026-05-24">
1425
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
1422
1426
  </td>
1423
1427
  </tr>
1424
1428
  <tr class="rdp-week">
1425
- <td class="rdp-day" role="gridcell" data-day="2026-04-27">
1426
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
1429
+ <td class="rdp-day" role="gridcell" data-day="2026-05-25">
1430
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
1427
1431
  </td>
1428
- <td class="rdp-day" role="gridcell" data-day="2026-04-28">
1429
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
1432
+ <td class="rdp-day" role="gridcell" data-day="2026-05-26">
1433
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
1430
1434
  </td>
1431
- <td class="rdp-day" role="gridcell" data-day="2026-04-29">
1432
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
1435
+ <td class="rdp-day" role="gridcell" data-day="2026-05-27">
1436
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
1433
1437
  </td>
1434
- <td class="rdp-day" role="gridcell" data-day="2026-04-30">
1435
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
1438
+ <td class="rdp-day" role="gridcell" data-day="2026-05-28">
1439
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
1436
1440
  </td>
1437
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
1438
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
1441
+ <td class="rdp-day" role="gridcell" data-day="2026-05-29">
1442
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
1439
1443
  </td>
1440
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
1441
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
1444
+ <td class="rdp-day" role="gridcell" data-day="2026-05-30">
1445
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
1442
1446
  </td>
1443
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
1444
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
1447
+ <td class="rdp-day" role="gridcell" data-day="2026-05-31">
1448
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
1445
1449
  </td>
1446
1450
  </tr>
1447
1451
  <tr class="rdp-week">
1448
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
1449
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
1452
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-outside="true">
1453
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 June 2026">1</button>
1450
1454
  </td>
1451
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
1452
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
1455
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-outside="true">
1456
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 June 2026">2</button>
1453
1457
  </td>
1454
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
1455
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
1458
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-outside="true">
1459
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 June 2026">3</button>
1456
1460
  </td>
1457
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
1458
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
1461
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-outside="true">
1462
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 June 2026">4</button>
1459
1463
  </td>
1460
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
1461
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
1464
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-outside="true">
1465
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 June 2026">5</button>
1462
1466
  </td>
1463
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
1464
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
1467
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-outside="true">
1468
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 June 2026">6</button>
1465
1469
  </td>
1466
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
1467
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
1470
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-outside="true">
1471
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 June 2026">7</button>
1468
1472
  </td>
1469
1473
  </tr>
1470
1474
  </tbody>
@@ -1538,6 +1542,8 @@ export default DayPickerCalendarSizesExample;
1538
1542
 
1539
1543
  ## Range selection
1540
1544
 
1545
+ Range mode keeps a two-step selection flow, can show two months at once, and can optionally be constrained to a specific month interval.
1546
+
1541
1547
  ### Example: Date ranges
1542
1548
 
1543
1549
  Date ranges
@@ -2072,9 +2078,11 @@ export default DayPickerRangeSelectionExample;
2072
2078
 
2073
2079
  ## Calendar in a dialog
2074
2080
 
2081
+ The calendar wrapper also works well inside larger dialog layouts, where the selection is combined with additional form controls and only committed on apply.
2082
+
2075
2083
  ### Example: Example 4
2076
2084
 
2077
- Open event calendar dialog Scheduled delivery slot: 15.04.2026 09:00 - 21.04.2026 09:00
2085
+ Open event calendar dialog Scheduled delivery slot: 15.05.2026 09:00 - 21.05.2026 09:00
2078
2086
 
2079
2087
  #### React (tsx)
2080
2088
 
@@ -2446,7 +2454,7 @@ export default DayPickerCalendarDialogExample;
2446
2454
  <div>
2447
2455
  <button type="button" class="btn btn-primary btn-component" tabindex="0">Open event calendar dialog</button>
2448
2456
  <div class="padding-top-10">
2449
- <b>Scheduled delivery slot:</b> 15.04.2026 09:00 - 21.04.2026 09:00
2457
+ <b>Scheduled delivery slot:</b> 15.05.2026 09:00 - 21.05.2026 09:00
2450
2458
  </div>
2451
2459
  </div>
2452
2460
  ```
@@ -2513,19 +2521,21 @@ export default DayPickerCalendarDialogExample;
2513
2521
 
2514
2522
  ## Multiple selection
2515
2523
 
2524
+ Multiple mode is useful for scenarios like booking, planning, or marking several independent dates.
2525
+
2516
2526
  ### Example: Multiple dates
2517
2527
 
2518
2528
  Multiple dates
2519
- 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
2529
+ 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
2520
2530
 
2521
- 30 31 1 2 3 4 5
2522
- 6 7 8 9 10 11 12
2523
- 13 14 15 16 17 18 19
2524
- 20 21 22 23 24 25 26
2525
2531
  27 28 29 30 1 2 3
2526
2532
  4 5 6 7 8 9 10
2533
+ 11 12 13 14 15 16 17
2534
+ 18 19 20 21 22 23 24
2535
+ 25 26 27 28 29 30 31
2536
+ 1 2 3 4 5 6 7
2527
2537
 
2528
- You picked: 20/04/2026
2538
+ You picked: 06/05/2026
2529
2539
 
2530
2540
  #### React (tsx)
2531
2541
 
@@ -2588,7 +2598,7 @@ export default DayPickerMultipleSelectionExample;
2588
2598
  <option value="10">November</option>
2589
2599
  <option value="11">December</option>
2590
2600
  </select>
2591
- <span class="rdp-caption_label" aria-hidden="true">April<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
2601
+ <span class="rdp-caption_label" aria-hidden="true">May<svg class="rdp-chevron" width="18" height="18" viewBox="0 0 24 24">
2592
2602
  <polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72">
2593
2603
  </polygon>
2594
2604
  </svg>
@@ -2704,7 +2714,7 @@ export default DayPickerMultipleSelectionExample;
2704
2714
  </svg>
2705
2715
  </span>
2706
2716
  </span>
2707
- <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>
2717
+ <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>
2708
2718
  </div>
2709
2719
  </div>
2710
2720
  <button type="button" class="rdp-button_next" aria-label="Go to the Next Month" data-animated-button="true">
@@ -2713,7 +2723,7 @@ export default DayPickerMultipleSelectionExample;
2713
2723
  </polygon>
2714
2724
  </svg>
2715
2725
  </button>
2716
- <table role="grid" aria-multiselectable="true" aria-label="April 2026" class="rdp-month_grid">
2726
+ <table role="grid" aria-multiselectable="true" aria-label="May 2026" class="rdp-month_grid">
2717
2727
  <thead aria-hidden="true">
2718
2728
  <tr data-animated-weekdays="true" class="rdp-weekdays">
2719
2729
  <th aria-label="Monday" class="rdp-weekday" scope="col">Mo</th>
@@ -2727,141 +2737,141 @@ export default DayPickerMultipleSelectionExample;
2727
2737
  </thead>
2728
2738
  <tbody data-animated-weeks="true" class="rdp-weeks">
2729
2739
  <tr class="rdp-week">
2730
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-30" data-month="2026-03" data-outside="true">
2731
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 30 March 2026">30</button>
2740
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-27" data-month="2026-04" data-outside="true">
2741
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
2732
2742
  </td>
2733
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-03-31" data-month="2026-03" data-outside="true">
2734
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 31 March 2026">31</button>
2743
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-28" data-month="2026-04" data-outside="true">
2744
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
2735
2745
  </td>
2736
- <td class="rdp-day" role="gridcell" data-day="2026-04-01">
2737
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 1 April 2026">1</button>
2746
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-29" data-month="2026-04" data-outside="true">
2747
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
2738
2748
  </td>
2739
- <td class="rdp-day" role="gridcell" data-day="2026-04-02">
2740
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 2 April 2026">2</button>
2749
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-04-30" data-month="2026-04" data-outside="true">
2750
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
2741
2751
  </td>
2742
- <td class="rdp-day" role="gridcell" data-day="2026-04-03">
2743
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 3 April 2026">3</button>
2752
+ <td class="rdp-day" role="gridcell" data-day="2026-05-01">
2753
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
2744
2754
  </td>
2745
- <td class="rdp-day" role="gridcell" data-day="2026-04-04">
2746
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 4 April 2026">4</button>
2755
+ <td class="rdp-day" role="gridcell" data-day="2026-05-02">
2756
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
2747
2757
  </td>
2748
- <td class="rdp-day" role="gridcell" data-day="2026-04-05">
2749
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 5 April 2026">5</button>
2758
+ <td class="rdp-day" role="gridcell" data-day="2026-05-03">
2759
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
2750
2760
  </td>
2751
2761
  </tr>
2752
2762
  <tr class="rdp-week">
2753
- <td class="rdp-day" role="gridcell" data-day="2026-04-06">
2754
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 6 April 2026">6</button>
2763
+ <td class="rdp-day" role="gridcell" data-day="2026-05-04">
2764
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
2755
2765
  </td>
2756
- <td class="rdp-day" role="gridcell" data-day="2026-04-07">
2757
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 7 April 2026">7</button>
2766
+ <td class="rdp-day" role="gridcell" data-day="2026-05-05">
2767
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
2758
2768
  </td>
2759
- <td class="rdp-day" role="gridcell" data-day="2026-04-08">
2760
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 8 April 2026">8</button>
2769
+ <td class="rdp-day rdp-today rdp-selected" role="gridcell" aria-selected="true" data-day="2026-05-06" data-selected="true" data-today="true">
2770
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Wednesday, 6 May 2026, selected">6</button>
2761
2771
  </td>
2762
- <td class="rdp-day" role="gridcell" data-day="2026-04-09">
2763
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 9 April 2026">9</button>
2772
+ <td class="rdp-day" role="gridcell" data-day="2026-05-07">
2773
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
2764
2774
  </td>
2765
- <td class="rdp-day" role="gridcell" data-day="2026-04-10">
2766
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 10 April 2026">10</button>
2775
+ <td class="rdp-day" role="gridcell" data-day="2026-05-08">
2776
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
2767
2777
  </td>
2768
- <td class="rdp-day" role="gridcell" data-day="2026-04-11">
2769
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 11 April 2026">11</button>
2778
+ <td class="rdp-day" role="gridcell" data-day="2026-05-09">
2779
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
2770
2780
  </td>
2771
- <td class="rdp-day" role="gridcell" data-day="2026-04-12">
2772
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 12 April 2026">12</button>
2781
+ <td class="rdp-day" role="gridcell" data-day="2026-05-10">
2782
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
2773
2783
  </td>
2774
2784
  </tr>
2775
2785
  <tr class="rdp-week">
2776
- <td class="rdp-day" role="gridcell" data-day="2026-04-13">
2777
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 13 April 2026">13</button>
2786
+ <td class="rdp-day" role="gridcell" data-day="2026-05-11">
2787
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 11 May 2026">11</button>
2778
2788
  </td>
2779
- <td class="rdp-day" role="gridcell" data-day="2026-04-14">
2780
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 14 April 2026">14</button>
2789
+ <td class="rdp-day" role="gridcell" data-day="2026-05-12">
2790
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 12 May 2026">12</button>
2781
2791
  </td>
2782
- <td class="rdp-day" role="gridcell" data-day="2026-04-15">
2783
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 15 April 2026">15</button>
2792
+ <td class="rdp-day" role="gridcell" data-day="2026-05-13">
2793
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 13 May 2026">13</button>
2784
2794
  </td>
2785
- <td class="rdp-day" role="gridcell" data-day="2026-04-16">
2786
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 16 April 2026">16</button>
2795
+ <td class="rdp-day" role="gridcell" data-day="2026-05-14">
2796
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 14 May 2026">14</button>
2787
2797
  </td>
2788
- <td class="rdp-day" role="gridcell" data-day="2026-04-17">
2789
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 17 April 2026">17</button>
2798
+ <td class="rdp-day" role="gridcell" data-day="2026-05-15">
2799
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 15 May 2026">15</button>
2790
2800
  </td>
2791
- <td class="rdp-day" role="gridcell" data-day="2026-04-18">
2792
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 18 April 2026">18</button>
2801
+ <td class="rdp-day" role="gridcell" data-day="2026-05-16">
2802
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 16 May 2026">16</button>
2793
2803
  </td>
2794
- <td class="rdp-day" role="gridcell" data-day="2026-04-19">
2795
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 19 April 2026">19</button>
2804
+ <td class="rdp-day" role="gridcell" data-day="2026-05-17">
2805
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 17 May 2026">17</button>
2796
2806
  </td>
2797
2807
  </tr>
2798
2808
  <tr class="rdp-week">
2799
- <td class="rdp-day rdp-today rdp-selected" role="gridcell" aria-selected="true" data-day="2026-04-20" data-selected="true" data-today="true">
2800
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Monday, 20 April 2026, selected">20</button>
2809
+ <td class="rdp-day" role="gridcell" data-day="2026-05-18">
2810
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 18 May 2026">18</button>
2801
2811
  </td>
2802
- <td class="rdp-day" role="gridcell" data-day="2026-04-21">
2803
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 21 April 2026">21</button>
2812
+ <td class="rdp-day" role="gridcell" data-day="2026-05-19">
2813
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 19 May 2026">19</button>
2804
2814
  </td>
2805
- <td class="rdp-day" role="gridcell" data-day="2026-04-22">
2806
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 22 April 2026">22</button>
2815
+ <td class="rdp-day" role="gridcell" data-day="2026-05-20">
2816
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 20 May 2026">20</button>
2807
2817
  </td>
2808
- <td class="rdp-day" role="gridcell" data-day="2026-04-23">
2809
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 23 April 2026">23</button>
2818
+ <td class="rdp-day" role="gridcell" data-day="2026-05-21">
2819
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 21 May 2026">21</button>
2810
2820
  </td>
2811
- <td class="rdp-day" role="gridcell" data-day="2026-04-24">
2812
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 24 April 2026">24</button>
2821
+ <td class="rdp-day" role="gridcell" data-day="2026-05-22">
2822
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 22 May 2026">22</button>
2813
2823
  </td>
2814
- <td class="rdp-day" role="gridcell" data-day="2026-04-25">
2815
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 25 April 2026">25</button>
2824
+ <td class="rdp-day" role="gridcell" data-day="2026-05-23">
2825
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 23 May 2026">23</button>
2816
2826
  </td>
2817
- <td class="rdp-day" role="gridcell" data-day="2026-04-26">
2818
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 26 April 2026">26</button>
2827
+ <td class="rdp-day" role="gridcell" data-day="2026-05-24">
2828
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 24 May 2026">24</button>
2819
2829
  </td>
2820
2830
  </tr>
2821
2831
  <tr class="rdp-week">
2822
- <td class="rdp-day" role="gridcell" data-day="2026-04-27">
2823
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 27 April 2026">27</button>
2832
+ <td class="rdp-day" role="gridcell" data-day="2026-05-25">
2833
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 25 May 2026">25</button>
2824
2834
  </td>
2825
- <td class="rdp-day" role="gridcell" data-day="2026-04-28">
2826
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 28 April 2026">28</button>
2835
+ <td class="rdp-day" role="gridcell" data-day="2026-05-26">
2836
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 26 May 2026">26</button>
2827
2837
  </td>
2828
- <td class="rdp-day" role="gridcell" data-day="2026-04-29">
2829
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 29 April 2026">29</button>
2838
+ <td class="rdp-day" role="gridcell" data-day="2026-05-27">
2839
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 27 May 2026">27</button>
2830
2840
  </td>
2831
- <td class="rdp-day" role="gridcell" data-day="2026-04-30">
2832
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 30 April 2026">30</button>
2841
+ <td class="rdp-day" role="gridcell" data-day="2026-05-28">
2842
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 28 May 2026">28</button>
2833
2843
  </td>
2834
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-01" data-month="2026-05" data-outside="true">
2835
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
2844
+ <td class="rdp-day" role="gridcell" data-day="2026-05-29">
2845
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 29 May 2026">29</button>
2836
2846
  </td>
2837
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-02" data-month="2026-05" data-outside="true">
2838
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
2847
+ <td class="rdp-day" role="gridcell" data-day="2026-05-30">
2848
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 30 May 2026">30</button>
2839
2849
  </td>
2840
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-03" data-month="2026-05" data-outside="true">
2841
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 3 May 2026">3</button>
2850
+ <td class="rdp-day" role="gridcell" data-day="2026-05-31">
2851
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 31 May 2026">31</button>
2842
2852
  </td>
2843
2853
  </tr>
2844
2854
  <tr class="rdp-week">
2845
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-04" data-month="2026-05" data-outside="true">
2846
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 4 May 2026">4</button>
2855
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-01" data-month="2026-06" data-outside="true">
2856
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Monday, 1 June 2026">1</button>
2847
2857
  </td>
2848
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-05" data-month="2026-05" data-outside="true">
2849
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
2858
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-02" data-month="2026-06" data-outside="true">
2859
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 2 June 2026">2</button>
2850
2860
  </td>
2851
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-06" data-month="2026-05" data-outside="true">
2852
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
2861
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-03" data-month="2026-06" data-outside="true">
2862
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 3 June 2026">3</button>
2853
2863
  </td>
2854
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-07" data-month="2026-05" data-outside="true">
2855
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
2864
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-04" data-month="2026-06" data-outside="true">
2865
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 4 June 2026">4</button>
2856
2866
  </td>
2857
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-08" data-month="2026-05" data-outside="true">
2858
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 8 May 2026">8</button>
2867
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-05" data-month="2026-06" data-outside="true">
2868
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 5 June 2026">5</button>
2859
2869
  </td>
2860
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-09" data-month="2026-05" data-outside="true">
2861
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 9 May 2026">9</button>
2870
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-06" data-month="2026-06" data-outside="true">
2871
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 6 June 2026">6</button>
2862
2872
  </td>
2863
- <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-05-10" data-month="2026-05" data-outside="true">
2864
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 10 May 2026">10</button>
2873
+ <td class="rdp-day rdp-outside" role="gridcell" data-day="2026-06-07" data-month="2026-06" data-outside="true">
2874
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Sunday, 7 June 2026">7</button>
2865
2875
  </td>
2866
2876
  </tr>
2867
2877
  </tbody>
@@ -2874,7 +2884,7 @@ export default DayPickerMultipleSelectionExample;
2874
2884
  </div>
2875
2885
  </div>
2876
2886
  <div class="padding-top-15">
2877
- <b>You picked:</b> 20/04/2026
2887
+ <b>You picked:</b> 06/05/2026
2878
2888
  </div>
2879
2889
  </div>
2880
2890
  ```
@@ -2941,6 +2951,8 @@ export default DayPickerMultipleSelectionExample;
2941
2951
 
2942
2952
  ## Modifiers and custom marked days
2943
2953
 
2954
+ Modifiers let you attach domain-specific meaning like booked or available dates and style them separately.
2955
+
2944
2956
  ### Example: Single date with modifiers
2945
2957
 
2946
2958
  Single date with modifiers
@@ -3390,6 +3402,8 @@ export default DayPickerCalendarModifiersExample;
3390
3402
 
3391
3403
  ## Reserved days
3392
3404
 
3405
+ Reserved days can be modeled with disabledDays plus custom modifiers and CSS classes from the outside.
3406
+
3393
3407
  ### Example: Reserved days
3394
3408
 
3395
3409
  Reserved days
@@ -3812,6 +3826,8 @@ export default DayPickerCalendarReservedDaysExample;
3812
3826
 
3813
3827
  ## Hidden days
3814
3828
 
3829
+ Hidden days are not rendered at all, which is useful for compact calendars that should only expose certain weekdays.
3830
+
3815
3831
  ### Example: Hidden days in a month
3816
3832
 
3817
3833
  Hidden days in a month
@@ -4043,7 +4059,7 @@ export default DayPickerCalendarHiddenDaysExample;
4043
4059
  <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">
4044
4060
  </td>
4045
4061
  <td class="rdp-day" role="gridcell" data-day="2026-05-01">
4046
- <button class="rdp-day_button" type="button" tabindex="0" aria-label="Friday, 1 May 2026">1</button>
4062
+ <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Friday, 1 May 2026">1</button>
4047
4063
  </td>
4048
4064
  <td class="rdp-day" role="gridcell" data-day="2026-05-02">
4049
4065
  <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Saturday, 2 May 2026">2</button>
@@ -4059,8 +4075,8 @@ export default DayPickerCalendarHiddenDaysExample;
4059
4075
  <td class="rdp-day" role="gridcell" data-day="2026-05-05">
4060
4076
  <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Tuesday, 5 May 2026">5</button>
4061
4077
  </td>
4062
- <td class="rdp-day" role="gridcell" data-day="2026-05-06">
4063
- <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Wednesday, 6 May 2026">6</button>
4078
+ <td class="rdp-day rdp-today" role="gridcell" data-day="2026-05-06" data-today="true">
4079
+ <button class="rdp-day_button" type="button" tabindex="0" aria-label="Today, Wednesday, 6 May 2026">6</button>
4064
4080
  </td>
4065
4081
  <td class="rdp-day" role="gridcell" data-day="2026-05-07">
4066
4082
  <button class="rdp-day_button" type="button" tabindex="-1" aria-label="Thursday, 7 May 2026">7</button>
@@ -4231,6 +4247,8 @@ export default DayPickerCalendarHiddenDaysExample;
4231
4247
 
4232
4248
  ## Marker dots
4233
4249
 
4250
+ Marker dots can be rendered with custom day content to visualize additional events or statuses per day.
4251
+
4234
4252
  ### Example: Marker dots
4235
4253
 
4236
4254
  Marker dots
@@ -4814,6 +4832,8 @@ export default DayPickerCalendarMarkersExample;
4814
4832
 
4815
4833
  ## Custom day icons
4816
4834
 
4835
+ Use renderDayContent to render optional React nodes inside specific day cells, for example custom icons or tooltip anchors.
4836
+
4817
4837
  ### Example: Custom day content
4818
4838
 
4819
4839
  Custom day content