React-native-calendars: Agenda - Datepicker without Scrollview?

[maks-io]

Description

Is it possible to only use the "header" (date picker) of the Agenda component?

Expected Behavior

The component should only show the date picking section (like here).
The agenda itself / the vertical scroll list should be hidden.

Thanks in advance!

[josefleventon]

Bumping this.

[chenei]

Do you mean something like this?
https://ibb.co/bHvKpfY

[chenei]

@josefleventon I just removed the <AgendaList/> from the example.
https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.js#L184

Not sure what is the use case.

[maks-io]

@chenei What i would need is something, like it is shown in your Agenda gif, but only the "header part" of it:

In other words, i would like to have my app's header display a date picker that only shows one entire week at a time, and when you click on it (or pull down) it would then show entire months, also like in your gif.
What I don't need in my use case however, is the agenda/scroll list itself.

[chenei]

This code is taken from our example file (this is how it looks - https://ibb.co/6vxT7XM):

<CalendarProvider
        date={ITEMS[0].title}
        onDateChanged={this.onDateChanged}
        onMonthChange={this.onMonthChange}
        disabledOpacity={0.6}
        // theme={{
        //   todayButtonTextColor: themeColor
        // }}
        // todayBottomMargin={16}
      >
        <ExpandableCalendar
          testID={testIDs.expandableCalendar.CONTAINER}
          // horizontal={false}
          // hideArrows
          // disablePan
          // hideKnob
          // initialPosition={ExpandableCalendar.positions.OPEN}
          // calendarStyle={styles.calendar}
          // headerStyle={styles.calendar} // for horizontal only
          // disableWeekScroll
          // theme={this.getTheme()}
          firstDay={1}
          markedDates={this.getMarkedDates()}
          leftArrowImageSource={require('../img/previous.png')}
          rightArrowImageSource={require('../img/next.png')}
        />
        <View style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1
        }}>
          <Text style={{fontSize: 30}}>Anything you want</Text>
        </View>
      </CalendarProvider>

You can use hideKnob to disable viewing all month. I hope it helps.

[maks-io]

@chenei Thank you very much, this was really helpful. I was not aware of the fact that we can directly import "sub components" like the ExpandableCalendar etc.
From my side this is resolved - you may close this in my opinion.
Thanks again!

[KristineTrona]

I think you should include the ExpandableCalendar in your Readme, it is exactly the feature I was looking for and took so long to find it, I am sure there are others having the same problem.

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