Web Components

[lduboisParticipant]

Hi.

I put jqxWidgets in WebComponents using Polymer 2.

When I put the first demo of jqxScheduler (default functionality) in a Polymer element, the appoinments are not visible in monthView while they are visible in other views such as day or week!

Any hint?

Thanks.

Ludovic.

[HristoParticipant]

Hello Ludovic,

Unfortunately, we do not have experience with “Polymer 2”.
I would suggest you try to change the view from initial ‘weekView’ to ‘monthView’ or just try some way to switch to ‘monthView’.
Also, I would like to ask you if you add new appointment after initialization and you could try to use ‘ensureVisible’ method of the Scheduler in this case.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[lduboisParticipant]

HI.

In monthView, I can see that the computed top of the items is NaNpx!

Any help would be welcome.

Regards,

Ludovic.

[HristoParticipant]

Hello Ludovic,

I would like to ask you where do you see this “NaNpx”?
And also, do you receive any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[lduboisParticipant]

No error message.

NaNpx is for the top property of the div element representing my appointment.

<div data-key="1" data-resourceid="Programmation" class="jqx-scheduler-appointment jqx-rc-all" style="position:absolute; z-index: 399; left: 136px; top: NaNpx; width: 265px; line-height: 18px; height: 18px; border-color:#01A1DD; color:White; background:rgba(1, 161, 221, 0.7);" title="12 AM - 11:59 Python prog
Formation 1"><div style="white-space:nowrap;" class="jqx-scheduler-appointment-content"><div class="jqx-scheduler-appointment-inner-content">Python prog, Formation 1</div></div><div class="jqx-scheduler-appointment-resize-indicator jqx-scheduler-appointment-left-resize-indicator"></div><div class="jqx-scheduler-appointment-resize-indicator jqx-scheduler-appointment-right-resize-indicator"></div></div>

Thanks.

Ludovic.

[HristoParticipant]

Hello Ludovic,

Unfortunately, I cannot provide you a solution (as I mentioned before we do not have experience with this library).
Only, I would like to suggest you try to set some additional settings on the ‘monthView’ that could change the inner settings.
You could try something like this: { type: 'monthView', monthRowAutoHeight: true } in the views property of the Scheduler.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[lduboisParticipant]

Hi.

Problem is you use $(“.jqx-scheduler-month-cell:first”).height() in _renderMonthAppointments, but with Polymer, the content of the Web Component is in a shadow root; thus, not visible to the document. You should specify a root to your jquery selector ($(“.jqx-scheduler-month-cell:first”, this.content).height()).

In fact, you should do that for any jquery selector in any widget.

Thanks.

Ludovic Dubois.

[HristoParticipant]

Hello Ludovic,

Thanks again for your assistance about this scenario.
Unfortunately, as I mentioned in one of the previous posts we do not support integration with the Polymer but I will add this case for discussion.
Thanks again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts