React-native-calendars: How to show current month's name in Agenda component

[dani-mp]

Is there a way of showing the current month when the component is in Agenda mode? Showing only the week of the currently selected day is not enough to give the proper context to the user, in my opinion.

[crice88]

I am assuming you are asking that if I have the week of 3/10 - 3/16 selected, you'd like to see agenda items that extend beyond these dates?

[dani-mp]

No, sorry, just re-read my comment and it wasn't clear enough. I meant the name of the month of the selected day.

[crice88]

Are you trying to have it render with the header?? I know you could use the renderDay prop to create your own 'day' component. Then include the month that way. Haven't found a way to modify the weekly header...

[dani-mp]

Yeah, I don't know if as a header, as you can put the whole component within a navigation stack, but definitely I think it lacks a way of showing the current month somewhere, either on the component where you can select a day, or grouping the days in the list, as iOS does in its native calendar.

[afacar]

This is exactly what I need too. Is there any solution yet for this?

[fa16mscs0004]

I have the same issue ..any progress on this ?

[afacar]

I tried a couple of tricks to show only the month in the header but no success yet :< Any help is still appreciated.

[JordanProtin]

Hi,

I've achieved this issue using onDayPress props and moment.

<Text>{this.state.currentMonth}</Text>
<Agenda
 .......
 onDayPress={this.onUpdateSelectedDate}
/>

onUpdateSelectedDate(date) => {
  this.setState({ currentMonth: `${moment(date.dateString).format('MMMM')}` })
}

[afacar]

@JordanProtin Very nice and practical solution. Then, how can you hide the header. It takes a lot of space and not very necessary in my case.

[JordanProtin]

@afacar Something like this ?

<Agenda
  .......
  theme={{
    'stylesheet.calendar.header': {
      header: {
        height: 0
      },
      week: {
        height: 0
      }
    }
  }}
/>

[afacar]

@JordanProtin I tried but it doesn't hide the header :/

[jordan-tpz]

@afacar I see this feature is not implemented.. Currently, you should use this header using agenda component..

[paulica40]

how did you put 2 components {this.state.currentMonth}
.......
onDayPress={this.onUpdateSelectedDate}
/>
in the same return statement?

i've wraped them in still not working

[erdenayozkanl]

Hi, just you need to delete monthFormat.

[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.

[snoop24]

@afacar Something like this ?

<Agenda
  .......
  theme={{
    'stylesheet.calendar.header': {
      header: {
        height: 0
      },
      week: {
        height: 0
      }
    }
  }}
/>

But if the user change month while scrolling, this month state will not change.

[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.