Пришло время начать писать историю выпуска DHTMLX за 2023 год. Поэтому мы рады представить Календарь событий DHTMLX 2.0! Это крупное обновление нашего Календаря событий JavaScript включает в себя набор лучших функций и улучшений для продуктивного управления событиями.

Наиболее заметными нововведениями являются режим просмотра временной шкалы с колонкой для неназначенных событий, поддержка повторяющихся событий и возможность устанавливать пользовательские режимы просмотра. Мы также добавили новые элементы управления для переключения между режимами просмотра на панели инструментов, возможность затемнения прошлых событий, маркер текущего времени в представлениях «Повестка дня» и «Временная шкала» и автоматическую прокрутку для действий перетаскивания. Кроме того, существует множество улучшений, облегчающих работу с календарем событий DHTMLX.

Теперь перейдем к основным аспектам этого релиза более подробно.

Загрузить бесплатную пробную версию DHTMLX Event Calendar v2.0 ›

Режим просмотра временной шкалы

Начнем с нового режима просмотра, а именно Timeline. Он становится шестым параметром в списке доступных встроенных представлений календаря событий, включая «День», «Неделя», «Месяц», «Год» и «Повестка дня». Но в отличие от всех существующих режимов просмотра, доступных по умолчанию, временная шкала не является обязательной.

Учитывая большую популярность этого представления в компоненте планировщика DHTMLX, оно также может стать большим преимуществом для вашего календаря событий DHTMLX. Представление временной шкалы обеспечивает четкий обзор запланированных встреч, расположенных слева направо на временной шкале. Но главная ценность представления Timeline — возможность назначать события ресурсам (сотрудникам, оборудованию и т. д.).

В приведенном ниже примере показано, как календарь событий, созданный с помощью DHTMLX, может выглядеть во всех режимах просмотра. Для выбора конкретного следует использовать специальные элементы управления на панели инструментов.

По умолчанию наш Календарь отображает события в режиме «Неделя». Но вы можете установить временную шкалу или любое другое доступное представление в качестве начальной опции, указав соответствующее значение в конфигурации mode:

// create Event Calendar
new eventCalendar.EventCalendar("#root", {
   mode: "timeline"
   // other configuration parameters
});

Существует два способа динамической установки режима временной шкалы:

  • Метод setMode()
calendar.setMode({ value: "timeline" });
  • Метод setConfig()
calendar.setConfig({
   config: {
       dragCreate: true,
       eventInfoOnClick: true,
       eventsOverlay: true,
       autoSave: true,
       dragResize: true,
       dragMove: true
   },
   mode: "timeline"
});

Затем вам нужно указать параметры вашей временной шкалы в массиве свойства config.view, что предоставляет временной шкале большие возможности настройки по сравнению с другими режимами просмотра:

config{
    views: [
{
   id: "timeline",
   label: "Hour Timeline",
   value: "Hour Timeline",
   layout: "timeline",
   config: {
     unassignedCol: true,
     step: [1, "hour"],
     header: [
       { unit: "day", step: 1, format: "d MMM" },
       { unit: "hour", step: 1, format: "H" },
     ],
    sections: [
       {
         label: "Andy Warh",
         id: "1",
         img:"/img/01/avatar_01.jpg",
       },
       {
         label: "James Tamer",
         id: "2",
         img:"/img/02/avatar_02.jpg",
       },
       // other sections config
     ],
    },
  },
]
}

У вас также есть возможность указать собственный шаблон для определения внешнего вида разделов временной шкалы с помощью недавно добавленного параметра timelineSection в объекте templates. Этот параметр принимает объект параметров раздела.

templates: {
timelineSection: (section) => {
           return `<div className="template-wrapper">
                   <img src=${section.img} alt=${section.label} className="section-img" />
               <div className="section-label">${section.label}</div>
           </div>`;
           }
      },
       // other configuration parameters
});

При включенном режиме просмотра временной шкалы конечные пользователи получают общее представление о своем рабочем графике, могут анализировать рабочую нагрузку и вносить необходимые коррективы.

Повторяющиеся события

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

Когда дело доходит до реализации повторения событий через API, следует использовать тип поля повторяющегося редактора в свойстве editorShape.

new eventCalendar.EventCalendar("#root", {
   events,
   editorShape: [
       {
           type: "recurring",
           label: "Recurring"
       },
       // settings of other custom fields
   ]
});

В свойство events мы добавили несколько необязательных параметров для указания правил повторения событий в календаре:

  • RRULE — определяет правило для повторяющихся событий.
  • recurring — включает/отключает повторение событий.
  • STDATE — устанавливает дату начала повторяющихся событий.
  • DTEND — устанавливает дату окончания для повторяющихся событий.

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

const events = [
   {
       ...,
       RRULE: "FREQ=WEEKLY;INTERVAL=2;BYDAY=Mo,We,Fr"
   }, {...}
];

При редактировании или удалении любого из повторяющихся событий ваши изменения могут быть применены к:

  1. только одно событие,
  2. редактируемое/удаляемое событие и все последующие,
  3. все повторяющиеся события.

Неназначенные события в представлении временной шкалы

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

Чтобы добавить в календарь событий JavaScript отдельный столбец для неназначенных событий, необходимо установить значение параметра unassignedCol? в значение true в настройках режима просмотра временной шкалы.

const config = {
        viewControlButton: "none",
        views: [
            {
                id: "timeline",
                label: "Timeline",
                layout: "timeline",
                config: {
                    unassignedCol: true,
// Timeline sections config

В результате конечные пользователи могут сохранять неназначенные события в столбце с правой стороны временной шкалы, назначать их определенному человеку и, если планы изменились, перемещать их обратно из календаря в столбец неназначенных.

Пользовательские режимы просмотра на панели инструментов

При подготовке этого релиза мы также сосредоточились на том, чтобы дать вам возможность определять собственные режимы просмотра в календаре событий DHTMLX. Ранее события можно было отображать только со встроенными представлениями (День, Неделя, Месяц, Год, Повестка дня) с помощью соответствующих элементов управления на панели инструментов. Отныне можно создавать собственный набор режимов просмотра, включая новый режим просмотра «Временная шкала», и задавать для них собственные настройки.

Пользовательские представления на панели инструментов задаются с помощью свойства config.views. Например, панель инструментов вашего календаря событий может содержать несколько представлений временной шкалы с разными наборами разделов и настройками шкалы времени.

const views = [
// other views config
  {
    id: "timeline",
    label: "Timeline",
    layout: "timeline",
    config: {
      unassignedCol: true,
      sections: [
        ...
      ],
    },
  },
  {
    id: "timeline2",
    label: "Hour Timeline",
    layout: "timeline",
    config: {
      unassignedCol: true,
      step: [1, "hour"],
      header: [
        { unit: "day", step: 1, format: "d MMM" },
        { unit: "hour", step: 1, format: "H" },
      ],
    },
  },
];

Подробнее о настройке режимов просмотра можно узнать в документации.

Новые элементы управления для смены режимов

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

  • кнопки переключения с 3 представлениями,
  • раскрывающийся список с более чем 3 представлениями.

Чтобы определить конкретный элемент управления для переключения представлений календаря вручную, вы должны установить его как значение в параметре viewControl объекта конфигурации календаря:

const config = {
  viewControl: "toggle",// "auto" | "dropdown" | "none"
  views: views
};

Вот как режимы просмотра можно изменить с помощью кнопок-переключателей:

Если конечным пользователям не нужно менять режимы просмотра, вы можете скрыть переключатель через API.

Затемнение прошлых событий и отображение маркера текущего времени

Подобно Календарю Google, новая версия нашей библиотеки календаря событий позволяет уменьшить яркость прошлых событий. Он направлен на упрощение навигации по календарю и обеспечение лучшего внимания к текущим и предстоящим событиям. Чтобы активировать этот способ отображения прошлых событий, вы должны изменить значение параметра dimPastEvents с false (установлено по умолчанию) на true в свойство конфигурации календаря событий.

new eventCalendar.EventCalendar("#root", {
   config: {
// other configuration parameters
       dimPastEvents: true,
       {
});

Более того, теперь вы можете добавить специальный маркер, который будет выделять текущий день и время в вашем календаре.

Автопрокрутка для действий перетаскивания

Календарь событий DHTMLX версии 2.0 стал более удобным для пользователя с точки зрения изменения расписания событий. В этом крупном обновлении мы представили поддержку автоматической прокрутки, чтобы упростить операции перетаскивания с запланированными встречами.

Эта функция значительно облегчит конечным пользователям перетаскивание элементов календаря в интервалы времени, которые находятся вне зоны видимости экрана.

Это основные функции, реализованные в DHTMLX Event Calendar 2.0.

Источник: релизная статья, опубликованная 14 февраля 2023 г. в блоге DHTMLX.