feat(calendar): highlight dates

src/Date/Calendar.tsx

@@ -33,6 +33,7 @@ export type BaseCalendarProps = {
   validRange?: ValidRangeType
   startYear?: number
   endYear?: number
+  highlightedDays?: CalendarDate[]
 
   // here they are optional but in final implementation they are required
   date?: CalendarDate
@@ -95,6 +96,7 @@ function Calendar(
     dates,
     validRange,
     dateMode,
+    highlightedDays,
   } = props
 
   const theme = useTheme()
@@ -196,6 +198,7 @@ function Calendar(
             selectColor={selectColor}
             roundness={theme.roundness}
             disableWeekDays={disableWeekDays}
+            highlightedDays={highlightedDays}
           />
         )}
         renderHeader={({ onPrev, onNext }) => (

src/Date/DatePickerModalContent.tsx

@@ -93,6 +93,7 @@ export function DatePickerModalContent(
     startYear,
     endYear,
     statusBarOnTopOfBackdrop,
+    highlightedDays,
   } = props
   const anyProps = props as any
 
@@ -199,6 +200,7 @@ export function DatePickerModalContent(
             dateMode={dateMode}
             startYear={startYear}
             endYear={endYear}
+            highlightedDays={highlightedDays}
           />
         }
         calendarEdit={

src/Date/Day.tsx

@@ -25,6 +25,7 @@ function Day(props: {
   selectColor: string
   isToday: boolean
   disabled: boolean
+  isHighlighted?: boolean
   onPressDate: (date: Date) => any
 }) {
   const {
@@ -42,6 +43,7 @@ function Day(props: {
     disabled,
     textColorOnPrimary,
     theme,
+    isHighlighted,
   } = props
   const onPress = React.useCallback(() => {
     onPressDate(new Date(year, month, day))
@@ -66,6 +68,8 @@ function Day(props: {
       baseTextColor = theme.colors.onPrimary
     } else if (inRange && theme.dark) {
       baseTextColor = theme.colors.onPrimaryContainer
+    } else if (isHighlighted) {
+      baseTextColor = theme.colors.primary
     } else {
       baseTextColor = theme.colors.onSurface
     }
@@ -80,6 +84,8 @@ function Day(props: {
     // Logic for themes other than V3
     if (selected || (inRange && theme.dark)) {
       baseTextColor = textColorOnPrimary
+    } else if (isHighlighted) {
+      baseTextColor = theme.colors.primary
     }
     // Since there's no additional logic provided for non-V3 themes in the step 2,
     // the final text color for non-V3 themes will simply be the base text color.
@@ -125,6 +131,7 @@ function Day(props: {
                   }
                 : undefined,
               { ...textFont },
+              isHighlighted ? styles.highlightedDay : undefined,
             ]}
             selectable={false}
           >
@@ -168,6 +175,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'transparent',
   },
+  highlightedDay: {
+    fontWeight: '900',
+  },
   flex1: {
     flex: 1,
   },

src/Date/Month.tsx

@@ -49,6 +49,7 @@ interface BaseMonthProps {
   selectColor: string
   roundness: number
   validRange?: ValidRangeType
+  highlightedDays?: CalendarDate[]
 
   // some of these should be required in final implementation
   startDate?: CalendarDate
@@ -91,6 +92,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     disableWeekDays,
     locale,
     validRange,
+    highlightedDays,
   } = props
   const theme = useTheme()
   const textColorOnPrimary = useTextColorOnPrimary()
@@ -126,6 +128,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
 
           const day = new Date(year, month, dayOfMonth)
           const isToday = areDatesOnSameDay(day, today)
+          const isHighlighted = highlightedDays?.some((d) =>
+            areDatesOnSameDay(day, d)
+          )
 
           let inRange = false
           let disabled = isDisabled(day)
@@ -233,6 +238,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             rightCrop,
             isToday,
             disabled,
+            isHighlighted,
           }
         }),
       }
@@ -248,6 +254,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     endDate,
     dates,
     date,
+    highlightedDays,
   ])
 
   let textFont = theme?.isV3
@@ -345,6 +352,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                   primaryColor={primaryColor}
                   disabled={gd.disabled}
                   textColorOnPrimary={textColorOnPrimary}
+                  isHighlighted={gd.isHighlighted}
                 />
               )
             )}