docs: update doc

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"