From cbfcf134f648fc462a84cc18820eb8b4a8588ad3 Mon Sep 17 00:00:00 2001 From: Jan T Date: Sun, 12 Oct 2025 00:06:04 +0200 Subject: [PATCH] feat(calendar): add scroll view margin customization options Add scrollViewTopMargin, scrollViewBottomMargin and scrollViewContentContainerStyle props to allow customizing ScrollView margins and styling in the calendar component --- apps/example/app/(drawer)/index.tsx | 6 +++++ .../react-native-calendar-kit/package.json | 2 +- .../src/CalendarBody.tsx | 10 ++++++++ .../src/CalendarContainer.tsx | 9 +++++++ .../src/context/CalendarProvider.tsx | 4 +++ .../react-native-calendar-kit/src/types.ts | 25 ++++++++++++++++++- 6 files changed, 54 insertions(+), 2 deletions(-) diff --git a/apps/example/app/(drawer)/index.tsx b/apps/example/app/(drawer)/index.tsx index 28ccd18..9344a69 100644 --- a/apps/example/app/(drawer)/index.tsx +++ b/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); diff --git a/packages/react-native-calendar-kit/package.json b/packages/react-native-calendar-kit/package.json index 5ec9dc6..6d10da1 100644 --- a/packages/react-native-calendar-kit/package.json +++ b/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", diff --git a/packages/react-native-calendar-kit/src/CalendarBody.tsx b/packages/react-native-calendar-kit/src/CalendarBody.tsx index 91d3264..a1662ed 100644 --- a/packages/react-native-calendar-kit/src/CalendarBody.tsx +++ b/packages/react-native-calendar-kit/src/CalendarBody.tsx @@ -100,6 +100,9 @@ const CalendarBody: React.FC = ({ resourcePerPage, resourcePagingEnabled, linkedScrollGroup, + scrollViewTopMargin, + scrollViewBottomMargin, + scrollViewContentContainerStyle, } = useCalendar(); const { onTouchStart, onWheel } = linkedScrollGroup.addAndGet( ScrollType.calendarGrid, @@ -324,6 +327,13 @@ const CalendarBody: React.FC = ({ showsVerticalScrollIndicator={false} onLayout={_onLayout} onScroll={_onScroll} + contentContainerStyle={[ + scrollViewContentContainerStyle, + { + paddingTop: scrollViewTopMargin, + paddingBottom: scrollViewBottomMargin, + }, + ]} refreshControl={ onRefresh ? ( diff --git a/packages/react-native-calendar-kit/src/CalendarContainer.tsx b/packages/react-native-calendar-kit/src/CalendarContainer.tsx index 1b3a485..d724ebd 100644 --- a/packages/react-native-calendar-kit/src/CalendarContainer.tsx +++ b/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, ] ); diff --git a/packages/react-native-calendar-kit/src/context/CalendarProvider.tsx b/packages/react-native-calendar-kit/src/context/CalendarProvider.tsx index 497a20c..4f9f5d6 100644 --- a/packages/react-native-calendar-kit/src/context/CalendarProvider.tsx +++ b/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< diff --git a/packages/react-native-calendar-kit/src/types.ts b/packages/react-native-calendar-kit/src/types.ts index 9946f01..152dadf 100644 --- a/packages/react-native-calendar-kit/src/types.ts +++ b/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,7 +556,7 @@ export interface CalendarProviderProps extends ActionsProviderProps { /** Enable resource scroll * * Default: true - (Web: false) - */ +/** Enable resource scroll */ enableResourceScroll?: boolean; /** Resource per page */ @@ -561,6 +564,26 @@ export interface CalendarProviderProps extends ActionsProviderProps { /** 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 {