Представление временной шкалы dxScheduler с центром в индикаторе текущего времени - PullRequest
Новая
       67

Представление временной шкалы dxScheduler с центром в индикаторе текущего времени

0 голосов
/ 07 октября 2019

Я просмотрел документацию и примеры по devExtreme, но не могу найти решение для этого ...

В представлении Razor я загружаю dxScheduler следующим образом (он привязан к объекту db, где "order""и" ресурсы определены): 

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

и 

<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>

Работает нормально. Однако, сохраняя cellDuration = 15 минут:

  • Я бы хотел, чтобы планировщик был центрирован вокруг индикатора текущего времени (т.е. вертикальной линии, которая представляет datetime.now ...)
  • В то же время «startDayHour» должен быть «0», а «endDayHour» должен быть «24», как сейчас.

Любое предложение будет оценено. Спасибо.

1 Ответ

0 голосов
/ 07 октября 2019

Оказалось, что я смотрю только в разделе «Конфигурация». Но есть и «Методы» ... Ответ заключается в использовании метода «scrollToTime».

Ссылка: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.

Обновленный рабочий пример (тогда просто установить аргументдинамический scrollToTime). 

$(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());
        }
    })
});
...