1

I am trying to use WeekCalendar from react-native-calendars package. I am able to view the WeekCalendar and scroll it. However, I want that on horizontal scroll - the currentDate should be updated to date in that current week and should be updated on the UI. How do I go about this?

I was able to find a solution for onclick but I want on scrolling the current date should be a date from that current week.

<WeekCalendar
              firstDay={1}
              current={selectedDateOfTheWeek}
              onDayPress={(day, localDay) => {
                changeSelectedDateFromCalendar(day.dateString, false);
              }}
              hideExtraDays={false}
              pastScrollRange={24}
              futureScrollRange={24}
              markedDates={{
                [selectedDateOfTheWeek]: {
                  selected: true,
                  selectedColor: "#8660ce"
                }
              }}
            />

selectedDateOfTheWeek stores the date in 'YYYY-MM-DD' format. I am using Redux to manage the state.

j10
  • 2,009
  • 3
  • 27
  • 44

1 Answers1

0

wrap your week calendar with <CalendarProvide and use onDateChanged event

<CalendarProvider
                                        date={this.state.selectedDate.dateString}
                                        onDateChanged={this.onDateChanged}
    
                                        markedDates={{
                                            ...this.state.markedDates,
                                            [this.state.selectedDate.dateString]: {
                                                selected: true,
                                            },
                                        }}
                                    >
                                        <WeekCalendar
                                            testID={testIDs.weekCalendar.CONTAINER}
                                            hideDayNames={true}
                                            firstDay={1}
                                            dayComponent={this.renderDateWeek}
                                            theme={calendarThemes}
                                            calendarWidth={screenWidth}
                                            allowShadow={false}
                                            markedDates={{
                                                ...this.state.markedDates,
                                                [this.state.selectedDate.dateString]: {
                                                    selected: true,
                                                },
                                            }}
                                            pastScrollRange={(new Date().getFullYear() - 1900) * 12}
                                            futureScrollRange={(2099 - new Date().getFullYear()) * 12}
                                            style={[styles.calendar, { paddingBottom: 20, paddingLeft: 0, paddingRight: 0 }]}
                                            onDayPress={(date) => this.changeDate(date.dateString)}
                                        />
    
                                    </CalendarProvider>
Don OzOn
  • 156
  • 8
  • I'd add that the function handling the onDateChanged will receive the attributes date and updateSource (e.g. const handleOnDateChange = (date, updateSource) =>{}) where date is the start of the week in format yyyy-mm-dd and updateSource is weekScroll – David Camargo Jul 14 '23 at 23:28