[REACT] zoomToSpan

[odiyaerlichster]

Hi,
I have a question regarding the zoomToSpan API.
In the documentation it states, that the zoom level will be adjusted automatically to fit the time span.
How is this determined? What if there are multiple zoomLevels that match?
We are using the zoomToSpan API to display a period of 6 weeks, and the zoom level selected now is different than it used to be.
How can we control this?

[tasnim]

Hey odiyaerlichster,

We are using the zoomToSpan API to display a period of 6 weeks, and the zoom level selected now is different than it used to be.
How can we control this?

Could you share how we can replicate that behavior? And what is your expected behavior on it?

[odiyaerlichster]

Sure.
This is how we have our presets defined:

[
    {
        "id": "quarterly_1",
        "mainUnit": "quarter",
        "shiftUnit": "quarter",
        "shiftIncrement": 1,
        "tickWidth": 599,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        }
    },
    {
        "id": "quarterly_2",
        "mainUnit": "quarter",
        "shiftUnit": "quarter",
        "shiftIncrement": 2,
        "tickWidth": 299.5,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        }
    },
    {
        "id": "monthly_1",
        "mainUnit": "month",
        "shiftUnit": "month",
        "shiftIncrement": 1,
        "tickWidth": 599,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        }
    },
    {
        "id": "monthly_2",
        "mainUnit": "month",
        "shiftUnit": "month",
        "shiftIncrement": 2,
        "tickWidth": 299.5,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        }
    },
    {
        "id": "weekly_6",
        "mainUnit": "week",
        "shiftUnit": "week",
        "shiftIncrement": 6,
        "tickWidth": 113.16666666666667,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        },
    },
    {
        "id": "weekly_7",
        "mainUnit": "week",
        "shiftUnit": "week",
        "shiftIncrement": 7,
        "tickWidth": 97,
        "timeResolution": {
            "unit": "day",
            "increment": 1
        }
    },
  


{
    "id": "daily_30",
    "mainUnit": "day",
    "shiftUnit": "day",
    "shiftIncrement": 30,
    "tickWidth": 19.966666666666665,
    "timeResolution": {
        "unit": "day",
        "increment": 1
    }
}
]

We are then calling zoomToSpan like this:
zoomToSpan({
startDate:"2025-05-18",
endDate:"2025-06-29",
leftMargin: 100,
rightMargin: 0,
});

We are trying to open the timeline on a 6 week span, with a margin on the left of 100 pixels.
There is now way using this API to specify the exact preset to use.
In previous bryntum versions the smallest possible preset was being used - "weeks" by default.
But now for some reason the largest possible preset is being used "quarters".
Can you shed some light on how the preset is being determined and how it's possible to override this to use weeks/the smallest possible preset?
Thanks!

[alex.l]

Hi,

Please see https://bryntum.com/products/schedulerpro/docs/api/Scheduler/view/mixin/TimelineZoomable#function-zoomToLevel

[odiyaerlichster]

Hi,
How can we provide a start and end date here along with margins from the left and right?
It says in the documentation that start and end date will be ignored if infiniteScroll is being used, which is our case

[marcio]

Hi odiyaerlichster,

When using infiniteScroll, the startDate and endDate are indeed ignored, as the timeline dynamically adjusts its timespan during scrolling. To control the zoom level in this scenario, you can use the zoomToLevel method to specify the desired preset directly. This allows you to select the exact zoom level you want, bypassing the automatic selection process.

You can combine the setTimeSpan method to set the start/end date after updating the zoom, please see this demo https://codepen.io/marciogurka/pen/MYYdEVg.

[odiyaerlichster]

Hi,
How is it possible to add a left margin and a right margin to the view when using these methods?

[odiyaerlichster]

Hi,
How is it possible to add a left margin and a right margin to the view when using these methods?

[alex.l]

Hi,

I am not sure what do you want to achieve. What do you mean by margins, if you used infiniteScroll and set exact viewPreset/zoomLevel? How should it work?