Merge pull request #143 from howljs/fix/CK-136

feat: support custom day dar item #136

apps/docs/docs/customization/CalendarBody.md

@@ -0,0 +1,66 @@
+# CalendarBody
+
+`CalendarBody` is a core component of the React Native Calendar Kit. It renders the main calendar grid, including time slots, events, and various interactive elements.
+
+## renderHour
+
+A function that allows customization of the hour labels in the time column of the calendar.
+
+### Description
+
+The `renderHour` prop provides a way to customize the appearance of hour labels in the calendar's time column. When provided, this function will be called for each hour label, allowing you to render custom content instead of the default hour text.
+
+### Parameters
+
+The function receives an object with the following properties:
+
+- `hourStr`: A string representation of the hour (e.g., "9:00 AM").
+- `minutes`: The number of minutes since the start of the day for this hour label.
+- `style`: The default style object applied to the hour label. You can extend or override this style in your custom rendering.
+
+### Return Value
+
+The function should return a React node (e.g., JSX element) that will be rendered as the hour label.
+
+### Example
+
+Here's an example of how to use the `renderHour` prop to create custom hour labels with a colored dot:
+
+```tsx
+const renderHour = useCallback(({ hourStr }: RenderHourProps) => {
+    return (
+      <View style={styles.hourContainer}>
+        <View style={styles.dot} />
+        <Text style={styles.hourText}>{hourStr}</Text>
+      </View>
+    );
+  }, []);
+
+ <CalendarBody renderHour={renderHour} />
+
+const styles = StyleSheet.create({
+  hourContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'absolute',
+    left: 8,
+    right: 0,
+    top: -4,
+    gap: 4,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 'blue',
+  },
+  hourText: {
+    fontWeight: 'bold',
+    fontSize: 8,
+  },
+});
+```
+
+In this example, we're rendering a small blue dot next to each hour label and making the text bold. You can customize this further based on your specific design requirements.
+
+![custom-hour](../assets/custom-hour.png)

apps/docs/docs/customization/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Customization",
+  "position": 3,
+  "collapsible": true,
+  "collapsed": false
+}

apps/docs/package.json

@@ -21,7 +21,7 @@
     "@docusaurus/preset-classic": "3.5.2",
     "@docusaurus/remark-plugin-npm2yarn": "^3.5.2",
     "@easyops-cn/docusaurus-search-local": "^0.44.5",
-    "@howljs/calendar-kit": "2.0.3",
+    "@howljs/calendar-kit": "2.0.6",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "glob": "^10.4.2",

apps/docs/yarn.lock

@@ -2573,9 +2573,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@howljs/calendar-kit@npm:2.0.3":
-  version: 2.0.3
-  resolution: "@howljs/calendar-kit@npm:2.0.3"
+"@howljs/calendar-kit@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@howljs/calendar-kit@npm:2.0.6"
   dependencies:
     lodash.debounce: "npm:^4.0.8"
     lodash.isequal: "npm:^4.5.0"
@@ -2594,7 +2594,7 @@ __metadata:
       optional: true
     react-native-haptic-feedback:
       optional: true
-  checksum: 10/3bcca8efd70749a524e4732366e9efef3f102a46549a1a6bcd9a8edebad84aad16ee6bf27eed40b5464e4469a5ac9c94825425c0f88dd03d2e7bf78769d82b41
+  checksum: 10/330c774a4d5c054cd2577cbddcc3b27f7909d56c747f42baef3cfa71eaddb9a57057beb8850137ae3d7685b64e8650a151cdd2559ad10fe4a7b56bf476f2d5b3
   languageName: node
   linkType: hard
 
@@ -5036,7 +5036,7 @@ __metadata:
     "@docusaurus/tsconfig": "npm:3.5.2"
     "@docusaurus/types": "npm:3.5.2"
     "@easyops-cn/docusaurus-search-local": "npm:^0.44.5"
-    "@howljs/calendar-kit": "npm:2.0.3"
+    "@howljs/calendar-kit": "npm:2.0.6"
     "@mdx-js/react": "npm:^3.0.0"
     clsx: "npm:^2.0.0"
     glob: "npm:^10.4.2"

packages/react-native-calendar-kit/src/CalendarHeader.tsx

@@ -42,6 +42,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   eventMinMinutes = MIN_ALL_DAY_MINUTES,
   eventMaxMinutes = MAX_ALL_DAY_MINUTES,
   eventInitialMinutes = DEFAULT_ALL_DAY_MINUTES,
+  renderDayItem,
 }) => {
   const {
     calendarLayout,
@@ -202,6 +203,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
       renderEvent,
       renderExpandIcon,
       resources,
+      renderDayItem,
     }),
     [
       calendarData.minDateUnix,
@@ -211,6 +213,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
       renderEvent,
       renderExpandIcon,
       resources,
+      renderDayItem,
     ]
   );
 
@@ -244,6 +247,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
           renderExpandIcon={extra.renderExpandIcon}
           renderEvent={extra.renderEvent}
           pageIndex={index}
+          renderDayItem={extra.renderDayItem}
         />
       );
     }
@@ -253,6 +257,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
         pageIndex={index * extra.columns}
         startUnix={dateUnixByIndex}
         renderEvent={extra.renderEvent}
+        renderDayItem={extra.renderDayItem}
       />
     );
   };

packages/react-native-calendar-kit/src/components/DayItem.tsx

@@ -1,5 +1,11 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React, { PropsWithChildren, useMemo } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { useActions } from '../context/ActionsProvider';
 import { useHighlightDates } from '../context/HighlightDatesProvider';
 import { useLocale } from '../context/LocaleProvider';
@@ -11,6 +17,8 @@ import Text from './Text';
 
 interface DayItemProps {
   dateUnix: number;
+  showDayItem?: boolean;
+  dayItemContainerStyle?: StyleProp<ViewStyle>;
 }
 
 const selectDayItemTheme = (state: ThemeConfigs) => ({
@@ -26,7 +34,12 @@ const selectDayItemTheme = (state: ThemeConfigs) => ({
   dayContainer: state.dayContainer,
 });
 
-const DayItem: React.FC<DayItemProps> = ({ dateUnix }) => {
+const DayItem: React.FC<PropsWithChildren<DayItemProps>> = ({
+  dateUnix,
+  children,
+  showDayItem = true,
+  dayItemContainerStyle,
+}) => {
   const { weekDayShort } = useLocale();
   const { currentDateUnix } = useNowIndicator();
   const { onPressDayNumber } = useActions();
@@ -79,32 +92,37 @@ const DayItem: React.FC<DayItemProps> = ({ dateUnix }) => {
   };
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.6}
-      disabled={!onPressDayNumber}
-      onPress={_onDayPress}>
-      <View style={[styles.dayContainer, dayContainer]}>
-        <Text
-          style={[
-            styles.weekDayText,
-            { color: colors.text },
-            customStyle.dayText,
-          ]}>
-          {weekDayShort[date.weekday % 7]}
-        </Text>
+    <View style={dayItemContainerStyle}>
+      {showDayItem && (
+        <TouchableOpacity
+          activeOpacity={0.6}
+          disabled={!onPressDayNumber}
+          onPress={_onDayPress}>
+          <View style={[styles.dayContainer, dayContainer]}>
+            <Text
+              style={[
+                styles.weekDayText,
+                { color: colors.text },
+                customStyle.dayText,
+              ]}>
+              {weekDayShort[date.weekday % 7]}
+            </Text>
 
-        <View style={[styles.dayNumContainer, customStyle.container]}>
-          <Text
-            style={[
-              styles.dayNumText,
-              { color: colors.text },
-              customStyle.numText,
-            ]}>
-            {date.day}
-          </Text>
-        </View>
-      </View>
-    </TouchableOpacity>
+            <View style={[styles.dayNumContainer, customStyle.container]}>
+              <Text
+                style={[
+                  styles.dayNumText,
+                  { color: colors.text },
+                  customStyle.numText,
+                ]}>
+                {date.day}
+              </Text>
+            </View>
+          </View>
+        </TouchableOpacity>
+      )}
+      {children}
+    </View>
   );
 };
 

packages/react-native-calendar-kit/src/components/MultiDayBarItem.tsx

@@ -34,12 +34,14 @@ interface MultiDayBarItemProps {
     event: PackedAllDayEvent,
     size: SizeAnimation
   ) => React.ReactNode;
+  renderDayItem?: (date: { dateUnix: number }) => React.ReactNode;
 }
 
 const MultiDayBarItem: React.FC<MultiDayBarItemProps> = ({
   pageIndex,
   startUnix,
   renderEvent,
+  renderDayItem,
 }) => {
   const dayBarStyles = useTheme(
     useCallback(
@@ -122,7 +124,11 @@ const MultiDayBarItem: React.FC<MultiDayBarItemProps> = ({
         key={`column_${visibleDates[date].unix}`}
         pointerEvents="box-none"
         style={animStyle}>
-        <DayItem dateUnix={visibleDates[date].unix} />
+        {renderDayItem ? (
+          renderDayItem({ dateUnix: visibleDates[date].unix })
+        ) : (
+          <DayItem dateUnix={visibleDates[date].unix} />
+        )}
       </Animated.View>
     );
   };

packages/react-native-calendar-kit/src/components/SingleDayBarItem.tsx

@@ -41,13 +41,15 @@ interface SingleDayBarItemProps {
     size: SizeAnimation
   ) => React.ReactNode;
   pageIndex: number;
+  renderDayItem?: (date: { dateUnix: number }) => React.ReactNode;
 }
 
 const SingleDayBarItem = ({
   startUnix,
   renderExpandIcon,
   renderEvent,
   pageIndex,
+  renderDayItem,
 }: SingleDayBarItemProps) => {
   const dayBarStyles = useTheme(
     useCallback(
@@ -135,7 +137,11 @@ const SingleDayBarItem = ({
               styles.dayItemContainer,
               { width: hourWidth, borderRightColor: dayBarStyles.borderColor },
             ]}>
-            <DayItem dateUnix={startUnix} />
+            {renderDayItem ? (
+              renderDayItem({ dateUnix: startUnix })
+            ) : (
+              <DayItem dateUnix={startUnix} />
+            )}
             <ExpandButton
               isExpanded={isExpanded}
               isShowExpandButton={isShowExpandButton}
@@ -172,7 +178,11 @@ const SingleDayBarItem = ({
 
     return (
       <View style={[styles.onlyDayContainer, dayBarStyles.singleDayContainer]}>
-        <DayItem dateUnix={startUnix} />
+        {renderDayItem ? (
+          renderDayItem({ dateUnix: startUnix })
+        ) : (
+          <DayItem dateUnix={startUnix} />
+        )}
       </View>
     );
   };

packages/react-native-calendar-kit/src/index.tsx

@@ -8,6 +8,7 @@ export { default as CalendarHeader } from './CalendarHeader';
 export { default as ResourceHeaderItem } from './components/ResourceHeaderItem';
 export { default as MultiDayBarItem } from './components/MultiDayBarItem';
 export { default as SingleDayBarItem } from './components/SingleDayBarItem';
+export { default as DayItem } from './components/DayItem';
 
 export { useActions } from './context/ActionsProvider';
 export { useBody } from './context/BodyContext';
@@ -48,7 +49,7 @@ export { DraggingEvent } from './components/DraggingEvent';
 
 export type { WeekdayNumbers } from 'luxon';
 
-export { parseDateTime } from './utils/dateUtils';
+export * from './utils/dateUtils';
 
 export * from './service/rrule';