diff --git a/src/Date/Calendar.tsx b/src/Date/Calendar.tsx index 76dbc538..bd30ccac 100644 --- a/src/Date/Calendar.tsx +++ b/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 }) => ( diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx index 08b2877f..a8f1e4a5 100644 --- a/src/Date/DatePickerModalContent.tsx +++ b/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={ diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx index 95abbf1d..d058cd9a 100644 --- a/src/Date/Day.tsx +++ b/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, }, diff --git a/src/Date/Month.tsx b/src/Date/Month.tsx index 9a8e3fb4..95589be4 100644 --- a/src/Date/Month.tsx +++ b/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} /> ) )}