Вопрос или проблема
Хочу создать календарь, аналогичный тому, что здесь, на основе элементов списка SharePoint. Открыт к использованию Google Charts или FullCalendar. Хотелось бы иметь возможность устанавливать размер окна прокрутки в неделях или месяцах. Дополнительные столбцы списка включают даты, которые будут выводиться во всплывающем тексте. Я мог бы написать это все вручную на JavaScript, но предпочел бы использовать уже готовую библиотеку, если это возможно. Не нашел никаких встроенных макетов для такого вида в нужной библиотеке. Нашел несколько форков кода, но они тоже не отражали такой вид, как здесь.
Также мог бы согласиться на горизонтальное расположение, но этот вид, кажется, вмещает наибольшее количество информации в область/макет, удобный для печати.
Два варианта:
FullCalendar + Scheduler (открытый исходный код)
Очень близка к идеальному решению, как мне кажется, надстройка Scheduler для FullCalendar. В декабре 2018 года был выпущен крупный рефакторинг «версия 4» в альфа-версии. И это все с открытым исходным кодом 🙂
Отличия от вашего идеального случая:
- Время находится по горизонтальной оси, а не по вертикальной.
- Наибольший размер окна прокрутки, который я видел, это “день”. Однако это может быть всего лишь вопросом настройки, так как демонстрация пользовательской шкалы показывает, что её можно менять между кварталами, часами и днями. В противном случае добавление “недели” к этому может быть приемлемым усилием.
DHTMLX Scheduler (коммерческий)
Единственная альтернативная компонента, которую я знаю для этого, это DHTMLX Scheduler. Он имеет несколько “видов”, некоторые из которых есть в версии GPL, а некоторые только в коммерческой версии.
К сожалению, для вашего случая нужный вид доступен только в коммерческой версии.
Тем не менее, вот как бы вы это сделали: выберите Просмотр Временной Шкалы. Время находится по горизонтальной оси, а не по вертикальной, как было бы в вашем идеальном случае. Но вы можете настроить размер окна прокрутки на недели: это x_unit: "week" в createTimelineView().
(Есть также Просмотр Единиц, но, кажется, он всегда имеет часы на одной оси, и это нельзя изменить.)
Ответ или решение
Конечно, поиск подходящей библиотеки может быть сложной задачей, особенно когда воплощение задачи требует специфической функциональности, такой как вертикальные интервалы календаря в режиме планировщика ресурсов. Рассмотрим несколько вариантов, которые могли бы удовлетворить эти требования.
Теория
На современном этапе организации и интерактивности интерфейсов существуют различные библиотеки, способствующие разработке приложений с визуализацией данных. Наиболее подходящими для разработки календаря с настраиваемыми интервалами времени являются следующие библиотеки: FullCalendar с добавкой Scheduler, а также DHTMLX Scheduler.
FullCalendar — это гибкая и универсальная библиотека JavaScript, которая активно используется для созданий календарей и событийных расписаний. Она поддерживает множество представлений (дневное, недельное, месячное) и обладает обширными возможностями настройки. Scheduler — это платная добавка, расширяющая функциональность FullCalendar.
DHTMLX Scheduler — это коммерческая библиотека, ориентированная на создание сложных интерактивных графиков и резервирования ресурсов. Она также поддерживает множество настроек и в ряде случаев может предоставить функции, недоступные в бесплатных решениях.
Пример
FullCalendar + Scheduler:
FullCalendar с Scheduler предоставляет развитый интерфейс для построения горизонтально ориентированных диаграмм Ганта, при этом временные интервалы отображаются по горизонтальной оси. Существуют демонстрации, которые показывают возможность изменения шкалы времени до уровня дня, недели или месяца. Этой библиотекой можно воспользоваться для достижения временной шкалировки, однако диспозиция по осям может не соответствовать требуемому вертикальному формату.
DHTMLX Scheduler:
DHTMLX Scheduler обладает подобными возможностями и предоставляет функцию Timeline View, подходящую для планировщика ресурсов. Хотя шкала времени также располагается горизонтально, библиотека позволяет выбирать необходимые временные интервалы, например, неделю. Однако стоит отметить, что данная функциональность доступна в коммерческой версии, что может ограничивать её доступность для небольших проектов.
Применение
Для достижения поставленной задачи по созданию календаря с вертикальной ориентацией интервалов на основе списка SharePoint, возможен следующий подход:
-
Использование FullCalendar + Custom Development: Несмотря на трудности с вертикальной диспозицией времени, использование FullCalendar с собственными наработками или модификациями может привести к успеху. Это может включать написание дополнительных CSS-стилей или JavaScript для кастомной визуализации.
-
DHTMLX Scheduler (коммерческая версия): Если бюджет позволяет, использование коммерческой версии DHTMLX Scheduler может предоставить необходимые инструменты для реализации запланированного интерфейса с минимальными усилиями.
Оба варианта требуют определенных компромиссов, но с точки зрения интеграции с SharePoint, оба инструмента могут быть полезны. Обе библиотеки позволяют инжектировать данные из внешних источников, предоставляя гибкость и мощность для реализации сложных и интерактивных интерфейсов.