diff --git a/README.md b/README.md index e6cc0af1..573daae4 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ export interface CalendarProps { onPressDateHeader?: (date: Date) => void onPressEvent?: (event: ICalendarEvent) => void eventMinHeightForMonthView?: number + activeDate?: Date } ``` @@ -148,6 +149,7 @@ export interface CalendarProps { | `renderEvent` | no | `EventRenderer` | Custom event renderer. See below type definition. | | `renderHeader` | no | `HeaderRenderer` | Custom header renderer. | | `eventMinHeightForMonthView` | no | `number` | Minimun height for events in month view. Should match the min-height of your custom events. Defaults to 22. | +| `activeDate` | no | `Date` | Date highlighted in header. Defualts to today (current time). | ## EventRenderer diff --git a/src/components/CalendarContainer.tsx b/src/components/CalendarContainer.tsx index 0fe20a75..2367061f 100644 --- a/src/components/CalendarContainer.tsx +++ b/src/components/CalendarContainer.tsx @@ -74,6 +74,7 @@ export interface CalendarContainerProps { weekEndsOn?: WeekNum maxVisibleEventCount?: number eventMinHeightForMonthView?: number + activeDate?: Date } function _CalendarContainer({ @@ -102,6 +103,7 @@ function _CalendarContainer({ weekEndsOn = 6, maxVisibleEventCount = 3, eventMinHeightForMonthView = 22, + activeDate, }: CalendarContainerProps) { const [targetDate, setTargetDate] = React.useState(dayjs(date)) @@ -204,6 +206,7 @@ function _CalendarContainer({ style: headerContainerStyle, allDayEvents: allDayEvents, onPressDateHeader: onPressDateHeader, + activeDate, } return ( diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index c07bb77a..59457b59 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -13,6 +13,7 @@ export interface CalendarHeaderProps { style: ViewStyle allDayEvents: ICalendarEvent[] onPressDateHeader?: (date: Date) => void + activeDate?: Date } function _CalendarHeader({ @@ -21,6 +22,7 @@ function _CalendarHeader({ style, allDayEvents, onPressDateHeader, + activeDate, }: CalendarHeaderProps) { const _onPress = React.useCallback( (date: Date) => { @@ -45,7 +47,8 @@ function _CalendarHeader({ > {dateRange.map((date) => { - const _isToday = isToday(date) + const shouldHighlight = activeDate ? date.isSame(activeDate, 'date') : isToday(date) + return ( ({ style={[ theme.typography.xs, u['text-center'], - { color: _isToday ? theme.palette.primary.main : theme.palette.gray['500'] }, + { + color: shouldHighlight ? theme.palette.primary.main : theme.palette.gray['500'], + }, ]} > {date.format('ddd')} ({ {date.format('D')}