Merge pull request #544 from kbwo/feature/add-active-date-props

add active date props to header
acro5piano · Nov 9, 2021 · 5b2b5af · 5b2b5af
2 parents 232a3a0 + 5fa34d2
commit 5b2b5af
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -119,6 +119,7 @@ export interface CalendarProps<T> {
   onPressDateHeader?: (date: Date) => void
   onPressEvent?: (event: ICalendarEvent<T>) => void
   eventMinHeightForMonthView?: number
+  activeDate?: Date
 }
 ```
 
@@ -148,6 +149,7 @@ export interface CalendarProps<T> {
 | `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
@@ -74,6 +74,7 @@ export interface CalendarContainerProps<T> {
   weekEndsOn?: WeekNum
   maxVisibleEventCount?: number
   eventMinHeightForMonthView?: number
+  activeDate?: Date
 }
 
 function _CalendarContainer<T>({
@@ -102,6 +103,7 @@ function _CalendarContainer<T>({
   weekEndsOn = 6,
   maxVisibleEventCount = 3,
   eventMinHeightForMonthView = 22,
+  activeDate,
 }: CalendarContainerProps<T>) {
   const [targetDate, setTargetDate] = React.useState(dayjs(date))
 
@@ -204,6 +206,7 @@ function _CalendarContainer<T>({
     style: headerContainerStyle,
     allDayEvents: allDayEvents,
     onPressDateHeader: onPressDateHeader,
+    activeDate,
   }
 
   return (

diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx
@@ -13,6 +13,7 @@ export interface CalendarHeaderProps<T> {
   style: ViewStyle
   allDayEvents: ICalendarEvent<T>[]
   onPressDateHeader?: (date: Date) => void
+  activeDate?: Date
 }
 
 function _CalendarHeader<T>({
@@ -21,6 +22,7 @@ function _CalendarHeader<T>({
   style,
   allDayEvents,
   onPressDateHeader,
+  activeDate,
 }: CalendarHeaderProps<T>) {
   const _onPress = React.useCallback(
     (date: Date) => {
@@ -45,7 +47,8 @@ function _CalendarHeader<T>({
     >
       <View style={[u['z-10'], u['w-50'], borderColor]} />
       {dateRange.map((date) => {
-        const _isToday = isToday(date)
+        const shouldHighlight = activeDate ? date.isSame(activeDate, 'date') : isToday(date)
+
         return (
           <TouchableOpacity
             style={[u['flex-1'], u['pt-2']]}
@@ -58,14 +61,16 @@ function _CalendarHeader<T>({
                 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')}
               </Text>
               <View
                 style={
-                  _isToday
+                  shouldHighlight
                     ? [
                         primaryBg,
                         u['h-36'],
@@ -83,13 +88,13 @@ function _CalendarHeader<T>({
                 <Text
                   style={[
                     {
-                      color: _isToday
+                      color: shouldHighlight
                         ? theme.palette.primary.contrastText
                         : theme.palette.gray['800'],
                     },
                     theme.typography.xl,
                     u['text-center'],
-                    Platform.OS === 'web' && _isToday && u['mt-6'],
+                    Platform.OS === 'web' && shouldHighlight && u['mt-6'],
                   ]}
                 >
                   {date.format('D')}