Angular-calendar: can not scroll down and up with finger in event container on mobile

[eltonec]

Describe the bug

Minimal reproduction of the problem with instructions

Screenshots

Versions

• @angular/core:
• angular-calendar:
• Browser name and version:

[eltonec]

"@angular/core": "6.1.6"
angular-calendar": "0.26.0
chrome 68.0.3440.106

[mattlewis92]

This is caused by hammerjs as it adds touch-action: none to all clickable areas which prevents scrolling. If you add this to your apps global css it should fix it:

mwl-calendar-month-cell,
mwl-calendar-day-view-hour-segment, 
mwl-calendar-week-view-hour-segment {
  touch-action: auto !important;
}

Hope that helps! 😄

[eltonec]

thanks for your reply, i had put the style in styles.scss but still not
work, i will try again.

Matt Lewis [e-mail] 於 2018年9月13日 週四 下午12:55寫道：

This is caused by hammerjs as it adds touch-action: none to all clickable
areas which prevents scrolling. If you add this to your apps global css it
should fix it:

mwl-calendar-month-cell,
mwl-calendar-day-view-hour-segment,
mwl-calendar-week-view-hour-segment {
touch-action: auto !important;
}

Hope that helps! 😄

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mattlewis92/angular-calendar/issues/724#issuecomment-420883155,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjPyS5Hr8EahbxvfNclFPCQ9vSAclBuBks5uaeVbgaJpZM4Wknjs
.

[eltonec]

i get the styles from calendar component on day click event, and i get
touch-action = auto but still can not scroll in finger on iphone:

dayClicked(day: CalendarMonthViewDay): void
{
const date: Date = day.date;
const events: CalendarEvent[] = day.events;

const e = document.querySelector('mwl-calendar-month-cell');
console.log(window.getComputedStyle(e).getPropertyValue('touch-action'));

elton chang [e-mail] 於 2018年9月14日 週五 下午6:46寫道：

thanks for your reply, i had put the style in styles.scss but still not
work, i will try again.

Matt Lewis [e-mail] 於 2018年9月13日 週四 下午12:55寫道：

This is caused by hammerjs as it adds touch-action: none to all
clickable areas which prevents scrolling. If you add this to your apps
global css it should fix it:

mwl-calendar-month-cell,
mwl-calendar-day-view-hour-segment,
mwl-calendar-week-view-hour-segment {
touch-action: auto !important;
}

Hope that helps! 😄

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mattlewis92/angular-calendar/issues/724#issuecomment-420883155,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjPyS5Hr8EahbxvfNclFPCQ9vSAclBuBks5uaeVbgaJpZM4Wknjs
.

[wendlandreas]

@mattlewis92 your proposed fix works great for all platforms/browsers except ios. is there a solution that works on safari/mobile safari?

[wendlandreas]

I found a working solution using this approach.
Instead of

if (element.attributes['data-mc-options']) {
  try {
    let parseOptions = JSON.parse(element.attributes['data-mc-options'].nodeValue);
    options = parseOptions;
  } catch(err) {
    console.error('An error occurred when attempting to parse Hammer.js options: ', err);
  }
}

I use

if (element.localName === 'mwl-calendar-month-cell') {
    try {
    let parseOptions = { "touchAction": "pan-y" };
    options = parseOptions;
    } catch (err) {
    console.error('An error occurred when attempting to parse Hammer.js options: ', err);
   }
}

I am using month view only, so for week/day view you have to add the condition respectively.
Not pretty but it works.

[mattlewis92]

Oh nice find @wendlandreas, I'll add that to the demo + readme to help others, thank you! 😄

[Titusvimalraj]

This solved my issue of vertical scrolling now scrolling works fine on Mobile mode, as said hammerjs config needs to be modified and following is the demonstration.
https://github.com/angular/angular/issues/10541#issuecomment-425593795

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pan: {
direction: 6
},
pinch: {
enable: false
},
rotate: {
enable: false
}
};
}

@NgModule({
// ... declarations, imports,
providers: [
// ...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: CustomHammerConfig
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}