diff --git a/packages/react-calendar/src/Calendar.tsx b/packages/react-calendar/src/Calendar.tsx index b797d86e..1a9a9aa9 100644 --- a/packages/react-calendar/src/Calendar.tsx +++ b/packages/react-calendar/src/Calendar.tsx @@ -911,6 +911,15 @@ const Calendar: React.ForwardRefExoticComponent formatDate(date, 'dd MMM YYYY') */ formatLongDate?: typeof defaultFormatLongDate; + value?: Value; } & Omit< React.ComponentProps, 'children' | 'formatAbbr' | 'maxDateTransform' | 'minDateTransform' | 'view' >; -export default function Day({ +function isDateSelected(value: Value | undefined, targetDate: Date): boolean { + if (!value) { + return false; + } + return value instanceof Date && value.getTime() === targetDate.getTime(); +} + +function Day({ calendarType, classes = [], currentMonthIndex, @@ -79,3 +88,14 @@ export default function Day({ ); } + +const MemoizedDay: React.ComponentType = memo(Day, (prevProps, nextProps) => { + if (Array.isArray(prevProps.value) || Array.isArray(nextProps.value)) { + return false; + } + const prevSelected = isDateSelected(prevProps.value, prevProps.date); + const nextSelected = isDateSelected(nextProps.value, nextProps.date); + return prevSelected === nextSelected; +}); + +export default MemoizedDay; diff --git a/packages/react-calendar/src/MonthView/Days.tsx b/packages/react-calendar/src/MonthView/Days.tsx index cc6835b7..f22037fd 100644 --- a/packages/react-calendar/src/MonthView/Days.tsx +++ b/packages/react-calendar/src/MonthView/Days.tsx @@ -112,6 +112,7 @@ export default function Days(props: DaysProps): React.ReactElement { calendarType={calendarType} currentMonthIndex={monthIndex} date={date} + value={value} /> )} offset={offset}