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

[lbenz]

Actually to open and close programmatically the Agenda thanks to the knob i use the method toggleCalendarPosition():

<TouchableOpacity
  onPress={() => {
    agendaRef.current.toggleCalendarPosition(true); // or false if you want to close
  }}>
  <Text>Open/close</Text>
</TouchableOpacity>

[Brayden-kwak]

Actually to open and close programmatically the Agenda thanks to the knob i use the method toggleCalendarPosition():

<TouchableOpacity
  onPress={() => {
    agendaRef.current.toggleCalendarPosition(true); // or false if you want to close
  }}>
  <Text>Open/close</Text>
</TouchableOpacity>

could you show me full code that I can fully understand? I don't understand where the 'agendaRef' came from. Thanks

[lbenz]

@Brayden-kwak, agendaRef is a reference to the Agenda component that is rendered, take a look at this sample:

import React, {useRef} from "react";
import {Text, TouchableOpacity} from "react-native";
import {Agenda} from "react-native-calendars";

function AgendaTestComponent(props) {
    const agendaRef = useRef(null);

    return (
        <>
            <TouchableOpacity
                onPress={() => {
                    agendaRef.current.toggleCalendarPosition(true); // or false if you want to close
                }}>
                <Text>Open/close</Text>
            </TouchableOpacity>

            <Agenda
                ref={agendaRef}
                items={[]}
            />
        </>
    )
}

[Brayden-kwak]

@lbenz Cool! Thanks! Can I apply it to the AgendaList? I'm stuck into apply .svg icon(knob icon file) to the AgendaList with ExpandableCalendar.

<CalendarProvider date={moment(customDate).format('YYYY-MM-DD')} onDateChanged={handleDayChange} showTodayButton style={{ width: screenWidth, height: screenHeight, marginTop: 20, marginBottom: 20, }}> <ExpandableCalendar markedDates={markedDates} markingType={'custom'} firstDay={7} allowShadow={false} renderHeader={date => renderHeader(date)} animateScroll onCalendarToggled={onCalendarToggled} calendarWidth={screenWidth} renderArrow={renderArrow} theme={calendarTheme} style={{ borderRadius: 15, width: screenWidth, overflow: 'hidden', }} /> <AgendaList viewOffset={50} markToday={true} sections={formattedSectionData} renderItem={renderItem} sectionStyle={{ width: screenWidth * 0.9, }} />