Making Calendar view default with Agenda

[fithaN]

Description

Is there a way to show the calendar view with selectable dat and arrows in the screen as default? And open the agenda view when a date is clicked?

[tautvilas]

Hi, could you define your requirements in more detail?

[Dmytro96]

Hi, sure. Some people doesn't know how to close the Agenda. Can you implement feature for control initial state of the closed Agenda?

[nikojohnarellano]

+1 for this feature. Based from user experience feedback, some users may will want to select a date first in the calendar view rather than being a locked first on the default week.

[fithaN]

@tautvilas Yes. So basically the view will show the calendar with the selectable dates /dates with dots in it. Once we click on one of the dates the agenda view appears. I think its kind of a way to better make it user friendly and easy to use as Dmytro96 suggested.

[odesey]

During beta testing most of my user's didn't realize that the "knob" was a clickable button.

I changed the knob to an icon but would prefer if the Agenda would start as a calendar list. This would train the user immediately that they can switch between calendar views.

[ygalustov]

@odesey @nikoootine

Hey, @Dmytro96 actually implemented that in this fork: https://github.com/ygalustov/react-native-calendars.

A new prop added: isDefaultViewCalendar

The only thing is that the fork is not synced with the upstream yet. I might need to do that and push changes back to upstream.

[fernandoantunes]

Hi @ygalustov, what day will sync with the upstream? I'm having the same problem and would like to use the new functionality.

[fernandoantunes]

Hi @tautvilas, what day will sync with the npm?

[tautvilas]

this has not been proposed as PR so not going to master branch yet @fernandoantunes

[ygalustov]

@fernandoantunes Sorry guys, was extremely busy these days, will try to smash it soon

[fernandoantunes]

Very good, we'll be waiting, Thanks @ygalustov

[julienkessels]

Thank you @ygalustov , this is going to be a great adding!

[cylim]

Not so good solution for switch to calendar view programmatically

this.agenda.setScrollPadPosition(0, true);
this.agenda.enableCalendarScrolling();

Because I am using other buttons than the knob to trigger it, so I have to run the knob code manually.

[fernandoantunes]

@cylim in which snippet of code did you put it?

[hszeto]

is this feature on master yet?

[lakhman]

I used the following to toggle the calendar via a button in the navigation bar.

You can toggle it via the static method YourComponentName.toggleCalendar()

1. Store the component in a ref
2. Create the "toggleCalendar" method
3. Toggle it where ever you want via the static method.

/**
 * A ref to store our agenda component in
 */
let agendaRef = React.createRef();

/**
 * Toggle the calendar programatically
 */
static toggleCalendar() {
    if (agendaRef.state.calendarScrollable) {
        agendaRef.setScrollPadPosition(agendaRef.initialScrollPadPosition(), true);
        agendaRef.setState({ calendarScrollable: false })
        agendaRef.calendar.scrollToDay(agendaRef.state.selectedDay.clone(), agendaRef.calendarOffset(), true);
    } else {
        agendaRef.setScrollPadPosition(0, true);
        agendaRef.enableCalendarScrolling();
    }
}

/**
 * Store the agenda component in a ref so we can toggle it programatically.
 */
render() {
    <AgendaView ref={(ref) => agendaRef = ref}
        {...otherProps}
    />
}

Hope this helps someone. 👍

[DavitVosk]

So this is how I solved the calendar closing problem:

<Agenda .... ref={ref => (agendaRef = ref)} onCalendarToggled={calendarOpened => this.setState({ calendarOpened })} onDayPress={day => { this.state.calendarOpened && agendaRef.setScrollPadPosition(0, true); }} />

[webdevsyd]

Is this already merge in master?

[DavitVosk]

@webdevsyd if your calendar does not work as in the example of this package, then maybe it is UI problem. I was facing such kind of problems.

[GuillaumeRZ]

Is there any news about the fork ? Creating a PR or something ?

[olivier545]

Is there any news on this feature to have a default view as calendar instead of selected day. Can someone help please ?

[olivier545]

OK, I figured it out based on @cylim answer In module/src/agenda/index.js

onScrollPadLayout() { replaced this.setScrollPadPosition(this.initialScrollPadPosition(), false); by this.setScrollPadPosition(0, true); this.enableCalendarScrolling();

[Apozzi]

I'm in 2022 and it would be great for me to have this feature. Because i needing now.

[fukemy]

this.setScrollPadPosition(0, true); this.enableCalendarScrolling();

love. u

[torver213]

Credit to @lakhman I modified his solution to work with this current version of react-native-calendars": "^1.1275.0 Here is how i did it programmatically

let agendaRef = useRef(null)

  useEffect(() => {
        toggleCalendarAgenda()
      return () => {}
    }, [])
    

    const toggleCalendarAgenda = () =>{
       //wait for the component to mount
        setTimeout(() => {
            if (agendaRef.state.calendarScrollable) {
                agendaRef.setScrollPadPosition(agendaRef.initialScrollPadPosition(), true);
                agendaRef.setState({ calendarScrollable: false })
                agendaRef.calendar?.current?.scrollToDay(agendaRef.state.selectedDay.clone(), agendaRef.calendarOffset(), true);
            } else {
                agendaRef.setScrollPadPosition(0, true);
                agendaRef.enableCalendarScrolling();
            }
        }, 50);
        
    }
  return (<Agenda
        ref={(ref) => agendaRef = ref}       
        // Max amount of months allowed to scroll to the past. Default = 50
        pastScrollRange={50}
        // Max amount of months allowed to scroll to the future. Default = 50
        futureScrollRange={50}
        // Hide knob button. Default = false
        hideKnob={false}
        //other props
    />)

[pawlone]

I have the same version but even with your advice I still have the same problem on iOS. Please provide a solution

[samiiku]

+1