Our powerful JS Calendar component

Post by licjapodaca »

Error when I click on the button to expand the all day events like so:

error-when-expand.png (208 KiB) Viewed 385 times

And if I enter to the Printer.js file here is the error:

error-printer.png (240.19 KiB) Viewed 385 times

How can I add a workaround to handle this error?

The version of the calendar is v4.3.5

Post by mats »

Can you reproduce with 4.3.6?

Post by licjapodaca »

Hi @mats, the problem persist after upgrade the Calendar component to v4.3.6 as you can see in the following image:

error-4.3.6.png (86 KiB) Viewed 366 times

Can you access to our SaaS solution and check the problem please ... with a PC with Windows, because with my MacBook Pro it's very rare that appears the problem, but in Windows appears more frequently the error when you click over the button in AllDay header in DayView. Here are the steps to reproduce the issue:

IMPORTANT NOTE: The STAGING infrastructure we turned on between 7AM and 7PM every week day and the Time Zone for us is PACIFIC TIME ZONE (PST).

  1. Access to the following url https://portal-staging.temis-apps.com
  2. Sign-In by Google social network providing the credential that we will send you by email to your mats@bryntum.com support account.
  3. After you signed in, you will be redirected to our Control Panel, to access to our Bryntum Calendar, you need to click at the top of our app in the option called "Calendario".
  4. Click on the number day that has multiple tasks or events, this action redirects you to the DayView and there you need to click on the link to expand the AllDayHeader and you will see the error in de Developer Console of the Browser.

We prepare our frontend in Testing mode for your to see the javascript NOT MINIFIED and help you to understand our code that it is in Sencha ExtJS v7.5 ...

Waiting for your feedback about the issue.


Post by Maxim Gorkovsky »

I tried signing up using google account with provided credentials, but google considers that a suspicious activity and asks for phone confirmation. Is there another way to login?

Post by licjapodaca »

Hi there, ok I already sent to you a new credentials to your support@bryntum.com email account, you need to provide these credentials in the login window that load after accessing the url https://portal-staging.temis-apps.com like so:

credentials-temis.png (484.78 KiB) Viewed 340 times

IMPORTANT NOTE: Be aware because the infrastructure are turned ON from 7AM to 7PM (Pacific Time Zone).

Waiting for your feedback about the issue in our Bryntum Calendar component.


Post by Animal »

OK, it's pretty simple to find the code. There's only one onClientOverflowChange It's in EventTip and it's looking at its lastAlignSpec. If it's never been shown, it won't have one.

The route is from performResizeRefresh which is called when the view's height is changed (as it would when expanding or collapsing) when it triggers the eventsPerCellChange event.

The tooltip's activeClient is being set too soon before the tip is actually visible, and that adds the performResizeRefresh listener, and if the tip then doesn't go on to be shown, the listener stays there because it's only removed on hide. So if after that the events per cell gets changed, the tooltip responds to the listener. I'll fix it.

Here's the ticket: https://github.com/bryntum/support/issues/4088

Post by Maxim Gorkovsky »

I also noticed weird report in the console:

> bryntum
calendar.calendar4-3-6: true
calendar.core4-3-6: true
calendar.grid4-3-6: true
calendar.scheduler4-3-5: true // <---

For some reason scheduler is 1 patch release behind. I'd recommend to check bryntum packages versions and usages

Post by licjapodaca »

Hi @Maxim, we only run the following instructions to upgrade the 3 Bryntum components that we use:

$ npm install @bryntum/calendar@4.3.6
$ npm install @bryntum/taskboard@4.3.6
$ npm install @bryntum/gantt@4.3.6

We need to run another instructions to upgrade the scheduler?


Post by Animal »

A styling hint.

Don't put border and border-radius on .b-tooltip-content. That is an interior element of the tooltip. You are right to put padding and the content styling there (fonts etc)

But the border should go on the outermost element, so

div.b-tooltip {
    border: 1px solid #90918f;
    border-radius: 8px !important;

In that way, the anchor arrow can detect the colours that it should use. It will look at the pixel next to it in the content area. If there's a border there, it will detect that, that's why the tip doesn't have a very visible arrow.

If this is set up correctly, the arrow will detect the border and the closest content colour and match it like the field error tooltip does so it looks like an extension of the tooltip:

Screenshot 2022-01-31 at 18.21.52.png
Screenshot 2022-01-31 at 18.21.52.png (11.73 KiB) Viewed 281 times

Post by licjapodaca »

Excellent @Animal, I already apply the best practice change that you told me... thanks for the feedback ...


Post Reply