Use React-Calendar with react-swipeable

[MDcod]

Hi!
I am trying to use this library react-swipeable to swipe months back and forth. Unfortunately, the direct solution does not work. Swipes are not processed.

const handlers = useSwipeable({
  onSwiped: (eventData) => console.log("User Swiped!", eventData),
});

return (
  <Calendar
    {...handlers}
    onChange={onChange}
    value={value}
  />
);

Is there any way to do this?

[wojtekmaj]

React-Calendar accepts ref, but ref points to Calendar component and its internals, and not the wrapper rendered by Calendar. handlers returned by useSwipeable is just { ref } from what I can see, and I assume ref expects to be hooked to a DOM element, not React component. That's why it doesn't work.

If you rename ref to inputRef in handlers, it works!
https://codesandbox.io/s/react-calendar-react-swipeable-kxw92

If you're thinking what I'm thinking, here's how to implement switching views with swipe. You'll need to have activeStartDate and view controlled so that onSwiped has some data to begin with.
https://codesandbox.io/s/react-calendar-react-swipeable-change-view-on-swipe-f0p4i

Please note that we're hacking handlers a little bit here, which should make you super careful when updating react-swipeable.

[MDcod]

Ideally!
Thank you very much!

[MDcod]

@wojtekmaj But there is one small problem in your example, when you try to navigate to neighboring months, by clicking on the dates of the neighboring month, an exception is thrown.

Error
Failed to get year from date: [object Object].

Otherwise, the same error crashes when you click on any button in the navigation, but I still hide the navigation, so this is not a problem for me, but clicking on the days of the next month is critical
I can’t figure out how to solve this on the fly...

[MDcod]

Switching months fixed as follows:

...
 const onActiveStartDateChange = (props) => {
   var isNextMonth = props.activeStartDate.getTime() > value.getTime();
   if (isNextMonth) {
     setActiveStartDate(getBeginNext(view, activeStartDate));
   } else {
     setActiveStartDate(getBeginPrevious(view, activeStartDate));
   }
 };

 return (
   <div>
     <h1>Calendar</h1>
     <Calendar
       {...handlersWithRefRenamed}
       activeStartDate={activeStartDate}
       onActiveStartDateChange={onActiveStartDateChange}
       ...

But of course there are still problems in the navigation bar.

[wojtekmaj]

Sorry, I missed onActiveStartDateChange bit. Updated my sandbox.

[laocker96]

MDcod

Have you solved exception thrown in the navigation bar?

[laocker96]

@wojtekmaj is there a chance to get this implemented in react-calendar package?