Feature Request: Add Customizable Font Size and Container Dimensions for react-native-calendars

[AnasPlusAnas]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I used patch-package to patch [email protected] for the project I'm working on.

I needed to increase the font size for the weekdays and the days. However, doing so caused the text to no longer fit within the containers properly. Below, I have included some before and after examples of the changes I made. This might not be the best way to implement these changes, but please consider adding these custom values for these elements or possibly for others as well. Thank you very much for your consideration!

Previews of changes before/after

Calendar default with my font size

Calendar changes to day header width, my font size now fits (Mon, Tue, Wed, e.g.)

Calendar changes to the day's width and height

Calendar changes to the day's selected border radius

Calendar changes to the day's container to center the numbers

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendars/src/calendar/day/basic/style.js b/node_modules/react-native-calendars/src/calendar/day/basic/style.js
index 0426a27..4cafa84 100644
--- a/node_modules/react-native-calendars/src/calendar/day/basic/style.js
+++ b/node_modules/react-native-calendars/src/calendar/day/basic/style.js
@@ -9,17 +9,18 @@ export default function styleConstructor(theme = {}) {
             alignItems: 'center'
         },
         base: {
-            width: 32,
-            height: 32,
-            alignItems: 'center'
+            width: appStyle.todayBaseWidth,
+            height: appStyle.todayBaseHeight,
+            alignItems: 'center',
+            justifyContent: 'center',
         },
         today: {
             backgroundColor: appStyle.todayBackgroundColor,
-            borderRadius: 16
+            borderRadius: appStyle.todayBorderRadius
         },
         selected: {
             backgroundColor: appStyle.selectedDayBackgroundColor,
-            borderRadius: 16
+            borderRadius: appStyle.selectedDayBorderRadius
         },
         text: {
             fontSize: appStyle.textDayFontSize,
diff --git a/node_modules/react-native-calendars/src/calendar/header/style.js b/node_modules/react-native-calendars/src/calendar/header/style.js
index a57f1ae..89c4374 100644
--- a/node_modules/react-native-calendars/src/calendar/header/style.js
+++ b/node_modules/react-native-calendars/src/calendar/header/style.js
@@ -55,7 +55,7 @@ export default function (theme = {}) {
         dayHeader: {
             marginTop: 2,
             marginBottom: 7,
-            width: 32,
+            width: appStyle.textDayHeaderWidth,
             textAlign: 'center',
             fontSize: appStyle.textDayHeaderFontSize,
             fontFamily: appStyle.textDayHeaderFontFamily,
diff --git a/node_modules/react-native-calendars/src/style.d.ts b/node_modules/react-native-calendars/src/style.d.ts
index 55083f5..6dd62e4 100644
--- a/node_modules/react-native-calendars/src/style.d.ts
+++ b/node_modules/react-native-calendars/src/style.d.ts
@@ -42,3 +42,9 @@ export declare const reservationsBackgroundColor = "#f2F4f5";
 export declare const todayButtonTextColor = "#00BBF2";
 export declare const todayButtonPosition: undefined;
 export declare const weekVerticalMargin = 7;
+export declare const dayHeaderWidth = 32;
+export declare const todayBaseWidth = 32;
+export declare const todayBaseHeight = 32;
+export declare const textDayHeaderWidth = 32;
+export declare const selectedDayBorderRadius = 16;
+export declare const todayBorderRadius = 16;
diff --git a/node_modules/react-native-calendars/src/style.js b/node_modules/react-native-calendars/src/style.js
index 8404309..94a89e3 100644
--- a/node_modules/react-native-calendars/src/style.js
+++ b/node_modules/react-native-calendars/src/style.js
@@ -49,3 +49,9 @@ export const reservationsBackgroundColor = AGENDA_BG_COLOR;
 export const todayButtonTextColor = SECONDARY_TEXT_COLOR;
 export const todayButtonPosition = undefined; // right' / 'left'(default)
 export const weekVerticalMargin = 7;
+export  const dayHeaderWidth = 32;
+export  const todayBaseWidth = 32;
+export  const todayBaseHeight = 32;
+export  const textDayHeaderWidth = 32;
+export  const selectedDayBorderRadius = 16;
+export  const todayBorderRadius = 16;
diff --git a/node_modules/react-native-calendars/src/types.d.ts b/node_modules/react-native-calendars/src/types.d.ts
index 0f4b41a..64628f6 100644
--- a/node_modules/react-native-calendars/src/types.d.ts
+++ b/node_modules/react-native-calendars/src/types.d.ts
@@ -97,6 +97,12 @@ export interface Theme {
             main?: object;
         };
     };
+    textDayHeaderWidth?: number;    
+    todayBaseWidth?: number;
+    todayBaseHeight?: number;    
+    textDayHeaderFontSize?: number;
+    selectedDayBorderRadius?: number;
+    todayBorderRadius?: number;
 }
 export type AgendaEntry = {
     name: string;

This issue body was partially generated by patch-package.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.