Skip to content

Commit bdd5556

Browse files
authored
feat(CalendarMonth): add select appendTo passthrough (#12391)
* feat(CalendarMonth): add select prop passthrough * update to monthAppendTo * fix prop desc example
1 parent 7c4f9df commit bdd5556

1 file changed

Lines changed: 9 additions & 1 deletion

File tree

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,13 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
8181
onSelectToggle?: (open: boolean) => void;
8282
/** Functions that returns if a date is valid and selectable. */
8383
validators?: ((date: Date) => boolean)[];
84+
/** The container to append the month select menu to. Defaults to 'inline'.
85+
* If your menu is being cut off you can append it to an element higher up the DOM tree.
86+
* Some examples:
87+
* monthAppendTo={() => document.body};
88+
* monthAppendTo={document.getElementById('target')}
89+
*/
90+
monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
8491
}
8592

8693
const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -143,6 +150,7 @@ export const CalendarMonth = ({
143150
cellAriaLabel,
144151
isDateFocused = false,
145152
inlineProps,
153+
monthAppendTo = 'inline',
146154
...props
147155
}: CalendarProps) => {
148156
const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
@@ -327,7 +335,7 @@ export const CalendarMonth = ({
327335
onMonthChange(ev, newDate);
328336
}}
329337
selected={monthFormatted}
330-
popperProps={{ appendTo: 'inline' }}
338+
popperProps={{ appendTo: monthAppendTo }}
331339
>
332340
<SelectList>
333341
{longMonths.map((longMonth, index) => (

0 commit comments

Comments
 (0)