Our pure JavaScript Scheduler component


Post by tlapeg07 »

Hello,

First thank you very much for the scheduler which I find an amazing tool.

I found a strange behavior with the zoom feature (using Chrome Version 76.0.3809.100 (Build officiel) (64 bits) on Mac OSX) :

- I set a startDate and a endDate to my scheduler (and all my events are within these bounds) : this prevents me from scrolling outside of this time range (which is what I want).

- However, if I zoom out (either using mouse wheel or scheduler.zoomToFit() method, which I call to initialise the scheduler in such a way that I can see everything), then the time range of my scheduler is extended, which I do not want (there is nothing to see outside of my time range and then it get difficult to find the perfect zoom level / scrolling with the mouse).


ts code :
        scheduler.startDate = new Date(newVal.startDate);
        scheduler.endDate = new Date(newVal.endDate);
        console.log("scheduler.startDate before zoomToFit() : "+scheduler.startDate);
        scheduler.zoomToFit();
        console.log("scheduler.startDate after zoomToFit() : "+scheduler.startDate);
output :
scheduler.startDate before zoomToFit() : Mon Aug 05 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
scheduler.startDate after zoomToFit() : Wed Jul 24 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)

This issue can been reproduced on any example, such as : https://www.bryntum.com/examples/scheduler/basic/


-> console.log(scheduler.startDate);
rootcause-full.js:10 Sun Jan 01 2017 06:00:00 GMT+0100 (heure normale d’Europe centrale)


-> scheduler.zoomToFit();
-> console.log(scheduler.startDate);
rootcause-full.js:10 Fri Dec 30 2016 06:00:00 GMT+0100 (heure normale d’Europe centrale)



console.log(scheduler.startDate);
rootcause-full.js:10 Sun Jan 01 2017 06:00:00 GMT+0100 (heure normale d’Europe centrale)


scheduler.zoomOut();
console.log(scheduler.startDate);
rootcause-full.js:10 Fri Dec 30 2016 04:00:00 GMT+0100 (heure normale d’Europe centrale)


Of course on this basic example everything is already visible before zooming out but on this one for instance (https://www.bryntum.com/examples/scheduler/bigdataset/) you do need to zoom out to see all tasks at once, but you still do not want to extend the scheduler time range.

Maybe this is done on purpose to allow the user to escape from these ranges... but is there a way to really respect them? Thank you very much in advance and have a nice day.

Best,

Post by pmiklashevich »

Pavlo Miklashevych
Sr. Frontend Developer


Post by tlapeg07 »

Hello,

Thank you for pointing out this interresting doc.
It may be what I need, but I have somme difficulties to make it work.

My best results is obtained with this code :
        scheduler.startDate = new Date(newVal.startDate);
        scheduler.endDate = new Date(newVal.endDate);
        console.log('given dates ' + scheduler.startDate + ' - ' + scheduler.endDate);
        scheduler.setTimeSpan(scheduler.startDate, scheduler.endDate);
        console.log('dates after setTimeSpan ' + scheduler.startDate + ' - ' + scheduler.endDate);
        scheduler.zoomToFit();
        console.log('dates after zoomToFit ' + scheduler.startDate + ' - ' + scheduler.endDate);

        // Prevent zoom out beyond current level
        console.log(scheduler.minZoomLevel + ' <= ' + scheduler.zoomLevel + ' <= ' + scheduler.maxZoomLevel);
        scheduler.minZoomLevel = scheduler.zoomLevel - 1;
        console.log(scheduler.minZoomLevel + ' <= ' + scheduler.zoomLevel + ' <= ' + scheduler.maxZoomLevel);
        
What I get :
given dates Mon Aug 05 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale) - Sun Aug 11 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
scheduler.component.ts:68 dates after setTimeSpan Mon Aug 05 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale) - Sun Aug 11 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
scheduler.component.ts:70 dates after zoomToFit Sun Jul 21 2019 06:00:00 GMT+0200 (heure d’été d’Europe centrale) - Sun Aug 25 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
scheduler.component.ts:73 0 <= 13 <= 23
scheduler.component.ts:75 12 <= 13 <= 23
My first question is, why does the zoomToFit change the timeSpan?

With this code, when the scheduler is loaded, at first, I see all the events and I can zoom out by one level (because of -1). If I zoom in and then if I zoom out again, I end up with the same view as before, so this is ok.

I've tried with the same code on other data with tasks spreading on two weeks, but then the first zoom out is way too big, and is would have been better to remove ths -1 in this case. But without the -1, the first case is not working, becauseafter zooming in, and I cannot zoom out to the same level.

How could I make it work?
Thank you in advance,
Regards,

EDIT

I was a bit to quick and did not see that you pointed out a specific field on your page... Sorry about this.
So I've tried with zoomKeepsOriginalTimespan : true,

And the original time span is indeed preserved :
       scheduler.startDate = new Date(newVal.startDate);
        scheduler.endDate = new Date(newVal.endDate);
        console.log('dates after setTimeSpan ' + scheduler.startDate + ' - ' + scheduler.endDate);
        scheduler.zoomToFit();
        console.log('dates after zoomToFit ' + scheduler.startDate + ' - ' + scheduler.endDate);
        
dates after setTimeSpan Mon Aug 05 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale) - Sun Aug 11 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
scheduler.component.ts:68 dates after zoomToFit Mon Aug 05 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale) - Sun Aug 11 2019 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
core.js:32089 
As a consequence the scroll is much smaller thank you very much. This is what I was looking for, but...If I zoom in, then I cannot zoom out....

Post by pmiklashevich »

Hello,
My first question is, why does the zoomToFit change the timeSpan?
Because it's what zoomToFit function is supposed to do: "Changes the range of the scheduling chart to fit all the events in the store."
How could I make it work?
As far as I get it from your "Edit" section this problem is solved?
but...If I zoom in, then I cannot zoom out....
We have a ticket for it: https://app.assembla.com/spaces/bryntum/tickets/7783-zoomin-and-zoomout-get-stuck-at-a-random-level/details
Please read the description of the ticket to make sure this is the problem you see.

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by tlapeg07 »

Hello,

I'm not sure it's the same problem because I did not specify any zoomLevels. I've attached the listener and here is what I've got by zooming in and out :

hourAndDay 13
scheduler.component.ts:53 hourAndDay 14.5
scheduler.component.ts:53 hourAndDay 15.5
scheduler.component.ts:53 minuteAndHour 16
scheduler.component.ts:53 minuteAndHour 17
scheduler.component.ts:53 minuteAndHour 18
scheduler.component.ts:53 minuteAndHour 19
scheduler.component.ts:53 minuteAndHour 20
scheduler.component.ts:53 secondAndMinute 21
scheduler.component.ts:53 minuteAndHour 20
scheduler.component.ts:53 minuteAndHour 19
scheduler.component.ts:53 minuteAndHour 18
scheduler.component.ts:53 minuteAndHour 17
scheduler.component.ts:53 minuteAndHour 16
30scheduler.component.ts:53 hourAndDay 15.5

So, I cannot go back to 13 here.
Should I try to build a test case?

Regards,

Post by pmiklashevich »

That's the same issue. Our predefined zoomLevels are not that good, so they also have that issue. We're going to fix this in coming releases. Stay tuned!

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply