Angular-calendar: In Days View, vertical scroll is disabled on Safari

[sureshdotariya]

Hi

we have integrated this calendar component in our Angular 4 mobile app and web app. ,On IOS 11 and Safari browser (MAC), the day view section is not vertically scrollable if we scroll on hour segments. But we are able to scroll vertically inside the events(pink and yellow boxes).

This same issue is reproducible if we access the demo URL https://mattlewis92.github.io/angular-calendar/#/kitchen-sink in safari browser.

Versions

Angular: 4.3.6

Calendar library: 0.17.4

Browser name and version: Safari 11

[mattlewis92]

It looks like a bug with safari, I'd imagine its probably fixable with a tiny bit of CSS. Would you be able to have a go at fixing it as I'm pretty short of time for OSS atm. This is probably a good place to start: https://www.google.co.uk/search?q=safari+overflow-x%3A+scroll+not+working

This is where overflow-x:scroll is set in the code.

Thanks! 😄

[mattlewis92]

Aha, I think I found a fix for this, it was caused by hammerjs blocking touch events on anything with a click handler. If you add this patch to your global CSS, does it fix it for you?

mwl-calendar-day-view-hour-segment {
    // hacky fix for https://github.com/mattlewis92/angular-calendar/issues/358 and hammerjs breaking scrolling
    touch-action: initial !important;
    user-select: initial !important;
    -webkit-user-drag: initial !important;
}

[sureshdotariya]

Hi,

Sorry for the late reply. We tried adding the above CSS in the global style.css and it's not working.

Please re-open this issue.

Thanks...

[sureshdotariya]

Hi,

We able to fix this by over-riding touchAction from none to 'pan-y' on 'HammerGestureConfig' class in app.module.ts

Here is the code:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;
// to override hammerjs touchAction none to pan-y
export class MyHammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
let mc = new Hammer(element, {
touchAction: "pan-y"
});
return mc;
}
}

//in providers array in NgModule
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}

Tested in Iphone 6, iphone6+ and safari 11.

Thanks...

[akamat35]

Hi,

Tried the solutions elicited above but still having issues scrolling the day view on the calendar on iOS. We need to use hammerjs as we are using Angular Material too. Without hammerjs it seems to be working fine.

Kindly advise.

Thanks,
Ankita

[mattlewis92]

Please can you give 0.23.4 a go, it should have fixed it 😄

[akamat35]

I tried the latest version with 0.23.4. No luck 😒 Should I add the previous fix suggested in this post too?

[mattlewis92]

huh, that's odd, I just double checked the demo on my iphone and it scrolls ok for me. Maybe try the fix suggested from https://github.com/mattlewis92/angular-calendar/issues/358#issuecomment-338950877

[akamat35]

I tried the solution in the comment, but then I have an issue with Angular Material component slide-toggle as it would not drag anymore. Looks like the chicken & egg problem 😒

[amittrehan44]

Any one able to solve this?

[mrvet]

Hello, please help me! Safari on iPhone don't show async events. I'm trying use your example https://mattlewis92.github.io/angular-calendar/#/async-events but on MacOS on Safari browser don't show events