Angular 9 Issue

[danielehrhardt]

Hi ive tried to upgrade my Angular Project to Version 9 I get this error:

Error: Error on worker #3: Error: Failed to compile entry-point ionic2-calendar due to compilation errors:
node_modules/ionic2-calendar/weekview.js(732,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/dayview.js(543,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/init-position-scroll.js(54,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/calendar.module.js(15,27): error TS-991010: Value at position 0 in the NgModule.declarations of NgCalendarModule is not a reference: [object Map]

    at ClusterWorker.compile (C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\main.js:170:27)
    at Worker.<anonymous> (C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\worker.js:41:42)
    at Worker.emit (events.js:210:5)
    at process.<anonymous> (internal/cluster/worker.js:30:12)
    at process.emit (events.js:210:5)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
    at ClusterMaster.onWorkerMessage (C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:158:27)
    at C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:46:95
    at ClusterMaster.<anonymous> (C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:238:57)
    at step (C:\Projekte\\\node_modules\tslib\tslib.js:136:27)
    at Object.next (C:\Projekte\\\node_modules\tslib\tslib.js:117:57)
    at C:\Projekte\\\node_modules\tslib\tslib.js:110:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Projekte\\\node_modules\tslib\tslib.js:106:16)
    at EventEmitter.<anonymous> (C:\Projekte\\\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:232:32)
    at EventEmitter.emit (events.js:210:5)

when i run: ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

[twinssbc]

@danielehrhardt Which Ionic version are you using? Could you provide all of your dependency versions in the package.json?

[danielehrhardt]

@danielehrhardt Which Ionic version are you using? Could you provide all of your dependency versions in the package.json?

I think it is a problem with Angular. I did a upgrade to Angular 9 (https://next.angular.io/guide/updating-to-version-9)

{
  "name": "",
  "description": "",
  "version": "0.0.5",
  "author": "",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0-rc.0",
    "@angular/common": "~9.0.0-rc.0",
    "@angular/compiler": "~9.0.0-rc.0",
    "@angular/core": "~9.0.0-rc.0",
    "@angular/forms": "~9.0.0-rc.0",
    "@angular/localize": "^9.0.0-next.5",
    "@angular/platform-browser": "~9.0.0-rc.0",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.0",
    "@angular/router": "~9.0.0-rc.0",
    "@angular/service-worker": "9.0.0-rc.0",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@ionic-native/camera": "^5.16.0",
    "@ionic-native/core": "5.16.0",
    "@ionic-native/deeplinks": "^5.16.0",
    "@ionic-native/facebook": "^5.16.0",
    "@ionic-native/file": "^5.16.0",
    "@ionic-native/geolocation": "5.16.0",
    "@ionic-native/image-picker": "5.16.0",
    "@ionic-native/ionic-webview": "^5.16.0",
    "@ionic-native/keyboard": "^5.16.0",
    "@ionic-native/onesignal": "^5.16.0",
    "@ionic-native/splash-screen": "^5.16.0",
    "@ionic-native/status-bar": "^5.16.0",
    "@ionic-super-tabs/angular": "^6.0.0-rc.0",
    "@ionic/angular": "^4.11.3",
    "@ionic/core": "^4.11.3",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@stomp/ng2-stompjs": "^7.2.0",
    "@stomp/stompjs": "^5.4.2",
    "@types/googlemaps": "^3.38.0",
    "@types/lodash": "^4.14.144",
    "@types/sockjs-client": "^1.1.1",
    "@types/stompjs": "^2.3.4",
    "angular2-elastic": "^0.13.0",
    "angular2-moment": "^1.9.0",
    "angular2-swing": "^0.14.0",
    "cordova-android": "^8.1.0",
    "cordova-plugin-sign-in-with-apple": "0.0.4",
    "core-js": "^3.3.5",
    "hammerjs": "^2.0.8",
    "ionic-image-loader": "^7.0.0-beta.2",
    "ionic-swing": "^4.1.1",
    "ionicons": "^4.6.3",
    "moment": "^2.24.0",
    "ngx-autosize": "^1.6.4",
    "ngx-chips": "^2.1.0",
    "ngx-moment": "^3.4.0",
    "rxjs": "6.5.3",
    "rxjs-compat": "^6.5.3",
    "sockjs-client": "^1.4.0",
    "tslib": "^1.10.0",
    "uuid": "^3.3.3",
    "ws": "^7.2.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.900.0-rc.0",
    "@angular-devkit/build-angular": "~0.900.0-rc.0",
    "@angular-devkit/core": "~9.0.0-rc.0",
    "@angular-devkit/schematics": "~9.0.0-rc.0",
    "@angular/cli": "~9.0.0-rc.0",
    "@angular/compiler-cli": "~9.0.0-rc.0",
    "@angular/language-service": "~9.0.0-rc.0",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/schematics-angular": "^1.0.7",
    "@types/jasmine": "^3.4.4",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-facebook4": "^6.2.0",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "ionic-plugin-deeplinks": "^1.0.20",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "onesignal-cordova-plugin": "^2.7.0",
    "protractor": "~5.4.2",
    "translate-json-object": "^2.3.5",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "typescript": "^3.6.4"
  },

}

[ralscha]

I've encountered the same issue. It has something to do with Ivy. When you disable Ivy everything works fine.

Here is a demo application:
https://github.com/ralscha/ionic-calendar-demo In this version Ivy is disabled and ng build and ng build --prod works fine.

But when you enable Ivy, the build process fails. To enable Ivy open tsconfig.json and change "enableIvy": false to "enableIvy": true ng build throws these errors

ERROR in Failed to compile entry-point ionic2-calendar due to compilation errors:
node_modules/ionic2-calendar/weekview.js(732,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/dayview.js(543,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/init-position-scroll.js(54,28): error TS-991010: encapsulation must be a member of ViewEncapsulation enum from @angular/core
node_modules/ionic2-calendar/calendar.module.js(15,27): error TS-991010: Value at position 0 in the NgModule.declarations of NgCalendarModule is not a reference: [object Map]

[sivadinesh1]

yes, this breaks in angular 9, had to remove this wonderful calendar from my project because of this.

[drekinov]

angular 9.0.0 is released. I can confirm that it is not working same way as reported.

[drekinov]

after having Ivy disabled as suggested i got another error in browser (ionic serve):

MonthViewComponent.html:8 ERROR TypeError: Cannot read property 'dayHeaders' of undefined
    at Object.eval [as updateDirectives] (MonthViewComponent.html:8)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:31173)
    at checkAndUpdateView (core.js:30569)
    at callViewAction (core.js:30810)
    at execEmbeddedViewsAction (core.js:30773)
    at checkAndUpdateView (core.js:30570)
    at callViewAction (core.js:30810)
    at execComponentViewsAction (core.js:30752)
    at checkAndUpdateView (core.js:30575)
    at callViewAction (core.js:30810)

ionic 5 with angular 9.0.2 so with ivy i cant compile, without ivy it compile but got that error. it can be related somehow to ionic 5 too.

[bashoogzaad]

I also have this problem. Any idea if this will be fixed?

[Pezloba]

Exact same problem here, right after updating angular to 9.0.1.

Also I tried adding "enableIvy": false in my tsconfig.json but it changes nothing (not sure if I added it up correctly though)

[massimodeluisa]

after having Ivy disabled as suggested i got another error in browser (ionic serve):

MonthViewComponent.html:8 ERROR TypeError: Cannot read property 'dayHeaders' of undefined
    at Object.eval [as updateDirectives] (MonthViewComponent.html:8)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:31173)
    at checkAndUpdateView (core.js:30569)
    at callViewAction (core.js:30810)
    at execEmbeddedViewsAction (core.js:30773)
    at checkAndUpdateView (core.js:30570)
    at callViewAction (core.js:30810)
    at execComponentViewsAction (core.js:30752)
    at checkAndUpdateView (core.js:30575)
    at callViewAction (core.js:30810)

ionic 5 with angular 9.0.2 so with ivy i cant compile, without ivy it compile but got that error. it can be related somehow to ionic 5 too.

Exact same problem here, right after updating angular to 9.0.1.

Also I tried adding "enableIvy": false in my tsconfig.json but it changes nothing (not sure if I added it up correctly though) Is

I solved it just by upgrading the typescript version to the latest release: npm install —save-dev typescript@latest

Hope this will help.

[losorio35]

hello, Ionic2-Calendar only works with ivy disabled, any updates?

[drekinov]

i cant recall but i am pretty sure i tried with ivy disabled and typescript 3.6.x 3.7.x 3.8.x and all compile but then fail with last error i mention in app runtime. i tried to remove everything custom too so during one of my tests i had only <calendar> and same errors because i thought it can be something related to my customized code. if i recall right, angular 9 suppot typescript 3.7.x max. or at least 3.8.x is not mentioned in their changelog yet.

[twinssbc]

guys, I didn't comment on this issue is because it was not clear to me that this issue is specific to this calendar component. Even the latest Ionic 5.0.0 also just has dependency on Angular 8, not 9. And it seems different ways are provided to fix the issue. May I know if you are able to compile successfully without the calendar included in your project?

[iamnels1]

Hi, same problem here with a fresh install of Ionic5 Angular9 on a new project, right after installing the ionic2-calendar component :

[ng] Compiling ionic2-calendar : main as commonjs [ng] chunk {main} main.js, main.js.map (main) 1.99 kB [initial] [rendered] [ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 671 bytes [initial] [rendered] [ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] [ng] chunk {styles} styles.js, styles.js.map (styles) 115 kB [initial] [rendered] [ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered] [ng] ERROR in Failed to compile entry-point ionic2-calendar (main as commonjs) due to compilation errors: [ng] node_modules/ionic2-calendar/weekview.js:744:28 - error NG1010: encapsulation must be a member of ViewEncapsulation enum from @angular/core [ng] 744 encapsulation: ViewEncapsulation.None [ng] ~~~~~~~~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-calendar/dayview.js:555:28 - error NG1010: encapsulation must be a member of ViewEncap sulation enum from @angular/core [ng] 555 encapsulation: ViewEncapsulation.None [ng] ~~~~~~~~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-calendar/init-position-scroll.js:54:28 - error NG1010: encapsulation must be a member of ViewEncapsulation enum from @angular/core [ng] 54 encapsulation: ViewEncapsulation.None [ng] ~~~~~~~~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-calendar/calendar.module.js:15:27 - error NG1010: Value at position 0 in the NgModule. declarations of NgCalendarModule is not a reference: [object Object] [ng] 15 declarations: [ [ng] [ng] 16 MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositio nScrollComponent

(ps) without the calendar compilation is ok

[danielehrhardt]

guys, I didn't comment on this issue is because it was not clear to me that this issue is specific to this calendar component. Even the latest Ionic 5.0.0 also just has dependency on Angular 8, not 9. And it seems different ways are provided to fix the issue. May I know if you are able to compile successfully without the calendar included in your project?

Yes we are able to build the Project without the Calendar

[danielehrhardt]

https://github.com/twinssbc/Ionic2-Calendar/pull/508/files

[ustadji]

So the last commit fixes the issue with Ivy then? Pardon the noob question but when I tried npm update on ionic2-calendar it stayed on version 0.5.8. Is this not released yet to the npm repository? Thank you!

[danielehrhardt]

You could use this until it is merged npm install ionic5-calendar

[ustadji]

You could use this until it is merged npm install ionic5-calendar

Many thanks Daniel!

[MedaiP90]

You could use this until it is merged npm install ionic5-calendar

I can't use it anyway: installing the module and updating the imports i get this error error TS2307: Cannot find module 'ionic5-calendar'.

[twinssbc]

I published a version 0.5.9 with Ivy disabled so that it won't cause any error in Angular 9 project. I tried to turn on Ivy, but it complains about @ionic/angular has some compatibility issue with ngcc/Ivy. I checked the Ionic project configuration, seems also turned off Ivy support. Will do more investigation to find out Ionic 5 supports Ivy to what extent. Before that, could you try this version work for you?

[danielehrhardt]

You could use this until it is merged npm install ionic5-calendar

I can't use it anyway: installing the module and updating the imports i get this error error TS2307: Cannot find module 'ionic5-calendar'.

use import { NgCalendarModule } from 'ionic5-calendar/dist';

[danielehrhardt]

I published a version 0.5.9 with Ivy disabled so that it won't cause any error in Angular 9 project. I tried to turn on Ivy, but it complains about @ionic/angular has some compatibility issue with ngcc/Ivy. I checked the Ionic project configuration, seems also turned off Ivy support. Will do more investigation to find out Ionic 5 supports Ivy to what extent. Before that, could you try this version work for you?

Hi @twinssbc you can see if you install ionic5-calendar that my Pull Request ist working with Ive Enabled. import { NgCalendarModule } from 'ionic5-calendar/dist'; You can try this Fork: https://github.com/codextde/Ionic2-Calendar

[iamnels1]

I published a version 0.5.9 with Ivy disabled so that it won't cause any error in Angular 9 project. I tried to turn on Ivy, but it complains about @ionic/angular has some compatibility issue with ngcc/Ivy. I checked the Ionic project configuration, seems also turned off Ivy support. Will do more investigation to find out Ionic 5 supports Ivy to what extent. Before that, could you try this version work for you?

It doesn't work, i got this error : [ng] ERROR in node_modules/ionic2-calendar/calendar.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of ScheduleModule, but could not be resolved to an NgModule class. [ng] [ng] This likely means that the library (ionic2-calendar) which declares NgCalendarModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy. [ng] [ng] 1 export declare class NgCalendarModule { [ng] ~~~~~~~~~~~~~~~~ [ng]

[MedaiP90]

You could use this until it is merged npm install ionic5-calendar

I can't use it anyway: installing the module and updating the imports i get this error error TS2307: Cannot find module 'ionic5-calendar'.

use import { NgCalendarModule } from 'ionic5-calendar/dist';

Already tried, the compiler tells me that CalendarComponent isn't exposed and to import it elsewhere

[abarrios003]

Same error here:

ERROR in Symbol CalendarComponent declared in /../node_modules/ionic5-calendar/dist/calendar.d.ts is not exported from ionic5-calendar/dist (import into /../src/app/app.component.ts) [ng] /../node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:452 [ng] finally { if (e_7) throw e_7.error; } [ng] ^

[JeongJun-Lee]

@danielehrhardt same error here:

ERROR in Symbol CalendarComponent declared in /node_modules/ionic5-calendar/dist/calendar.d.ts is not exported from ionic5-calendar/dist

[twinssbc]

I published a new version 0.6.1 which is Ivy built and also resolved that CalendarComponent export issue. Feel free to give a try.

[danielehrhardt]

Perfect 🎉

[drekinov]

Hi, i am sorry but probably i dont get something :) i have everything latest Angular 9.1.0 Ionic 5.0.7 ionic2-calendar 0.6.1 and etc i still get error from 17th February i reported.

core.js:4061 ERROR TypeError: Cannot read property 'dayHeaders' of undefined
    at MonthViewComponent_table_4_Template (monthview.js:59)
    at executeTemplate (core.js:7575)
    at refreshView (core.js:7452)
    at refreshDynamicEmbeddedViews (core.js:8515)
    at refreshView (core.js:7472)
    at refreshComponent (core.js:8579)
    at refreshChildComponents (core.js:7255)
    at refreshView (core.js:7498)
    at refreshDynamicEmbeddedViews (core.js:8515)
    at refreshView (core.js:7472)

Pobably it is my 4th or 5th attempt to make update (after each angular or ionic2-calendar versions) and all failed. Am i missing something ?

Thanks

[NewBaa]

Hi, I have a problem. After opening the calendar page and close it. When opening the calendar page again It won't work. event not load and slideNext, slidePrev won't work.

Update: If open other page before open the calendar page it won't work too. What can be done to solve this problem? Thanks.

Angular 9.1.0 Ionic 5.0.7 ionic2-calendar 0.6.1 @angular-devkit/architect 0.901.0 @angular-devkit/build-angular 0.901.0 @angular-devkit/build-optimizer 0.901.0 @angular-devkit/build-webpack 0.901.0 @angular-devkit/core 8.3.26 @angular-devkit/schematics 8.3.26 @ngtools/webpack 9.1.0 @schematics/angular 8.3.26 @schematics/update 0.901.0 rxjs 6.5.4 typescript 3.8.3 webpack 4.42.0

[twinssbc]

@drekinov The Angular 9 issue I'm addressing is that the calendar doesn't work for Ivy build. But you still get the error when Ivy is disabled. So I think your issue probably is related to something else. Let's step back a bit to check couple things:

1. Is this error happen when you don't upgrade to Angular 9?
2. Are you using any custom template? Does it work if you simply use the code in the demo sample?

[twinssbc]

@NewBaa Could you confirm this behavior only happens in Angular 9 or it happens in previous Angular version? You mentioned that you open and close the calendar page? How do you achieve that in an app? Are you using some popup window which contains the calendar.

[NewBaa]

@twinssbc Only happens in Angular 9. you can see this behavior in link below. https://youtu.be/acsVsIJx0G0

And open other page before open the calendar page it won't work too. https://youtu.be/d_X1hKWTLlw

[twinssbc]

@NewBaa Yes, your videos are very helpful. I wonder how do you open and close the new page, use which component? Is there any error printed in the console? If you could provide more code about how do you create the calendar, that will be helpful.

[NewBaa]

@twinssbc I open Page with navController. No error printed in the console.

Ionic Ionic CLI : 6.4.0 (/Users/new/.npm-global/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.0.7 @angular-devkit/build-angular : 0.901.0 @angular-devkit/schematics : 8.3.26 @angular/cli : 9.1.0 @ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0, ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 12 other plugins)

Utility:

cordova-res : 0.9.0 native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (/Users/new/Library/Android/sdk) ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v13.12.0 (/usr/local/Cellar/node/13.12.0/bin/node) npm : 6.14.4 OS : macOS Catalina Xcode : Xcode 11.4 Build version 11E146

` import { Component, ViewChild, OnInit } from '@angular/core'; import { CalendarComponent } from 'ionic2-calendar/calendar'; import { ApiService } from 'src/app/services/api.service'; import { Storage } from '@ionic/storage'; import { AlertController, ActionSheetController, NavController } from '@ionic/angular';

@Component({ selector: 'app-calendar', templateUrl: './calendar.page.html', styleUrls: ['./calendar.page.scss'], }) export class CalendarPage implements OnInit { @ViewChild('myCalendar', { read: CalendarComponent, static: false }) myCalendar:CalendarComponent; event = { id: '', user_id: '', fullname: '', calendar_type: '', title: '', desc: '', startTime: '', endTime: '', allDay: false };

appoint: any;

eventSource = []

calendar = { mode: 'month', currentDate: new Date(), locale: 'th-TH', }

viewTitle;

constructor( private storage: Storage, private apiService: ApiService, private alertController: AlertController, private actionSheetController: ActionSheetController, private navController: NavController ) { }

ngOnInit() { this.resetEvent(); this.addEvent(); } today() { this.myCalendar.currentDate = new Date(); }

next() { this.myCalendar.slideNext() }

back() { this.myCalendar.slidePrev(); }

// Selected date reange and hence title changed onViewTitleChanged(title) { this.viewTitle = title; }

// Calendar event was clicked async onEventSelected(event) { const alert = await this.alertController.create({ header: event.title, subHeader: event.desc, message: 'From: ' + event.id + '

To: ' + event.user_id, buttons: ['OK'] }); alert.present(); }

resetEvent() { this.event = { id: '', user_id: '', fullname: '', calendar_type: '', title: '', desc: '', startTime: new Date().toISOString(), endTime: new Date().toISOString(), allDay: false }; }

addEvent() { this.storage.get('ws-token').then(token => { let data = {'dummy': true} this.apiService.getData('calendar_vacation_get',data,'',token).subscribe( res => { let all_day: boolean for (let i = 0; i < res.length; i++) { if(res[i].allDay=='1'){ all_day = true }else{ all_day = false } let eventCopy = { id: res[i].id, user_id: res[i].user_id, fullname: res[i].fullname, calendar_type: res[i].calendar_type, title: res[i].fullname+' '+res[i].title, desc: res[i].desc, startTime: new Date(res[i].startTime), endTime: new Date(res[i].endTime), allDay: all_day } this.eventSource.push(eventCopy); } } ) }) }

async presentActionSheet() { const actionSheet = await this.actionSheetController.create({ //header: 'เมนู', mode: 'ios', buttons: [{ text: 'การลา', icon: 'image-outline', handler: () => { this.navController.navigateForward('/new-vacation/calendar') } }, { text: 'ไปราชการ', icon: 'briefcase-outline', handler: () => { this.navController.navigateForward('/governor-new/calendar') } }, { text: 'ยกเลิก', icon: 'close-outline', role: 'cancel', handler: () => { } }] }); await actionSheet.present(); }

} `

EDIT : Install ionic2-calendar version 0.5.9, now it works again. no problem found.

[twinssbc]

@NewBaa I'm a bit confused. version 0.5.9 works for you? It is supposed not working in Angular 9 project. And version 0.6.1 doesn't work?

[NewBaa]

@twinssbc I confused too. just install 0.5.9 and it works. install 0.6.1 again and it not work like before. I'm used version 0.5.9 now.

Ionic info Ionic CLI : 6.4.0 (/Users/new/.npm-global/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.0.7 @angular-devkit/build-angular : 0.901.0 @angular-devkit/schematics : 9.1.0 @angular/cli : 9.1.0 @ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0, ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 12 other plugins)

Utility:

cordova-res : 0.9.0 native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (/Users/new/Library/Android/sdk) ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v13.12.0 (/usr/local/Cellar/node/13.12.0/bin/node) npm : 6.14.4 OS : macOS Catalina Xcode : Xcode 11.4 Build version 11E146

ng --version Package Version

@angular-devkit/architect 0.901.0 @angular-devkit/build-angular 0.901.0 @angular-devkit/build-optimizer 0.901.0 @angular-devkit/build-webpack 0.901.0 @angular-devkit/core 9.1.0 @angular-devkit/schematics 9.1.0 @ngtools/webpack 9.1.0 @schematics/angular 9.1.0 @schematics/update 0.901.0 rxjs 6.5.4 typescript 3.8.3 webpack 4.42.0

[twinssbc]

@NewBaa Could you provide your HTML code that is using the calendar? Are you opening an action sheet and somehow nest a calendar inside? Do you have two calendars exist? Because the calendar or underlying Ionic slides don't support display two calendars at the same time.

[NewBaa]

@twinssbc my HTML code.

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>ปฏิทินการปฏิบัติงาน</ion-title>
    <ion-button slot="end" fill="clear" (click)="today()">
      <ion-icon slot="start" name="today-outline"></ion-icon>
      วันนี้
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="presentActionSheet()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <ion-grid>
    <ion-row>

      <ion-col size="3" class="ion-text-right">
        <ion-button fill="clear" (click)="back()" color="dark">
          <ion-icon name="chevron-back-outline" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col>

      <ion-col size="6" class="ion-text-center" style="padding-top: 15px;">
        <ion-text style="font-size: 18px;" color="dark">
          {{ viewTitle }}
        </ion-text>
      </ion-col>
      <ion-col size="3" class="ion-text-left">
        <ion-button fill="clear" (click)="next()" color="dark">
          <ion-icon name="chevron-forward-outline" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <calendar #myCalendar 
    [eventSource]="eventSource" 
    [calendarMode]="calendar.mode" 
    [currentDate]="calendar.currentDate"
    [locale]="calendar.locale" 
    (onEventSelected)="onEventSelected($event)" 
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)" 
    step="30" 
    startHour="0" 
    endHour="24" 
    startingDayWeek="1" 
    noEventsLabel="ไม่มีนัดหมายในวันนี้" 
    allDayLabel="ทั้งวัน">
  </calendar>
</ion-content>

[iamnels1]

Hi @twinssbc

There's a problem with your update 0.61

It works on the browser with ionic@5.0.7 & A9, but when you build for production, then, for what I can see in IOS, nothing work...

What can I do ?

// Config

"dependencies": { "@angular/common": "~9.1.2", "@angular/core": "~9.1.2", "@angular/fire": "^5.4.2", "@angular/forms": "~9.1.2", "@angular/platform-browser": "~9.1.2", "@angular/platform-browser-dynamic": "~9.1.2", "@angular/router": "~9.1.2", "@capacitor/android": "^2.0.1", "@capacitor/core": "^2.0.1", "@capacitor/ios": "^2.0.1", "@ionic-native/core": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.7", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", "angular-pipes": "^10.0.0", "capacitor-fcm": "^1.0.0", "core-js": "^2.5.4", "dayjs": "^1.8.21", "firebase": "^7.10.0", "geofirex": "^0.1.0", "google-libphonenumber": "^3.2.7", "ionic2-calendar": "^0.6.1", "moment": "^2.24.0", "ngx-autosize": "^1.7.5", "rxjs": "~6.5.1", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.1", "@angular/cli": "~9.1.1", "@angular/compiler": "~9.1.2", "@angular/compiler-cli": "~9.1.2", "@angular/language-service": "~9.1.2", "@capacitor/cli": "^2.0.1", "@ionic/angular-toolkit": "^2.2.0", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.4.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.8.3" },

[amamitpandey]

try this uninstall first and install again 0.5.x version npm install ionic2-calendar@0.5 --save

[aastudillo91]

npm install —save-dev typescript@latest

this work for me, thanks

[iamnels1]

try this uninstall first and install again 0.5.x version npm install ionic2-calendar@0.5 --save

Tried; same problem..

[twinssbc]

There was some issue reported that the calendar doesn't work when the page is opened at the second time. https://github.com/twinssbc/Ionic2-Calendar/issues/527 https://github.com/twinssbc/Ionic2-Calendar/issues/532

You could upgrade the calendar version to 0.6.4 and @ionic/angular to 5.1.0 to resolve it.

If you encounter other error, please check the Dependency section in README to use the corresponding package version.

Feel free to open a separate issue if you still have some dependency related problem.

[Elmabtoul88]

ionic2-calendar dosnt work i tried many and many version of this calendar i upgrade typescript version, i created a new project just for try all solution possible i insist on this librery cause its offre lot of easy advantage anybody has a trick for skip this problem. i use ionic 5 angular 9

[twinssbc]

@Elmabtoul88 could you provide more information, what is not working? And could you provide the version you specify in your package.json? If you could share some code how do you use the calendar, that will be more helpful.

[Elmabtoul88]

@twinssbc thank you for your answer :

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/core": "^5.0.7", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "ionic2-calendar": "^0.6.4", "moment": "^2.26.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.1.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "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": "~5.4.3", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "^3.9.5"

i import module in app.module and also in home.module. the error was unkown element thank you for your answer.

[Elmabtoul88]

the error is "calendar is not know element"

[Elmabtoul88]

{ "message": "'calendar' is not a known element:\n1. If 'calendar' is an Angular component, then verify that it is part of this module.\n2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.", "source": "ng", "startLineNumber": 11, "startColumn": 5, "endLineNumber": 19, "endColumn": 15 }

[twinssbc]

could you try the latest version 0.6.5?