react-native-calendar-kit
react-native-calendar-kit copied to clipboard
srolling in december month any views next year not going
in week view in december in 2024 scoll to change the next year but next year not scrolling.. previous year is scrolling but not going to next year
This is due to the minDate
and maxDate
being 2 years from the current date.
- You can either extend these dates to more years.
- You can even re-render the Calendar by giving it a new key if it gets out of this window, though this is a very hacky way to do this.
I've implemented both of these :-
const calendarRef = useRef<TimelineCalendarHandle>(null)
// Updating this will re-render the calendar entirely
// (mainly used when we need to get out of min and max date window)
const [initialDate, setInitialDate] = useState(new Date())
const minDate = useRef(addYearsToDate(new Date(), -3))
const maxDate = useRef(addYearsToDate(new Date(), 3))
const goToDate = (date: Date, scrollHour?: boolean) => {
if (date < minDate.current || date > maxDate.current) {
// re-render calendar if window is exceeded
setInitialDate(date)
} else {
calendarRef.current?.goToDate({
date: date.toISOString(),
animatedDate: true,
animatedHour: scrollHour,
hourScroll: scrollHour,
})
}
}
<TimelineCalendar
key={initialDate.toISOString()}
ref={calendarRef}
initialDate={formatDate(initialDate, DateFormat.FullYearMonthDay)}
minDate={formatDate(minDate.current, DateFormat.FullYearMonthDay)}
maxDate={formatDate(maxDate.current, DateFormat.FullYearMonthDay)}
/>