Support for custom CalendarHeader

[varunon9]

Description

Feature Request-

We should be able to implement our own Calendar Header, e.g. I want both navigation arrows to be on right side and Today's date in left side.

Expected Behavior

It should support custom header.

Observed Behavior

Right now there is no support for custom header.

[IronTony]

@varunon9 hi, the numbers under the date are a custom mod of this package?

[varunon9]

That is custom Day component dayComponent={CalendarDayComponent}
If you are interested in implementing something like above mock, read the story here-
https://medium.com/@varunon9/how-i-built-horizontal-as-well-as-grid-calendar-in-react-native-using-react-native-calendars-eb7a2edcc5db

[IronTony]

you are the man. thank you so much for the answer and the tutorial

[hernanif1]

The way I found of achieving it:

// inside the theme property
'stylesheet.calendar.header': {
      headerContainer: {
        backgroundColor: 'orange',
        position: 'absolute',
        flexDirection: 'row',
        left: 0,
        gap: 20,  // because of the loader spinner 'displayLoadingIndicator' if its active 
      },
      header: {
        backgroundColor: 'purple', 
        flexDirection: 'row',
        justifyContent: 'flex-end',
        paddingLeft: 10,
        paddingRight: 10,
        marginTop: 6,
        alignItems: 'center',
      },
    },

this will make your component header to look like as this:

But, the right arrows will be on top of the left arrow because of the hitslop.
Since the arrow has a touchable component around it, and it doesn't accept a gap, the only way I found was adding a custom icon with some margin/padding:

      <Calendar
        renderArrow={direction =>
          direction === 'right' ? (
            <ScheduleArrow direction="right" />
          ) : (
            <ScheduleArrow direction="left" className="mr-10" />
          )
        }
        ...

Now it works correctly in my case:

// lib version 
"react-native-calendars": "^1.1300.0",

If you are using typescript:
I also had to add a workaround in TS

type HeaderStyleSheet = {
    'stylesheet.calendar.header': Record<
      'headerContainer' | 'header',
      ViewStyle
    >;
  };
  const themeDark: CalendarProps['theme'] & HeaderStyleSheet = {
    calendarBackground: tailwindColors.zinc[900],
    arrowColor: tailwindColors.white,
    dayTextColor: tailwindColors.white,
    textDisabledColor: tailwindColors.zinc[600],
    textSectionTitleColor: tailwindColors.gray[500],
    selectedDayBackgroundColor: tailwindColors.indigo[500],
    selectedDayTextColor: tailwindColors.white,
    textDayFontFamily: 'Roboto',
    textMonthFontFamily: 'Roboto',
    textDayHeaderFontFamily: 'Roboto',
    textDayFontWeight: 'bold',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: 'bold',
    monthTextColor: tailwindColors.white,
    todayTextColor: tailwindColors.indigo[400],
    dotColor: tailwindColors.indigo[600],
    'stylesheet.calendar.header': {
      headerContainer: {
        position: 'absolute',
        flexDirection: 'row',
        left: 0,
        gap: 20,
      },
      header: {
        flexDirection: 'row',
        justifyContent: 'flex-end',  
        paddingLeft: 10,
        paddingRight: 10,
        marginTop: 6,
        alignItems: 'center',
      },
    },
  };
  

[thundron]

@hernanif1 I tried your solution but absolutely nothing happens, I'm not sure why - version is v1.1301