feat: add highlight props

src/pages/CalendarPage/ui/CalendarPage.ui.tsx

@@ -9,12 +9,7 @@ const CalendarPage = () => (
     </h1>
 
     <div className={classes.calendarWrapper}>
-      <CalendarWidget
+      <CalendarWidget />
-        locale="en"
-        maxDate={new Date(2027, 2, 15)}
-        minDate={new Date(1996, 9, 15)}
-        value={new Date(2023, 9, 15)}
-      />
     </div>
   </div>
 );

src/widgets/CalendarWidget/ui/CalendarWidget.ui.tsx

@@ -11,6 +11,8 @@ export type CalendarWidgetProps = {
   minDate?: Date;
   value?: Date;
   locale?: 'en' | 'ru';
+  highlightToday?: boolean;
+  highlightValue?: boolean;
 };
 const CalendarWidget: FC<CalendarWidgetProps> = (props) => (
   <CalendarWidgetProvider {...props}>

src/widgets/CalendarWidget/ui/CalendarWidgetContext.tsx

@@ -21,6 +21,8 @@ export const CalendarWidgetProvider: FC<CalendarWidgetProviderProps> = (props) =
     minDate = new Date(1990, 0, 1),
     locale = 'ru',
     value = new Date(),
+    highlightToday = false,
+    highlightValue = false,
     ...restProps
   } = props;
 
@@ -35,8 +37,10 @@ export const CalendarWidgetProvider: FC<CalendarWidgetProviderProps> = (props) =
     maxDate,
     locale,
     value,
+    highlightToday,
+    highlightValue,
     ...restProps,
-  }), [maxDate, minDate, targetDate, locale, restProps, value]);
+  }), [highlightValue, targetDate, minDate, maxDate, locale, value, highlightToday, restProps]);
 
   return (
     <CalendarWidgetContext.Provider value={contextValue}>

src/widgets/CalendarWidget/ui/components/DateCell/ui/DateCell.ui.tsx

@@ -16,7 +16,12 @@ const DateCell: FC<DateCellProps> = (props) => {
   } = props;
   const format = 'en-En';
 
-  const { targetMonthIndex, value } = useContext(CalendarWidgetContext);
+  const {
+    targetMonthIndex,
+    value,
+    highlightToday,
+    highlightValue,
+  } = useContext(CalendarWidgetContext);
 
   const todayDate = new Date();
   const dataDate = new Intl.DateTimeFormat(format).format(date);
@@ -34,9 +39,9 @@ const DateCell: FC<DateCellProps> = (props) => {
       <span
         className={classnames(
           {
-            [classes.today as string]: dataDate === dataToday,
+            [classes.today as string]: highlightToday && dataDate === dataToday,
             [classes.outMothRange as string]: isOutMonthRange,
-            [classes.valueDate as string]: dataDate === dataValue,
+            [classes.valueDate as string]: highlightValue && dataDate === dataValue,
           },
         )}
       >