feat(calendar): add scroll view margin customization options

apps/example/app/(drawer)/index.tsx

@@ -646,6 +646,12 @@ const Calendar = () => {
         end={23 * 60}
         spaceFromBottom={safeBottom}
         defaultDuration={60}
+        // Test the new margin customization feature
+        scrollViewTopMargin={50}
+        scrollViewBottomMargin={50}
+        scrollViewContentContainerStyle={{
+          backgroundColor: 'rgba(0, 0, 0, 0.1)', // Light red background to visualize the margins
+        }}
         onDragEventEnd={async (event) => {
           console.log('onDragEventEnd', event);
 

packages/react-native-calendar-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howljs/calendar-kit",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "description": "React Native Calendar Kit",
   "scripts": {
     "test": "jest",

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

@@ -100,6 +100,9 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
     resourcePerPage,
     resourcePagingEnabled,
     linkedScrollGroup,
+    scrollViewTopMargin,
+    scrollViewBottomMargin,
+    scrollViewContentContainerStyle,
   } = useCalendar();
   const { onTouchStart, onWheel } = linkedScrollGroup.addAndGet(
     ScrollType.calendarGrid,
@@ -324,6 +327,13 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
           showsVerticalScrollIndicator={false}
           onLayout={_onLayout}
           onScroll={_onScroll}
+          contentContainerStyle={[
+            scrollViewContentContainerStyle,
+            {
+              paddingTop: scrollViewTopMargin,
+              paddingBottom: scrollViewBottomMargin,
+            },
+          ]}
           refreshControl={
             onRefresh ? (
               <RefreshControl refreshing={false} onRefresh={_onRefresh} />

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

@@ -135,6 +135,9 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     enableResourceScroll = false,
     resourcePerPage = 3,
     resourcePagingEnabled = false,
+    scrollViewTopMargin = 0,
+    scrollViewBottomMargin = 0,
+    scrollViewContentContainerStyle,
   },
   ref
 ) => {
@@ -798,6 +801,9 @@ const CalendarContainer: React.ForwardRefRenderFunction<
       resourcePerPage,
       resourcePagingEnabled,
       linkedScrollGroup,
+      scrollViewTopMargin,
+      scrollViewBottomMargin,
+      scrollViewContentContainerStyle,
     }),
     [
       calendarLayout,
@@ -852,6 +858,9 @@ const CalendarContainer: React.ForwardRefRenderFunction<
       resourcePerPage,
       resourcePagingEnabled,
       linkedScrollGroup,
+      scrollViewTopMargin,
+      scrollViewBottomMargin,
+      scrollViewContentContainerStyle,
     ]
   );
 

packages/react-native-calendar-kit/src/context/CalendarProvider.tsx

@@ -1,6 +1,7 @@
 import type { WeekdayNumbers } from 'luxon';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
+import type { ViewStyle } from 'react-native';
 import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import type Animated from 'react-native-reanimated';
 import type HapticService from '../service/HapticService';
@@ -63,6 +64,9 @@ export interface CalendarContextProps {
   resourcePerPage: number;
   resourcePagingEnabled: boolean;
   linkedScrollGroup: LinkedScrollGroup;
+  scrollViewTopMargin: number;
+  scrollViewBottomMargin: number;
+  scrollViewContentContainerStyle?: ViewStyle;
 }
 
 export const CalendarContext = React.createContext<

packages/react-native-calendar-kit/src/types.ts

@@ -86,6 +86,9 @@ export interface ThemeConfigs {
 
   /** Default style of the event */
   eventTitleStyle?: TextStyle;
+
+  /** Custom style for the ScrollView content container */
+  scrollViewContentContainerStyle?: ViewStyle;
 }
 
 export type GoToDateOptions = {
@@ -553,14 +556,34 @@ export interface CalendarProviderProps extends ActionsProviderProps {
   /** Enable resource scroll
    *
    * Default: true - (Web: false)
-   */
+/** Enable resource scroll */
   enableResourceScroll?: boolean;
 
   /** Resource per page */
   resourcePerPage?: number;
 
   /** Resource paging enabled */
   resourcePagingEnabled?: boolean;
+
+  /**
+   * Custom margin for the top of the ScrollView content
+   *
+   * Default: `0`
+   */
+  scrollViewTopMargin?: number;
+
+  /**
+   * Custom margin for the bottom of the ScrollView content
+   *
+   * Default: `0`
+   */
+  scrollViewBottomMargin?: number;
+
+  /**
+   * Custom style for the ScrollView content container
+   * This allows for advanced styling including custom margins, padding, etc.
+   */
+  scrollViewContentContainerStyle?: ViewStyle;
 }
 
 export interface ResourceItem extends Record<string, any> {