React-native-calendars: Agenda toggle knob with a function

[elliscwc]

This might related to https://github.com/wix/react-native-calendars/issues/309

I want to show the calendar list with a call of the function in the agenda component, is there a way to do it correctly? Someone has suggested this way but is no longer working

function Agenda(props) {
  const agenda = useRef(null);

  useEffect(() => {
    // doesn't work anymore
    agenda.current.setScrollPadPosition(0, true);
    agenda.current.enableCalendarScrolling();

    // suggestion?
    const animated = false;
    agenda.current.toggleKnob(animated);
  }, []);

  return (
    <Agenda
      ref={agenda}
      items={[]}
      renderItem={() => <View />}
      renderEmptyDate={() => <View />}
      renderEmptyData={() => <View />}
      rowHasChanged={(r1, r2) => r1.text !== r2.text}
      refreshing={false}
      style={styles.container}
    />
  );
}

[jraleman]

This will be a cool feature to have!

[Inbal-Tish]

@elliscwc Do you mean open/close Agenda's calendar programmatically?

[elliscwc]

Yes, @Inbal-Tish. it would be helpful when it can be activated via other buttons on the screen!

[flobady]

Hello, I was able to solve my problem with below snippets.

First solution: you can play with the initPos value to open or close the agenda:
<Button title="knob" onPress={() => { let initPos = refAgenda.current.initialScrollPadPosition() refAgenda.current.setScrollPadPosition(initPos, true)} }>

Second solution: you mock a date selection with:
<Button title="knob" onPress={() => { refAgenda.current.chooseDay(new Date(), true)} }>

[waynedunkley]

For those that find this post and are looking for a solution when using the ExpanableCalendar within a CalendarProvider such as:

<CalendarProvider date={current} onDateChanged={onDateChanged}>
  <ExpandableCalendar
    ref={ref}
    {...props}
  />
</CalendarProvider>

The solutions are very similar to @flobady but with different methods.

To simulate day press:

const closeCalendar = () => {
  ref.current.contentRef.onDayPress({ dateString: '2021-03-20' })
}

Set calendar to initial position:

const closeCalendar = () => {
    const { closedHeight } = ref.current.contentRef
    ref.current.contentRef.bounceToPosition(closedHeight)
  }