Swipe on Mobile

[rcoundon]

This is an amazingly rich component, so credit and kudos where it's due. I was wondering, for smartphone users, Is there a way to enable swiping to move forwards and backwards through the weeks? If not, is this something that could be in the roadmap?

[rcoundon]

I've managed to achieve swipe capability using vue2-touch-events but would be nice if I could get the same functionality built in

[fratzinger]

how did you achieved this? Would you mind sharing a basic example?

[rcoundon]

@fratzinger I wrapped vue-cal with vue2-touch-events

<span v-touch:swipe="swipeHandler">Vue Cal in here</span>

Then you can define a method that handles the swipe, and methods to move forward and backward by a week (in our case):

    swipeHandler(evt) {
      if (evt === 'left') this.skipWeek(true);
      if (evt === 'right') this.skipWeek(false);
    },
    skipWeek(forward) {
      this.calSelectedDate = add(this.calSelectedDate, {
        weeks: forward ? 1 : -1,
      });
    },

add() is a date-fns function.

[fratzinger]

That was easy 😄 Thanks for your quick answer!

[rcoundon]

That was easy 😄 Thanks for your quick answer!

No worries - glad you have a solution