React-native-calendars: Week dates getting cut in agenda

[akhilsanker]

Description

The dates getting cut in agenda in android emulators.

Expected Behavior

To get the dates print at the center of the view

Observed Behavior

The dates are cut at the bottom

My code is as follows:

loadItemsForMonth={(month) => {this.displayMonth(month)}}
onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
onDayPress={(day)=>{this.dayPressed(day)}}
onDayChange={(day)=>{ }}
selected={this.date}
// minDate={'2019-05-10'}
pastScrollRange={50}
futureScrollRange={50}
renderKnob={() => {
return (
source={require('../assets/imgs/down-arrow.png')} style={{width: 20, height: 20}}
/>

);
}}
renderEmptyData = {() => {
if(this.state.isLoading) {
return (


)
}
return (
{this.state.displayDate} - {this.state.displayMonth} - {this.state.displayYear}


{
this.state.timeTable.length == 0 ?
{language.labelIfNoData}
:
data={this.state.timeTable}
lineColor='rgb(45,156,219)'
circleSize={18}
circleColor='rgb(45,156,219)'
descriptionStyle={{color:'gray',fontSize: 18 }}
separator={true}
separatorStyle={{color: '#000000'}}
/>
}

);
}}
hideKnob={false}
onRefresh={() => this.refreshed()}
refreshing={false}
refreshControl={null}
theme={{
backgroundColor: '#f1f2f6',
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#fff',
selectedDayTextColor: language.primary,
selectedDayTextSize: 20,
todayTextColor: '#00adf5',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e1e8',
dotColor: '#00adf5',
selectedDotColor: '#ffffff',
arrowColor: 'orange',
monthTextColor: language.primary,
indicatorColor: 'blue',
textDayFontWeight: '300',
textMonthFontWeight: 'bold',
textDayHeaderFontWeight: '300',
textDayFontSize: 20,
textMonthFontSize: 17,
textDayHeaderFontSize: 17,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue',
}}
style={{ justifyContent: 'space-between' }}
/>

Environment

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

• react-native-calendars: 1.183.0
• react-native: "0.59.8

Also specify:

1. Emulator & version: Nexus 7 API 29(tablet)

Thanks

[carlosroberto555]

I tested on android device, and got same issue

[Nemferno]

I also had the same problem on my android device. I used your code to check if the fix actually worked for you as well. In your theme, add the following property:

'stylesheet.calendar.header': { week: { marginTop: 0, flexDirection: 'row', justifyContent: 'space-between' } }

Now, your numbers shouldn't be cropped at the bottom anymore.

[LucasHimelfarb]

It is a duplicate question, if you want a quick and simple answer to a solution to the aspect of the agenda in the state "offSet", follow the following link...
https://github.com/wix/react-native-calendars/issues/845

[akhilsanker]

Hi @Nemferno,
Your solution woks.
Thanks for the solution.

[carlosroberto555]

I found a open PR to fix it on library #615
This is like @LucasHimelfarb say, but directly on container

[KalaiselvanMahendran]

Hi @Nemferno and @akhilsanker Where to paste that code ??

[Kleinhummel]

I also had the same problem on my android device. I used your code to check if the fix actually worked for you as well. In your theme, add the following property:

'stylesheet.calendar.header': { week: { marginTop: 0, flexDirection: 'row', justifyContent: 'space-between' } }

Now, your numbers shouldn't be cropped at the bottom anymore.

I had the same problem, but without using the agenda component. With this solution, the marking background of the selected date is still slightly cut off and the weekdays and dates are not in a perfect row anymore...

Before:

After:

[Nemferno]

Hi @Nemferno and @akhilsanker Where to paste that code ??

@KalaiselvanMahendran It should be put within the theme property. The 'stylesheet.calendar.header' is a property of theme.

[Nemferno]

@Kleinhummel Please paste your code so I can duplicate your issue.

[Kleinhummel]

@Kleinhummel Please paste your code so I can duplicate your issue.

Look at December 2019 ;)

export default function App() {

  const [markedDates, setMarkedDates] = useState({});

  function handleDayPress(day) {
    const selectedDate = { startingDay: true, endingDay: true, color: 'white', selected: true };
    setMarkedDates({ [day.dateString]: selectedDate });
  }
  return (
    <ScrollView>
      <CalendarList
        scrollEnabled={true}
        horizontal={true}
        pagingEnabled={true}
        markedDates={markedDates}
        // style={{ paddingBottom: this.state.selectedCourse ? 90 : 10 }}
        theme={{
          textDisabledColor: '#2394f4',
          calendarBackground: '#017aea',
          dayTextColor: 'white',
          monthTextColor: 'white',
          textSectionTitleColor: '#7fbdf2',
          arrowColor: 'white',
          // textDayFontFamily: 'sequel-sans-black-body',
          // textMonthFontFamily: 'sequel-sans-black-body',
          // textDayHeaderFontFamily: 'sequel-sans-black-body',
          'stylesheet.day.period': {
            base: {
              overflow: 'hidden',
              height: 34,
              alignItems: 'center',
              width: 38
            }
          },
          'stylesheet.calendar.header': {
            week: {
              marginTop: 0,
              flexDirection: 'row',
              justifyContent: 'space-between'
            }
          },
          selectedDayTextColor: '#017aea'
        }}
        renderArrow={direction => (
          <Icon
            name={
              direction === 'left' ? 'chevron-left' : 'chevron-right'
            }
            size={30}
            color="white"
          />
        )}
        hideArrows={false}
        markingType={'period'}
        minDate={'2012-05-10'}
        maxDate={'2070-05-30'}
        onDayPress={handleDayPress}
        onDayLongPress={day => { }}
        monthFormat={'MMMM yyyy'}
        onMonthChange={month => { }}
        hideExtraDays={true}
        firstDay={1}
        onPressArrowLeft={substractMonth => substractMonth()}
        onPressArrowRight={addMonth => addMonth()}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[Nemferno]

@Kleinhummel , I recreated your code less any custom code you have provided. On my end, it's fine.

I can see the problem - if you are using custom style settings, you may have to play around with the padding and margins of the week and days, since the bold font could be messing up with the design.

Did you try using the calendar without the bold?

[Kleinhummel]

@Kleinhummel , I recreated your code less any custom code you have provided. On my end, it's fine.

I can see the problem - if you are using custom style settings, you may have to play around with the padding and margins of the week and days, since the bold font could be messing up with the design.

Did you try using the calendar without the bold?

Yes, in fact in my code example, the font family was commented out and yet the date was cut off. But I found out, that the Icon in the renderArrow prop caused the calendar to move to the bottom a bit.
Now the only remaining problem is that the dates are not well aligned with the day names. And without the fix from @Nemferno the marking period is cut off again.

Screenshot:

Current code:

<CalendarList
        scrollEnabled={true}
        horizontal={true}
        pagingEnabled={true}
        markedDates={markedDates}
        theme={{
          textDisabledColor: '#2394f4',
          calendarBackground: '#017aea',
          dayTextColor: 'white',
          monthTextColor: 'white',
          textSectionTitleColor: '#7fbdf2',
          arrowColor: 'white',
          'stylesheet.day.period': {
            base: {
              overflow: 'hidden',
              height: 34,
              alignItems: 'center',
              width: 38
            }
          },
          'stylesheet.calendar.header': {
            week: {
              marginTop: 0,
              flexDirection: 'row',
              justifyContent: 'space-between'
            }
          },
          selectedDayTextColor: '#017aea'
        }}
        hideArrows={false}
        markingType={'period'}
        minDate={'2012-05-10'}
        maxDate={'2070-05-30'}
        onDayPress={handleDayPress}
        onDayLongPress={day => { }}
        monthFormat={'MMMM yyyy'}
        onMonthChange={month => { }}
        hideExtraDays={true}
        firstDay={1}
        onPressArrowLeft={substractMonth => substractMonth()}
        onPressArrowRight={addMonth => addMonth()}
      />

[Kleinhummel]

@Kleinhummel , I recreated your code less any custom code you have provided. On my end, it's fine.

I can see the problem - if you are using custom style settings, you may have to play around with the padding and margins of the week and days, since the bold font could be messing up with the design.

Did you try using the calendar without the bold?

And yes, the bold font family was also responsible for a small part of the shift. What can I do about this if I want to use the font? When I use the font again, then a very small part of the marking period is still cut off...

Font family: Sequel Sans Black Body

[Nemferno]

I suggest playing around with the theme padding. Use the following theme IDs to adjust padding: 'stylesheet.day.basic' (Day Component) [More Types in Here, Look for style.css for Theme IDs], 'stylesheet.calendar.header', 'stylesheet.calendar.main' (Main Container).

[Kleinhummel]

I suggest playing around with the theme padding. Use the following theme IDs to adjust padding: 'stylesheet.day.basic' (Day Component) [More Types in Here, Look for style.css for Theme IDs], 'stylesheet.calendar.header', 'stylesheet.calendar.main' (Main Container).

padding, width and height have no useful effect when using inside 'stylesheet.day.basic' or 'stylesheet.calendar.main'...Using justifyContent: 'space-around' inside 'stylesheet.calendar.header' instead of justifyContent: 'space-between' fixed the aligning problem for me.
Now the last little problem is this minimal cut-off when using the font described above ^^