React Native Calendars height is fixed by default cannot be changed why?Is there any way to decrease the height of calendar?

[JunaidAnwar0142]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I am unable to change the height of react native calendars by default it is taking my more then 80% screen how to make it adjustable

Expected Behavior

I want that height should be adjustable and can be decrease so that can be easily fit for both small and big size screens?

Observed Behavior

I searched mush more but nothing i found?

If there's an error message, please paste the full terminal output and error message in this code block:

Error text goes here!

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
• npm ls react-native:

Also specify:

I am using this code <View style={{ backgroundColor: '#EBF3FF', borderRadius:isLandscapeMode?moderateScale(10): moderateScale(20), overflow: 'hidden', flex: 0.85,justifyContent:'center',alignItems:'center' }}> <View style={{height:'100%',width:'100%'}}> <Calendar minDate={new Date().toISOString().split('T')[0]} showSixWeeks={true} showWeekNumbers={false} onDayPress={(day) => handleDateSelect(day)} markedDates={{ [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' }, }} // calendarStyle={{marginBottom: -30}} style={{width:wd*0.87}} theme={{ calendarBackground: 'transparent', arrowColor: '#848A95', selectedDayTextColor: '#ffffff', selectedDayBackgroundColor: '#94ADFD', textMonthFontSize: moderateScale(14), dayTextColor: 'black', textDayFontSize: moderateScale(12), textDayHeaderFontWeight: 'bold', 'stylesheet.day.basic':{ 'base':{ backgroundColor:'green',

                }
              },
              'stylesheet.calendar.header': {
                dayHeader: {
                  color: 'black',
                 
                },
                monthText: {
                  fontSize: isLandscapeMode?moderateScale(13):moderateScale(14),
                  color:'green',
                  // fontFamily: 'Montserrat-bold',
                backgroundColor:'red',
                  fontWeight:'bold'
        },

              },
              
            }}
          />
          </View>
        </View>

Screenshots

![image] (https://github.com/wix/react-native-calendars/assets/162088808/2003381d-9698-40f7-b135-0297e92529b8)

[jrafflenbeul]

I would also like to know how to edit the height of the calendar area itself to add space for more rows since my design has bigger dates and the last row/week is sometimes hidden.

I've created a separate issue here: https://github.com/wix/react-native-calendars/issues/2432

[Sfirleaalex]

You can override the styles in theme using the following code:

weekVerticalMargin: Dimensions.ternarySpacing,
            'stylesheet.day.basic': {
                base: {
                    width: CELL_SIZE,
                    height: CELL_SIZE,
                    alignItems: 'center',
                },
            },
            'stylesheet.day.period': {
                wrapper: {
                    alignItems: 'center',
                    alignSelf: 'stretch',
                    marginLeft: -1,
                },
                base: {
                    width: CELL_SIZE,
                    height: CELL_SIZE,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: Dimensions.primaryBorderRadius,
                },
                fillers: {
                    position: 'absolute',
                    height: CELL_SIZE,
                    flexDirection: 'row',
                    alignSelf: 'stretch',
                    left: 0,
                    right: 0,
                },
                leftFiller: {
                    height: CELL_SIZE,
                    width: CELL_SIZE,
                    alignSelf: 'flex-start',
                },
                rightFiller: {
                    alignSelf: 'flex-start',
                    height: CELL_SIZE,
                    width: CELL_SIZE,
                    flex: 1,
                },

CELL_SIZE = 24 borderRadius = 8