Agenda toggle knob with a function

[elliscwc]

This might related to #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,
}}
/>