Сделать Gantt адаптивным

Работа с Gantt на смартфонах может быть неудобной из-за маленьких экранов, которые не позволяют одновременно отображать все данные. Однако Gantt можно настроить так, чтобы адаптировать его макет под разные размеры экранов, делая его пригодным как для настольных компьютеров, так и для мобильных устройств.

Если задавать размеры Gantt в процентах (например, width: 100%; height: 100%), он подстроится под доступную ширину контейнера. Однако по умолчанию каждая колонка грид имеет минимальную ширину, определяемую параметрами min_column_width и min_grid_column_width. Если ширина контейнера становится меньше общей минимальной ширины колонок, грид перестает сжиматься. Это может создать впечатление, что Gantt не адаптивен. Ниже приведены способы решить это и сделать Gantt по-настоящему адаптивным.

Настройка минимальной ширины колонок

Один из подходов — уменьшить значения min_column_width и min_grid_column_width. Это позволяет Gantt сжиматься дальше по мере уменьшения контейнера, создавая поведение, близкое к адаптивному:

gantt.config.min_column_width = 30;
gantt.config.min_grid_column_width = 30;

Связанный пример Gantt. Адаптивный контейнер

Настройка макета для маленьких экранов

Еще один подход — переключать макет Gantt в зависимости от доступной ширины. Когда места достаточно, отображается полный макет с обеими частями: грид и таймлайн. На узких экранах вместо этого отображается либо грид, либо таймлайн, чтобы лучше использовать доступное пространство.

Это можно реализовать с помощью события onGanttRender. Обработчик события проверяет ширину контейнера Gantt, текущую конфигурацию layout и обновляет макет Gantt соответствующим образом.

Связанный пример Gantt. Адаптивный макет: динамическое скрытие/показ грид в зависимости от ширины экрана