Problem with ionic v5.4.2 (2020-11-05)

[GroupeBEL]

Hello,

I use this calendar in a modal based in this tutorial : https://devdactic.com/ionic-5-calendar-modal/

All was working fine until I updated the new version of ionic , the calendar (with events) showed some bugs.

when I open the modal , the calendar is not clickable then I try to swipe=

• I swipe to left I got month+1
• I swipe to right I got the current month with events

Did any one have the same problem ?

[twinssbc]

@GroupeBEL Which version of ionic and Angular are you using? Any error is displayed in the console?

[GroupeBEL]

@twinssbc no error in console

Ionic:

Ionic CLI : 6.12.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.4.1. -> If I update I got the problem
@angular-devkit/build-angular : 0.901.10
@angular-devkit/schematics : 9.1.10
@angular/cli : 9.1.10
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 11 other plugins)

Utility:

cordova-res (update available: 0.15.2) : 0.15.1
native-run (update available: 1.2.2) : 1.0.0

System:

Android SDK Tools : 26.1.1
ios-deploy : 1.11.1
ios-sim : 8.0.2
NodeJS : v12.18.3 (/usr/local/bin/node)
npm : 6.14.8
OS : macOS Big Sur
Xcode : Xcode 12.2 Build version 12B45b

You may find this demo:
ionic version 5.4.1 : https://drive.google.com/file/d/1WB_OFYxhEuHVV1je62N5lEafZ0zY6z12/view?usp=sharing
ionic latest version : https://drive.google.com/file/d/1t97H4_JilVuiGQccrOBzhLFKY7VuHYvt/view?usp=sharing

[twinssbc]

@GroupeBEL Which Ionic calendar version are you using? Maybe it will be helpful if you could provide the full package.json

[GroupeBEL]

@twinssbc ionic2-calendar": "^0.6.6

{
  "name": "",
  "version": "0.0.1",
  "author": "",
  "homepage": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@ionic-native/camera": "^5.29.0",
    "@ionic-native/core": "^5.29.0",
    "@ionic-native/file": "^5.29.0",
    "@ionic-native/file-path": "^5.29.0",
    "@ionic-native/firebase-analytics": "^5.29.0",
    "@ionic-native/ionic-webview": "^5.29.0",
    "@ionic-native/splash-screen": "^5.29.0",
    "@ionic-native/status-bar": "^5.29.0",
    "@ionic/angular": "^5.4.1",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^5.0.0",
    "client-oauth2": "^4.3.3",
    "cordova-android": "9.0.0",
    "cordova-ios": "^6.1.0",
    "ionic2-calendar": "^0.6.6",
    "ionic4-auto-complete": "^2.9.2",
    "moment": "^2.27.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@ionic/angular-toolkit": "^2.3.3",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-camera": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-filepath": "^1.5.8",
    "cordova-plugin-firebase-analytics": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-support-android-plugin": "^1.0.2",
    "cordova-support-google-services": "^1.4.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-firebase-analytics": {
        "ANALYTICS_COLLECTION_ENABLED": "true",
        "AUTOMATIC_SCREEN_REPORTING_ENABLED": "true",
        "ANDROID_FIREBASE_ANALYTICS_VERSION": "18.0.+"
      },
      "cordova-plugin-androidx-adapter": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

[GroupeBEL]

@twinssbc
here is a demo code : https://github.com/GroupeBEL/calendar2-ionic-bug

first time it works , then when you try to open it again, it shows the bug.

[twinssbc]

@GroupeBEL
This is due to the calendar needs to be rendered after the modal dialog is completely present.
I slightly increase the timeout to 100, then the calendar will work as expected.
Maybe you could also try hook to the ionModalDidPresent event, which probably can provide more accurate timing.

  ngAfterViewInit() {
    setTimeout(() => {
      console.log('modal ready');
      this.modalReady = true;
    }, 100);
  }

[GroupeBEL]

@twinssbc yes my bad, thank you so much , this resolved the problem. I don't know why set the value to 0. I think using a variable like this is as a workaround. So maybe in future we will have an adaptation with modals implementation since I assume the view wasn’t rendered correctly and something internally broke.