React-native-calendars: week-view

[ciaoamigoschat]

How can I activate the view per week? Is there a way?

[ihsanktmr]

Yes there is actually but not good practise.
use this first;

 <CalendarProvider>
      <ExpandableCalendar firstDay={1}
                                            disablePan={true} //we need this
                                            disableWeekScroll={true}/>
 </CalendarProvider>

and then we need to change internal style of expandable calendar to do this middle-click to ExpandableCalendar and you should see class index.js of ExpandableCalendar
change Knob container height to 0 it should be as following

const KNOB_CONTAINER_HEIGHT = 0; //normally its 20

in the same class index.js you should find renderKnob() and find the knobContainer style file to do this do a middle-click to knobContainer not to the style

renderKnob() {
    // TODO: turn to TouchableOpacity with onPress that closes it
    return (
      <View style={this.style.knobContainer} pointerEvents={'none'}>
        <View style={this.style.knob} testID={CALENDAR_KNOB}/>
      </View>
    );
  }

and go to style.js change backgroundColor of knobContainer and knob to transparent it should be as follows;

knobContainer: {
      position: 'absolute',
      left: 0,
      right: 0,
      height: 24,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'transparent'// normally it is  appStyle.calendarBackground
    },
    knob: {
      width: 40,
      height: 4,
      borderRadius: 3,
      backgroundColor: 'transparent'    //normally it is e8ecf0
    },

it should display like in the screenshot below view for weekly display

[ihsanktmr]

added props disablePan={true} //we need this

[ciaoamigoschat]

Thanks for your answer. But I meant it as https://github.com/hoangnm/react-native-week-view.
I have tried react-native-week-view but it works badly and is full of bugs.

[Inbal-Tish]

@ciaoamigoschat You can use ExpandableCalendar and disable the pad using disablePan prop, and hideKnob prop. And you can use our new WeekCalendar component for a minimalist week view.
react-native-week-view is completely another product.

[BigNews31]

Hello, is it possible to see an implementation of the WeekCalendar component ?

I have tried to use it, but day numbers do not display well (not aligns with day names).
ihsanktmr solution work well, but i would like to keep the scroll functionality.

Thank you :)

[Inbal-Tish]

implementation
usage

[ramdhanymf]

Hello, does ExpandableCalendar support all Calendar props? onDayPress seems doesnt work.

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