Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Version 2.2.x error with multiple calendars in the same mode #671

Closed
NorthNick opened this issue Dec 13, 2023 · 3 comments
Closed

Version 2.2.x error with multiple calendars in the same mode #671

NorthNick opened this issue Dec 13, 2023 · 3 comments

Comments

@NorthNick
Copy link

If you have two calendars in your app, in the same mode, then instantiating the second raises an error "this.slider.on is not a function" in the ngAfterViewInit function of the relevant component e.g. here if the mode is week.
The reason seems to be that the new Swiper(...) call a couple of lines earlier creates an array of objects rather than a single one - maybe because the CSS selector has multiple matches.

You can see a simple example in this StackBlitz project, which is the standard ionic-calendar demo project, upgraded to v2.2.0, with the calendar HTML element duplicated.
Run it and check the console, where you can see the error.

While the error does not cause any obvious problems in the StackBlitz project, in my code the two calendars are on different pages, and moving from the page with the first calendar to the page with the second calendar does not work: the app stays on the first page, but shows the second page's navigation bar at the foot of the first page. So this is preventing me upgrading.

Some observations:

  • This behaviour was not there in ionic6-calendar, but Ionic, Angular, Swiper, and the calendar have all changed major version since then.
  • If the two calendars are in different modes e.g. week and month, then new Swiper(...) creates a single object, and the error does not occur.
@NorthNick
Copy link
Author

Some experimentation with Swiper shows that it does indeed create a Swiper instance for each matching CSS selector. So, for example, the weekview.ts ngAfterViewInit calendar code can accidentally create multiple instances when it matches on .weekview-swiper if there is more than one weekly calendar in the app. Perhaps the calendar needs to pass the component's HTML element to new Swiper(...) rather than a CSS selector.

@twinssbc
Copy link
Owner

@NorthNick I have published a new version (2.2.1) which supports multiple calendar instances in one page. Feel free to give a try.

@NorthNick
Copy link
Author

Works beautifully! Thanks for fixing it so quickly - I really appreciate it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants