React-native-calendars: Question: How to jump to a specific month

[take]

Hi thanks for the awesome library :)
This is just a question so please feel free to close this issue if it's impossible in the current state of this library.

Is there a way to scroll/jump the library page to a specific month?

Thanks,

[emilisb]

Do you mean to jump to a specific month after the calendar is already visible (for example, after pressing a button), or to open the month initially?

If you mean the latter:
current={'2012-03-01'}

[take]

@emilisb hi thanks for the response, I mean the first :)

[jzheng1994]

@take I had this same question and dug through the code a bit.

  // Create ref for calendar 
  const calendarRef = useRef(null);

  // Attach ref to calendar component 
  <CalendarList
        ref={calendarRef} 
   />

   // Pass in date that you want to scroll to in the first argument
  calendarRef.current.scrollToDay(new Date(), undefined, true);

The source code for the scrollToDay function is located here

[take]

oooo thanks! 🎉 @jzheng1994

[knif147]

Hi @jzheng1994, I don't see function scrollToDay in ref of the calendar. So I can't execute this. Can you give me some help?

[benni2108]

@take I had this same question and dug through the code a bit.

  // Create ref for calendar 
  const calendarRef = useRef(null);

  // Attach ref to calendar component 
  <CalendarList
        ref={calendarRef} 
   />

   // Pass in date that you want to scroll to in the first argument
  calendarRef.current.scrollToDay(new Date(), undefined, true);

The source code for the scrollToDay function is located here

What is the correct implementation of that code.
I am always getting an "invalid hook call" error.
Is there a way where I can by the "createRef" function for the same result?

[KurtMar]

@benni2108
I got createRef to work. Here's an example of propagating the month change from one calendar to another.

TypeScript:

import React from 'react'
import { createRef, RefObject } from 'react'
import XDate from 'xdate'
import { View } from 'react-native'
import { Calendar, DateObject } from 'react-native-calendars'

interface CalendarRefCurrent {
  updateMonth: (day: XDate, doNotTriggerListeners: boolean) => void
}

const MyCalendars = () => {
  const myRef1 = createRef<any>()
  const myRef2 = createRef<any>()

  const propagateMonthChange = (refTarget: RefObject<CalendarRefCurrent>, date: DateObject) => {
    refTarget.current.updateMonth(new XDate(date.year, date.month - 1, date.day), true)
  }

  return (
    <View style={{flex: 1}}>
      <Calendar ref={myRef1} onMonthChange={(date) => propagateMonthChange(myRef2, date)} />
      <Calendar ref={myRef2} onMonthChange={(date) => propagateMonthChange(myRef1, date)} />
    </View>
  )
}

export default MyCalendars

JavaScript:

import React from 'react'
import { createRef, RefObject } from 'react'
import XDate from 'xdate'
import { View } from 'react-native'
import { Calendar, DateObject } from 'react-native-calendars'

const MyCalendars = () => {
  const myRef1 = createRef()
  const myRef2 = createRef()

  const propagateMonthChange = (refTarget, date) => {
    refTarget.current.updateMonth(new XDate(date.year, date.month - 1, date.day), true)
  }

  return (
    <View style={{flex: 1}}>
      <Calendar ref={myRef1} onMonthChange={(date) => propagateMonthChange(myRef2, date)} />
      <Calendar ref={myRef2} onMonthChange={(date) => propagateMonthChange(myRef1, date)} />
    </View>
  )
}

export default MyCalendars

[filipearena]

@take I had this same question and dug through the code a bit.

  // Create ref for calendar 
  const calendarRef = useRef(null);

  // Attach ref to calendar component 
  <CalendarList
        ref={calendarRef} 
   />

   // Pass in date that you want to scroll to in the first argument
  calendarRef.current.scrollToDay(new Date(), undefined, true);

The source code for the scrollToDay function is located here

This made my day. Thank you kind sir, you are the real MVP.

[emilisb]

Please have in mind that this solution is not documented and it depends on the internals of the component. If we rename the method, this solution will stop working. We will try to not introduce breaking changes though, I will make sure we document this behaviour properly :)