From 97af0aeb012c6b6dc7cc34983734d2d1dd4e458b Mon Sep 17 00:00:00 2001 From: Rita Iglesias Gandara Date: Thu, 23 Jul 2026 18:36:12 +0200 Subject: [PATCH 1/5] Support localeText in the standalone view provider and StandaloneWeekView Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01DTQDtignuUE3UECjCEHozo --- .../components/EventCalendarProvider.tsx | 28 +++++++++++++++---- .../src/week-view/StandaloneWeekView.tsx | 6 ++-- .../src/week-view/WeekView.types.ts | 7 +++++ .../tests/StandaloneWeekView.test.tsx | 27 ++++++++++++++++++ 4 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx diff --git a/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx b/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx index 1efbbaff329c7..5d6f33800fab0 100644 --- a/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx +++ b/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import { useId } from '@base-ui/utils/useId'; import { EventCalendarProvider as UnstyledEventCalendarProvider } from '@mui/x-scheduler-internals/event-calendar-provider'; +import type { EventCalendarLocaleText } from '../../models/translations'; import { eventCalendarClasses } from '../../event-calendar/eventCalendarClasses'; import { EventCalendarStyledContext } from '../../event-calendar/EventCalendarStyledContext'; import { EventDialogStyledContext } from './event-dialog/EventDialogStyledContext'; @@ -33,27 +34,42 @@ const StandaloneViewRoot = styled('div', { ...responsiveTypographyContainerQueries, })); +export interface EventCalendarProviderProps + extends UnstyledEventCalendarProvider.Props { + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; +} + export function EventCalendarProvider( - props: UnstyledEventCalendarProvider.Props, + props: EventCalendarProviderProps, ) { - const { children, ...other } = props; + const { children, localeText, ...other } = props; const schedulerId = useId(); + const mergedLocaleText = React.useMemo( + () => ({ ...EVENT_CALENDAR_DEFAULT_LOCALE_TEXT, ...localeText }), + [localeText], + ); + const calendarStyledValue = React.useMemo( () => ({ schedulerId, classes: eventCalendarClasses, - localeText: EVENT_CALENDAR_DEFAULT_LOCALE_TEXT, + localeText: mergedLocaleText, }), - [schedulerId], + [schedulerId, mergedLocaleText], ); const dialogStyledValue = React.useMemo( () => ({ schedulerId, classes: eventCalendarClasses, - localeText: EVENT_CALENDAR_DEFAULT_LOCALE_TEXT, + localeText: mergedLocaleText, }), - [schedulerId], + [schedulerId, mergedLocaleText], ); const sharedComponentsStyledValue = React.useMemo(() => ({ classes: eventCalendarClasses }), []); diff --git a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx index dba1cedfc34be..b31f79dc05787 100644 --- a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx +++ b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx @@ -24,11 +24,13 @@ const StandaloneWeekView = React.forwardRef(function StandaloneWeekView< typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/week-view/WeekView.types.ts b/packages/x-scheduler/src/week-view/WeekView.types.ts index c5393b1152149..fbf7abfc36b01 100644 --- a/packages/x-scheduler/src/week-view/WeekView.types.ts +++ b/packages/x-scheduler/src/week-view/WeekView.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '../models/translations'; import type { ExportedDayTimeGridProps } from '../internals/components/day-time-grid/DayTimeGrid.types'; export interface WeekViewProps extends ExportedDayTimeGridProps {} @@ -27,6 +28,12 @@ export interface StandaloneWeekViewProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx b/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx new file mode 100644 index 0000000000000..d65ddaa795f97 --- /dev/null +++ b/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx @@ -0,0 +1,27 @@ +import { createSchedulerRenderer, DEFAULT_TESTING_VISIBLE_DATE } from 'test/utils/scheduler'; +import { screen } from '@mui/internal-test-utils'; +import { StandaloneWeekView } from '@mui/x-scheduler/week-view'; + +describe('', () => { + const { render } = createSchedulerRenderer({ clockConfig: DEFAULT_TESTING_VISIBLE_DATE }); + + describe('localization', () => { + it('should use the locale text provided through the localeText prop', () => { + render( + , + ); + + expect(screen.getByText('Ganztägig')).toBeVisible(); + }); + + it('should use the default locale text when the localeText prop is not provided', () => { + render(); + + expect(screen.getByText('All day')).toBeVisible(); + }); + }); +}); From 776c13b87b79609b4f3f28c1b5722d8aaf78bbf7 Mon Sep 17 00:00:00 2001 From: Rita Iglesias Gandara Date: Thu, 23 Jul 2026 18:40:50 +0200 Subject: [PATCH 2/5] Support localeText in the remaining community standalone views Threads the localeText prop through StandaloneDayView, StandaloneMonthView, StandaloneAgendaView, StandaloneCompactDayView, StandaloneCompactThreeDayView, and StandaloneCompactWeekView, following the pattern established for StandaloneWeekView, so these standalone views can be localized. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01DTQDtignuUE3UECjCEHozo --- packages/x-scheduler/src/agenda-view/AgendaView.types.ts | 7 +++++++ .../x-scheduler/src/agenda-view/StandaloneAgendaView.tsx | 6 ++++-- .../src/compact-day-view/CompactDayView.types.ts | 7 +++++++ .../src/compact-day-view/StandaloneCompactDayView.tsx | 6 ++++-- .../compact-three-day-view/CompactThreeDayView.types.ts | 7 +++++++ .../StandaloneCompactThreeDayView.tsx | 6 ++++-- .../src/compact-week-view/CompactWeekView.types.ts | 7 +++++++ .../src/compact-week-view/StandaloneCompactWeekView.tsx | 6 ++++-- packages/x-scheduler/src/day-view/DayView.types.ts | 7 +++++++ packages/x-scheduler/src/day-view/StandaloneDayView.tsx | 6 ++++-- packages/x-scheduler/src/month-view/MonthView.types.ts | 7 +++++++ .../x-scheduler/src/month-view/StandaloneMonthView.tsx | 6 ++++-- 12 files changed, 66 insertions(+), 12 deletions(-) diff --git a/packages/x-scheduler/src/agenda-view/AgendaView.types.ts b/packages/x-scheduler/src/agenda-view/AgendaView.types.ts index eb8195dc95ded..3dbe854eb5485 100644 --- a/packages/x-scheduler/src/agenda-view/AgendaView.types.ts +++ b/packages/x-scheduler/src/agenda-view/AgendaView.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '../models/translations'; export interface AgendaViewProps extends React.HTMLAttributes {} @@ -24,6 +25,12 @@ export interface StandaloneAgendaViewProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx index 9dbcdcdbb94bc..5e6134ba6d0b7 100644 --- a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx +++ b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx @@ -24,11 +24,13 @@ const StandaloneAgendaView = React.forwardRef(function StandaloneAgendaView< typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/compact-day-view/CompactDayView.types.ts b/packages/x-scheduler/src/compact-day-view/CompactDayView.types.ts index 9b082c092fa55..234e91b7e75ef 100644 --- a/packages/x-scheduler/src/compact-day-view/CompactDayView.types.ts +++ b/packages/x-scheduler/src/compact-day-view/CompactDayView.types.ts @@ -5,6 +5,7 @@ import type { EventCalendarSchedulerParametersOverrides, CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; +import type { EventCalendarLocaleText } from '../models/translations'; import type { ExportedDayTimeGridProps } from '../internals/components/day-time-grid/DayTimeGrid.types'; export interface CompactDayViewProps extends ExportedDayTimeGridProps {} @@ -19,6 +20,12 @@ export interface StandaloneCompactDayViewProps, EventCalendarSchedulerParametersOverrides { + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx b/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx index 4961018e9495b..a5171d2bf7025 100644 --- a/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx +++ b/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx @@ -24,11 +24,13 @@ const StandaloneCompactDayView = React.forwardRef(function StandaloneCompactDayV typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/compact-three-day-view/CompactThreeDayView.types.ts b/packages/x-scheduler/src/compact-three-day-view/CompactThreeDayView.types.ts index beec93d4053dd..33579d06033a6 100644 --- a/packages/x-scheduler/src/compact-three-day-view/CompactThreeDayView.types.ts +++ b/packages/x-scheduler/src/compact-three-day-view/CompactThreeDayView.types.ts @@ -5,6 +5,7 @@ import type { EventCalendarSchedulerParametersOverrides, CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; +import type { EventCalendarLocaleText } from '../models/translations'; import type { ExportedDayTimeGridProps } from '../internals/components/day-time-grid/DayTimeGrid.types'; export interface CompactThreeDayViewProps extends ExportedDayTimeGridProps {} @@ -19,6 +20,12 @@ export interface StandaloneCompactThreeDayViewProps, EventCalendarSchedulerParametersOverrides { + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx b/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx index 19791642d7d20..9a09e1fccf26e 100644 --- a/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx +++ b/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx @@ -24,11 +24,13 @@ const StandaloneCompactThreeDayView = React.forwardRef(function StandaloneCompac typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/compact-week-view/CompactWeekView.types.ts b/packages/x-scheduler/src/compact-week-view/CompactWeekView.types.ts index 43f5e8f16382a..4e20073aa7e5f 100644 --- a/packages/x-scheduler/src/compact-week-view/CompactWeekView.types.ts +++ b/packages/x-scheduler/src/compact-week-view/CompactWeekView.types.ts @@ -5,6 +5,7 @@ import type { EventCalendarSchedulerParametersOverrides, CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; +import type { EventCalendarLocaleText } from '../models/translations'; import type { ExportedDayTimeGridProps } from '../internals/components/day-time-grid/DayTimeGrid.types'; export interface CompactWeekViewProps extends ExportedDayTimeGridProps {} @@ -19,6 +20,12 @@ export interface StandaloneCompactWeekViewProps, EventCalendarSchedulerParametersOverrides { + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx b/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx index 87b58b6e3bd1c..fc2b1d05a6f26 100644 --- a/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx +++ b/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx @@ -24,11 +24,13 @@ const StandaloneCompactWeekView = React.forwardRef(function StandaloneCompactWee typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/day-view/DayView.types.ts b/packages/x-scheduler/src/day-view/DayView.types.ts index 2023816aec290..fb167ca560f46 100644 --- a/packages/x-scheduler/src/day-view/DayView.types.ts +++ b/packages/x-scheduler/src/day-view/DayView.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '../models/translations'; import type { ExportedDayTimeGridProps } from '../internals/components/day-time-grid/DayTimeGrid.types'; export interface DayViewProps extends ExportedDayTimeGridProps {} @@ -27,6 +28,12 @@ export interface StandaloneDayViewProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx index 21e13fcf86e57..cf75606ed6a90 100644 --- a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx +++ b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx @@ -24,11 +24,13 @@ const StandaloneDayView = React.forwardRef(function StandaloneDayView< typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + diff --git a/packages/x-scheduler/src/month-view/MonthView.types.ts b/packages/x-scheduler/src/month-view/MonthView.types.ts index ef2d7ebfe84b3..21a0028d70ba0 100644 --- a/packages/x-scheduler/src/month-view/MonthView.types.ts +++ b/packages/x-scheduler/src/month-view/MonthView.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '../models/translations'; export interface MonthViewProps extends React.HTMLAttributes {} @@ -24,6 +25,12 @@ export interface StandaloneMonthViewProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx index c2aa6d423a048..cca6fceaf8ee2 100644 --- a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx +++ b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx @@ -24,11 +24,13 @@ const StandaloneMonthView = React.forwardRef(function StandaloneMonthView< typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + From b62e38eccf88b2927a73d611c7a1d85503a371cf Mon Sep 17 00:00:00 2001 From: Rita Iglesias Gandara Date: Thu, 23 Jul 2026 18:45:36 +0200 Subject: [PATCH 3/5] Support localeText in the premium standalone views Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01DTQDtignuUE3UECjCEHozo --- .../AgendaViewPremium.types.ts | 7 +++++++ .../StandaloneAgendaViewPremium.tsx | 10 +++++++-- .../day-view-premium/DayViewPremium.types.ts | 7 +++++++ .../StandaloneDayViewPremium.tsx | 10 +++++++-- .../MonthViewPremium.types.ts | 7 +++++++ .../StandaloneMonthViewPremium.tsx | 10 +++++++-- .../StandaloneWeekViewPremium.tsx | 10 +++++++-- .../WeekViewPremium.types.ts | 7 +++++++ .../tests/StandaloneWeekViewPremium.test.tsx | 21 +++++++++++++++++++ 9 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx diff --git a/packages/x-scheduler-premium/src/agenda-view-premium/AgendaViewPremium.types.ts b/packages/x-scheduler-premium/src/agenda-view-premium/AgendaViewPremium.types.ts index 47b939fc1fd9c..4a9e49060a306 100644 --- a/packages/x-scheduler-premium/src/agenda-view-premium/AgendaViewPremium.types.ts +++ b/packages/x-scheduler-premium/src/agenda-view-premium/AgendaViewPremium.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '@mui/x-scheduler/models'; import type { AgendaViewProps } from '@mui/x-scheduler/agenda-view'; export interface StandaloneAgendaViewPremiumProps @@ -23,6 +24,12 @@ export interface StandaloneAgendaViewPremiumProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx index fb922190bb730..525a5fe9c9377 100644 --- a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx +++ b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx @@ -34,10 +34,16 @@ const StandaloneAgendaViewPremium = React.forwardRef(function StandaloneAgendaVi typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + {watermark} diff --git a/packages/x-scheduler-premium/src/day-view-premium/DayViewPremium.types.ts b/packages/x-scheduler-premium/src/day-view-premium/DayViewPremium.types.ts index 85a05a93a195d..b678a741b269f 100644 --- a/packages/x-scheduler-premium/src/day-view-premium/DayViewPremium.types.ts +++ b/packages/x-scheduler-premium/src/day-view-premium/DayViewPremium.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '@mui/x-scheduler/models'; import type { DayViewProps } from '@mui/x-scheduler/day-view'; export interface StandaloneDayViewPremiumProps @@ -25,6 +26,12 @@ export interface StandaloneDayViewPremiumProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx index 56f49fbfdac64..33ecb2af5fcc4 100644 --- a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx +++ b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx @@ -34,10 +34,16 @@ const StandaloneDayViewPremium = React.forwardRef(function StandaloneDayViewPrem typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + {watermark} diff --git a/packages/x-scheduler-premium/src/month-view-premium/MonthViewPremium.types.ts b/packages/x-scheduler-premium/src/month-view-premium/MonthViewPremium.types.ts index 49676ab2093ea..be35ffb32fa94 100644 --- a/packages/x-scheduler-premium/src/month-view-premium/MonthViewPremium.types.ts +++ b/packages/x-scheduler-premium/src/month-view-premium/MonthViewPremium.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '@mui/x-scheduler/models'; import type { MonthViewProps } from '@mui/x-scheduler/month-view'; export interface StandaloneMonthViewPremiumProps @@ -23,6 +24,12 @@ export interface StandaloneMonthViewPremiumProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx index 00523f6748056..1e1ef9637bc88 100644 --- a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx +++ b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx @@ -34,10 +34,16 @@ const StandaloneMonthViewPremium = React.forwardRef(function StandaloneMonthView typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + {watermark} diff --git a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx index 48532dd2b8b74..339926985e149 100644 --- a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx +++ b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx @@ -34,10 +34,16 @@ const StandaloneWeekViewPremium = React.forwardRef(function StandaloneWeekViewPr typeof props >(props); + const { localeText, ...other } = forwardedProps; + return ( - + - + {watermark} diff --git a/packages/x-scheduler-premium/src/week-view-premium/WeekViewPremium.types.ts b/packages/x-scheduler-premium/src/week-view-premium/WeekViewPremium.types.ts index a190ad8e52b2a..8e6fe865c2086 100644 --- a/packages/x-scheduler-premium/src/week-view-premium/WeekViewPremium.types.ts +++ b/packages/x-scheduler-premium/src/week-view-premium/WeekViewPremium.types.ts @@ -6,6 +6,7 @@ import type { CollapsibleResourcesParameterKeys, } from '@mui/x-scheduler-internals/use-event-calendar'; import type { EventCalendarViewConfig } from '@mui/x-scheduler-internals/models'; +import type { EventCalendarLocaleText } from '@mui/x-scheduler/models'; import type { WeekViewProps } from '@mui/x-scheduler/week-view'; export interface StandaloneWeekViewPremiumProps @@ -25,6 +26,12 @@ export interface StandaloneWeekViewPremiumProps; + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText?: Partial; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx b/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx new file mode 100644 index 0000000000000..2ca79efdbd65c --- /dev/null +++ b/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx @@ -0,0 +1,21 @@ +import { createSchedulerRenderer, DEFAULT_TESTING_VISIBLE_DATE } from 'test/utils/scheduler'; +import { screen } from '@mui/internal-test-utils'; +import { StandaloneWeekViewPremium } from '@mui/x-scheduler-premium/week-view-premium'; + +describe('', () => { + const { render } = createSchedulerRenderer({ clockConfig: DEFAULT_TESTING_VISIBLE_DATE }); + + describe('localization', () => { + it('should use the locale text provided through the localeText prop', () => { + render( + , + ); + + expect(screen.getByText('Ganztägig')).toBeVisible(); + }); + }); +}); From 6ec2b9a32a856f1115ebcfa68cc7b232445651b1 Mon Sep 17 00:00:00 2001 From: Rita Iglesias Gandara Date: Thu, 23 Jul 2026 18:52:20 +0200 Subject: [PATCH 4/5] [scheduler] Regenerate proptypes and API docs for localeText Regenerates the propTypes blocks and API docs JSON/translations for the standalone views affected by the new `localeText` prop added in the preceding commits, and applies a prettier fix to EventCalendarProvider. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01DTQDtignuUE3UECjCEHozo --- .../x/api/scheduler/standalone-agenda-view-premium.json | 1 + docs/pages/x/api/scheduler/standalone-agenda-view.json | 1 + docs/pages/x/api/scheduler/standalone-day-view-premium.json | 1 + docs/pages/x/api/scheduler/standalone-day-view.json | 1 + .../x/api/scheduler/standalone-month-view-premium.json | 1 + docs/pages/x/api/scheduler/standalone-month-view.json | 1 + .../pages/x/api/scheduler/standalone-week-view-premium.json | 1 + docs/pages/x/api/scheduler/standalone-week-view.json | 1 + .../standalone-agenda-view-premium.json | 3 +++ .../standalone-agenda-view/standalone-agenda-view.json | 3 +++ .../standalone-day-view-premium.json | 3 +++ .../scheduler/standalone-day-view/standalone-day-view.json | 3 +++ .../standalone-month-view-premium.json | 3 +++ .../standalone-month-view/standalone-month-view.json | 3 +++ .../standalone-week-view-premium.json | 3 +++ .../standalone-week-view/standalone-week-view.json | 3 +++ .../src/agenda-view-premium/StandaloneAgendaViewPremium.tsx | 6 ++++++ .../src/day-view-premium/StandaloneDayViewPremium.tsx | 6 ++++++ .../src/month-view-premium/StandaloneMonthViewPremium.tsx | 6 ++++++ .../src/week-view-premium/StandaloneWeekViewPremium.tsx | 6 ++++++ .../x-scheduler/src/agenda-view/StandaloneAgendaView.tsx | 6 ++++++ packages/x-scheduler/src/day-view/StandaloneDayView.tsx | 6 ++++++ .../src/internals/components/EventCalendarProvider.tsx | 6 ++++-- packages/x-scheduler/src/month-view/StandaloneMonthView.tsx | 6 ++++++ packages/x-scheduler/src/week-view/StandaloneWeekView.tsx | 6 ++++++ 25 files changed, 84 insertions(+), 2 deletions(-) diff --git a/docs/pages/x/api/scheduler/standalone-agenda-view-premium.json b/docs/pages/x/api/scheduler/standalone-agenda-view-premium.json index d5e041deab1d5..a15a5820904d4 100644 --- a/docs/pages/x/api/scheduler/standalone-agenda-view-premium.json +++ b/docs/pages/x/api/scheduler/standalone-agenda-view-premium.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-agenda-view.json b/docs/pages/x/api/scheduler/standalone-agenda-view.json index 73b760d931e78..a2b7871b67f5a 100644 --- a/docs/pages/x/api/scheduler/standalone-agenda-view.json +++ b/docs/pages/x/api/scheduler/standalone-agenda-view.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-day-view-premium.json b/docs/pages/x/api/scheduler/standalone-day-view-premium.json index fa6a0546cc8f9..535a880d0b2b0 100644 --- a/docs/pages/x/api/scheduler/standalone-day-view-premium.json +++ b/docs/pages/x/api/scheduler/standalone-day-view-premium.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-day-view.json b/docs/pages/x/api/scheduler/standalone-day-view.json index 17ea30ee8131b..47d6f59f2e50f 100644 --- a/docs/pages/x/api/scheduler/standalone-day-view.json +++ b/docs/pages/x/api/scheduler/standalone-day-view.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-month-view-premium.json b/docs/pages/x/api/scheduler/standalone-month-view-premium.json index 3714c2ff67527..e98a5ddb2d08e 100644 --- a/docs/pages/x/api/scheduler/standalone-month-view-premium.json +++ b/docs/pages/x/api/scheduler/standalone-month-view-premium.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-month-view.json b/docs/pages/x/api/scheduler/standalone-month-view.json index fad0f5cde01e4..0f2821511fa50 100644 --- a/docs/pages/x/api/scheduler/standalone-month-view.json +++ b/docs/pages/x/api/scheduler/standalone-month-view.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-week-view-premium.json b/docs/pages/x/api/scheduler/standalone-week-view-premium.json index 7061d7a4d579a..f2a33e8531fcf 100644 --- a/docs/pages/x/api/scheduler/standalone-week-view-premium.json +++ b/docs/pages/x/api/scheduler/standalone-week-view-premium.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/scheduler/standalone-week-view.json b/docs/pages/x/api/scheduler/standalone-week-view.json index f71e954e6db96..36024fbe345fd 100644 --- a/docs/pages/x/api/scheduler/standalone-week-view.json +++ b/docs/pages/x/api/scheduler/standalone-week-view.json @@ -55,6 +55,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "default": "[]" }, + "localeText": { "type": { "name": "object" } }, "onEventsChange": { "type": { "name": "func" } }, "onPreferencesChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/translations/api-docs/scheduler/standalone-agenda-view-premium/standalone-agenda-view-premium.json b/docs/translations/api-docs/scheduler/standalone-agenda-view-premium/standalone-agenda-view-premium.json index 374d92c1f51c3..4094246d0de6c 100644 --- a/docs/translations/api-docs/scheduler/standalone-agenda-view-premium/standalone-agenda-view-premium.json +++ b/docs/translations/api-docs/scheduler/standalone-agenda-view-premium/standalone-agenda-view-premium.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-agenda-view/standalone-agenda-view.json b/docs/translations/api-docs/scheduler/standalone-agenda-view/standalone-agenda-view.json index 077e1e1ca8eba..5354da4ca3f1a 100644 --- a/docs/translations/api-docs/scheduler/standalone-agenda-view/standalone-agenda-view.json +++ b/docs/translations/api-docs/scheduler/standalone-agenda-view/standalone-agenda-view.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-day-view-premium/standalone-day-view-premium.json b/docs/translations/api-docs/scheduler/standalone-day-view-premium/standalone-day-view-premium.json index 41c73d5b1d728..3368efd0c7de2 100644 --- a/docs/translations/api-docs/scheduler/standalone-day-view-premium/standalone-day-view-premium.json +++ b/docs/translations/api-docs/scheduler/standalone-day-view-premium/standalone-day-view-premium.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-day-view/standalone-day-view.json b/docs/translations/api-docs/scheduler/standalone-day-view/standalone-day-view.json index c946a3f32dff5..6edfb4029d7f5 100644 --- a/docs/translations/api-docs/scheduler/standalone-day-view/standalone-day-view.json +++ b/docs/translations/api-docs/scheduler/standalone-day-view/standalone-day-view.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-month-view-premium/standalone-month-view-premium.json b/docs/translations/api-docs/scheduler/standalone-month-view-premium/standalone-month-view-premium.json index bb56b8245a8bf..58838fe2c6e55 100644 --- a/docs/translations/api-docs/scheduler/standalone-month-view-premium/standalone-month-view-premium.json +++ b/docs/translations/api-docs/scheduler/standalone-month-view-premium/standalone-month-view-premium.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-month-view/standalone-month-view.json b/docs/translations/api-docs/scheduler/standalone-month-view/standalone-month-view.json index 3f600d26ff41f..328c79ef41da3 100644 --- a/docs/translations/api-docs/scheduler/standalone-month-view/standalone-month-view.json +++ b/docs/translations/api-docs/scheduler/standalone-month-view/standalone-month-view.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-week-view-premium/standalone-week-view-premium.json b/docs/translations/api-docs/scheduler/standalone-week-view-premium/standalone-week-view-premium.json index 0f8c152ed7345..3b2561cf0f0fb 100644 --- a/docs/translations/api-docs/scheduler/standalone-week-view-premium/standalone-week-view-premium.json +++ b/docs/translations/api-docs/scheduler/standalone-week-view-premium/standalone-week-view-premium.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/docs/translations/api-docs/scheduler/standalone-week-view/standalone-week-view.json b/docs/translations/api-docs/scheduler/standalone-week-view/standalone-week-view.json index e1adf9af6803b..8c3d4ec35e122 100644 --- a/docs/translations/api-docs/scheduler/standalone-week-view/standalone-week-view.json +++ b/docs/translations/api-docs/scheduler/standalone-week-view/standalone-week-view.json @@ -44,6 +44,9 @@ "description": "The structure of the event model. It defines how to read and write the properties of the event model. If not provided, the event model is assumed to match the CalendarEvent interface." }, "events": { "description": "The events currently available in the calendar." }, + "localeText": { + "description": "Set the locale text of the view. You can find all the translation keys supported in the source in the GitHub repository." + }, "onEventsChange": { "description": "Callback fired when some event of the calendar change." }, "onPreferencesChange": { "description": "Event handler called when the preferences change." }, "onViewChange": { "description": "Event handler called when the view changes." }, diff --git a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx index 525a5fe9c9377..ac374d70be374 100644 --- a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx +++ b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx @@ -184,6 +184,12 @@ StandaloneAgendaViewPremium.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx index 33ecb2af5fcc4..b58b27f80a6a6 100644 --- a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx +++ b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx @@ -184,6 +184,12 @@ StandaloneDayViewPremium.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx index 1e1ef9637bc88..040ce02896d2b 100644 --- a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx +++ b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx @@ -184,6 +184,12 @@ StandaloneMonthViewPremium.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx index 339926985e149..250be24743434 100644 --- a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx +++ b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx @@ -184,6 +184,12 @@ StandaloneWeekViewPremium.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx index 5e6134ba6d0b7..df66025bf9f07 100644 --- a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx +++ b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx @@ -171,6 +171,12 @@ StandaloneAgendaView.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx index cf75606ed6a90..4a4c33ce6bc19 100644 --- a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx +++ b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx @@ -171,6 +171,12 @@ StandaloneDayView.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx b/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx index 5d6f33800fab0..6abd8cbe03dfb 100644 --- a/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx +++ b/packages/x-scheduler/src/internals/components/EventCalendarProvider.tsx @@ -34,8 +34,10 @@ const StandaloneViewRoot = styled('div', { ...responsiveTypographyContainerQueries, })); -export interface EventCalendarProviderProps - extends UnstyledEventCalendarProvider.Props { +export interface EventCalendarProviderProps< + TEvent extends object, + TResource extends object, +> extends UnstyledEventCalendarProvider.Props { /** * Set the locale text of the view. * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) diff --git a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx index cca6fceaf8ee2..bd2f281433435 100644 --- a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx +++ b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx @@ -171,6 +171,12 @@ StandaloneMonthView.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ diff --git a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx index b31f79dc05787..226b1f56470a1 100644 --- a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx +++ b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx @@ -171,6 +171,12 @@ StandaloneWeekView.propTypes /* remove-proptypes */ = { * @default [] */ events: PropTypes.arrayOf(PropTypes.object), + /** + * Set the locale text of the view. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts) + * in the GitHub repository. + */ + localeText: PropTypes.object, /** * Callback fired when some event of the calendar change. */ From a4a1afcd94d40fc02cf417075598b7991768b6fa Mon Sep 17 00:00:00 2001 From: Rita Iglesias Gandara Date: Thu, 23 Jul 2026 19:22:46 +0200 Subject: [PATCH 5/5] Resolve theme default props in the standalone views Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01DTQDtignuUE3UECjCEHozo --- .../StandaloneAgendaViewPremium.tsx | 6 ++++- .../StandaloneDayViewPremium.tsx | 6 ++++- .../StandaloneMonthViewPremium.tsx | 6 ++++- .../StandaloneWeekViewPremium.tsx | 6 ++++- .../tests/StandaloneWeekViewPremium.test.tsx | 12 +++++++++ .../src/agenda-view/StandaloneAgendaView.tsx | 6 ++++- .../StandaloneCompactDayView.tsx | 6 ++++- .../StandaloneCompactThreeDayView.tsx | 6 ++++- .../StandaloneCompactWeekView.tsx | 6 ++++- .../src/day-view/StandaloneDayView.tsx | 6 ++++- .../src/month-view/StandaloneMonthView.tsx | 6 ++++- .../src/week-view/StandaloneWeekView.tsx | 6 ++++- .../tests/StandaloneWeekView.test.tsx | 26 +++++++++++++++++++ 13 files changed, 93 insertions(+), 11 deletions(-) diff --git a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx index ac374d70be374..0bed3b0e61001 100644 --- a/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx +++ b/packages/x-scheduler-premium/src/agenda-view-premium/StandaloneAgendaViewPremium.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useLicenseVerifier, Watermark } from '@mui/x-license/internals'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import { EventCalendarPremiumStore } from '@mui/x-scheduler-internals-premium/use-event-calendar-premium'; @@ -23,11 +24,14 @@ const StandaloneAgendaViewPremium = React.forwardRef(function StandaloneAgendaVi TEvent extends object, TResource extends object, >( - props: StandaloneAgendaViewPremiumProps, + inProps: StandaloneAgendaViewPremiumProps, forwardedRef: React.ForwardedRef, ) { useLicenseVerifier(packageInfo); + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx index b58b27f80a6a6..963fcc6b052a5 100644 --- a/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx +++ b/packages/x-scheduler-premium/src/day-view-premium/StandaloneDayViewPremium.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useLicenseVerifier, Watermark } from '@mui/x-license/internals'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import { EventCalendarPremiumStore } from '@mui/x-scheduler-internals-premium/use-event-calendar-premium'; @@ -23,11 +24,14 @@ const StandaloneDayViewPremium = React.forwardRef(function StandaloneDayViewPrem TEvent extends object, TResource extends object, >( - props: StandaloneDayViewPremiumProps, + inProps: StandaloneDayViewPremiumProps, forwardedRef: React.ForwardedRef, ) { useLicenseVerifier(packageInfo); + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx index 040ce02896d2b..f07c78d0438f4 100644 --- a/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx +++ b/packages/x-scheduler-premium/src/month-view-premium/StandaloneMonthViewPremium.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useLicenseVerifier, Watermark } from '@mui/x-license/internals'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import { EventCalendarPremiumStore } from '@mui/x-scheduler-internals-premium/use-event-calendar-premium'; @@ -23,11 +24,14 @@ const StandaloneMonthViewPremium = React.forwardRef(function StandaloneMonthView TEvent extends object, TResource extends object, >( - props: StandaloneMonthViewPremiumProps, + inProps: StandaloneMonthViewPremiumProps, forwardedRef: React.ForwardedRef, ) { useLicenseVerifier(packageInfo); + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx index 250be24743434..0fecd3a07a517 100644 --- a/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx +++ b/packages/x-scheduler-premium/src/week-view-premium/StandaloneWeekViewPremium.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useLicenseVerifier, Watermark } from '@mui/x-license/internals'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import { EventCalendarPremiumStore } from '@mui/x-scheduler-internals-premium/use-event-calendar-premium'; @@ -23,11 +24,14 @@ const StandaloneWeekViewPremium = React.forwardRef(function StandaloneWeekViewPr TEvent extends object, TResource extends object, >( - props: StandaloneWeekViewPremiumProps, + inProps: StandaloneWeekViewPremiumProps, forwardedRef: React.ForwardedRef, ) { useLicenseVerifier(packageInfo); + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx b/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx index 2ca79efdbd65c..5706eca9cb246 100644 --- a/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx +++ b/packages/x-scheduler-premium/src/week-view-premium/tests/StandaloneWeekViewPremium.test.tsx @@ -1,6 +1,8 @@ +import { createTheme, ThemeProvider } from '@mui/material/styles'; import { createSchedulerRenderer, DEFAULT_TESTING_VISIBLE_DATE } from 'test/utils/scheduler'; import { screen } from '@mui/internal-test-utils'; import { StandaloneWeekViewPremium } from '@mui/x-scheduler-premium/week-view-premium'; +import { esES } from '@mui/x-scheduler/locales'; describe('', () => { const { render } = createSchedulerRenderer({ clockConfig: DEFAULT_TESTING_VISIBLE_DATE }); @@ -17,5 +19,15 @@ describe('', () => { expect(screen.getByText('Ganztägig')).toBeVisible(); }); + + it('should use the locale text provided through the theme', () => { + render( + + + , + ); + + expect(screen.getByText('Todo el día')).toBeVisible(); + }); }); }); diff --git a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx index df66025bf9f07..9304a54826f58 100644 --- a/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx +++ b/packages/x-scheduler/src/agenda-view/StandaloneAgendaView.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneAgendaViewProps } from './AgendaView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneAgendaView = React.forwardRef(function StandaloneAgendaView< TEvent extends object, TResource extends object, >( - props: StandaloneAgendaViewProps, + inProps: StandaloneAgendaViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx b/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx index a5171d2bf7025..dcfa5934cdbb8 100644 --- a/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx +++ b/packages/x-scheduler/src/compact-day-view/StandaloneCompactDayView.tsx @@ -1,5 +1,6 @@ 'use client'; import * as React from 'react'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneCompactDayViewProps } from './CompactDayView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneCompactDayView = React.forwardRef(function StandaloneCompactDayV TEvent extends object, TResource extends object, >( - props: StandaloneCompactDayViewProps, + inProps: StandaloneCompactDayViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx b/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx index 9a09e1fccf26e..9ab88dfd986b0 100644 --- a/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx +++ b/packages/x-scheduler/src/compact-three-day-view/StandaloneCompactThreeDayView.tsx @@ -1,5 +1,6 @@ 'use client'; import * as React from 'react'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneCompactThreeDayViewProps } from './CompactThreeDayView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneCompactThreeDayView = React.forwardRef(function StandaloneCompac TEvent extends object, TResource extends object, >( - props: StandaloneCompactThreeDayViewProps, + inProps: StandaloneCompactThreeDayViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx b/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx index fc2b1d05a6f26..22ba266e9663d 100644 --- a/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx +++ b/packages/x-scheduler/src/compact-week-view/StandaloneCompactWeekView.tsx @@ -1,5 +1,6 @@ 'use client'; import * as React from 'react'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneCompactWeekViewProps } from './CompactWeekView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneCompactWeekView = React.forwardRef(function StandaloneCompactWee TEvent extends object, TResource extends object, >( - props: StandaloneCompactWeekViewProps, + inProps: StandaloneCompactWeekViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx index 4a4c33ce6bc19..bd48e9049bb9b 100644 --- a/packages/x-scheduler/src/day-view/StandaloneDayView.tsx +++ b/packages/x-scheduler/src/day-view/StandaloneDayView.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneDayViewProps } from './DayView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneDayView = React.forwardRef(function StandaloneDayView< TEvent extends object, TResource extends object, >( - props: StandaloneDayViewProps, + inProps: StandaloneDayViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx index bd2f281433435..5a6bbe43b130e 100644 --- a/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx +++ b/packages/x-scheduler/src/month-view/StandaloneMonthView.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneMonthViewProps } from './MonthView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneMonthView = React.forwardRef(function StandaloneMonthView< TEvent extends object, TResource extends object, >( - props: StandaloneMonthViewProps, + inProps: StandaloneMonthViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx index 226b1f56470a1..90521f6688ac2 100644 --- a/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx +++ b/packages/x-scheduler/src/week-view/StandaloneWeekView.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { useExtractEventCalendarParameters } from '@mui/x-scheduler-internals/use-event-calendar'; import type { StandaloneWeekViewProps } from './WeekView.types'; import { EventCalendarProvider } from '../internals/components/EventCalendarProvider'; @@ -15,9 +16,12 @@ const StandaloneWeekView = React.forwardRef(function StandaloneWeekView< TEvent extends object, TResource extends object, >( - props: StandaloneWeekViewProps, + inProps: StandaloneWeekViewProps, forwardedRef: React.ForwardedRef, ) { + // eslint-disable-next-line mui/material-ui-name-matches-component-name + const props = useThemeProps({ props: inProps, name: 'MuiEventCalendar' }); + const { parameters, forwardedProps } = useExtractEventCalendarParameters< TEvent, TResource, diff --git a/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx b/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx index d65ddaa795f97..0015a55feb4ca 100644 --- a/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx +++ b/packages/x-scheduler/src/week-view/tests/StandaloneWeekView.test.tsx @@ -1,6 +1,8 @@ +import { createTheme, ThemeProvider } from '@mui/material/styles'; import { createSchedulerRenderer, DEFAULT_TESTING_VISIBLE_DATE } from 'test/utils/scheduler'; import { screen } from '@mui/internal-test-utils'; import { StandaloneWeekView } from '@mui/x-scheduler/week-view'; +import { esES } from '@mui/x-scheduler/locales'; describe('', () => { const { render } = createSchedulerRenderer({ clockConfig: DEFAULT_TESTING_VISIBLE_DATE }); @@ -23,5 +25,29 @@ describe('', () => { expect(screen.getByText('All day')).toBeVisible(); }); + + it('should use the locale text provided through the theme', () => { + render( + + + , + ); + + expect(screen.getByText('Todo el día')).toBeVisible(); + }); + + it('should override the theme locale text with the localeText prop', () => { + render( + + + , + ); + + expect(screen.getByText('Ganztägig')).toBeVisible(); + }); }); });