dxScheduler timeline view centered at current time indicator

I went through devExtreme documentation and examples but I can't find a solution for this...

In a Razor view I am loading a dxScheduler as follows (it's bound to a db object where "orders" and "resources" are defined):

<div id="scheduler"></div>

and

<script>
    $(function () {
            $("#scheduler").dxScheduler({
                dataSource: orders,
                views: ["timelineDay"],
                currentView: "timelineDay",
                showCurrentTimeIndicator: true,
                shadeUntilCurrentTime: true,
                firstDayOfWeek: 0,
                startDayHour: 0,
                endDayHour: 24,
                cellDuration: 15,
                groups: ["areaId"],
                resources: [{
                    fieldExpr: "areaId",
                    allowMultiple: false,
                    dataSource: resources,
                    label: ""
                }],
                height: "100%"
            })
        });
</script>

It works fine. However, while keeping cellDuration = 15 mins:

• I would like the scheduler to be centered around the current time indicator (i.e. the vertical line that represents datetime.now...)
• At the same time "startDayHour" has to be "0" and "endDayHour" has to be "24", as they are now.

Any suggestion would be appreciated. Thanks.

It turned out that I was looking at the "Configuration" section only. But there are "Methods" too... The answer is to use the "scrollToTime" method.

Reference: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.

Updated working example (it's straightforward then to set the argument of "scrollToTime" dynamic).

$(function () {
    $("#scheduler").dxScheduler({
        dataSource: orders,
        views: ["timelineDay"],
        currentView: "timelineDay",
        showCurrentTimeIndicator: true,
        shadeUntilCurrentTime: true,
        firstDayOfWeek: 0,
        startDayHour: 0,
        endDayHour: 24,
        cellDuration: 15,
        groups: ["areaId"],
        resources: [{
            fieldExpr: "areaId",
            allowMultiple: false,
            dataSource: resources,
            label: ""
        }],
        height: "100%",
        onContentReady: function (e) {
            e.component.scrollToTime(5, 30, new Date());
        }
    })
});