react-native-calendar-kit icon indicating copy to clipboard operation
react-native-calendar-kit copied to clipboard

srolling in december month any views next year not going

Open MAYILERUMPERUMAL opened this issue 1 year ago • 1 comments

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

MAYILERUMPERUMAL avatar Jan 03 '24 10:01 MAYILERUMPERUMAL

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)}
/>

paritosh-34 avatar Jun 18 '24 18:06 paritosh-34