Календарь событий

Isotope — это мощная JavaScript-библиотека для динамического расположения элементов на странице с поддержкой фильтрации, сортировки и анимации. В контексте календаря событий она позволяет эффективно управлять сеткой событий, автоматически перестраивая элементы при добавлении, удалении или фильтрации по категориям.

Ключевые возможности включают:

  • Динамическое расположение элементов: элементы автоматически подстраиваются под размер контейнера, создавая аккуратную сетку без необходимости ручного позиционирования.
  • Фильтрация: возможность показывать только определённые события, например, по дате, типу мероприятия или тегу.
  • Сортировка: сортировка по дате, приоритету или названию события с плавной анимацией.
  • Анимация: переходы при фильтрации или сортировке происходят плавно, улучшая визуальное восприятие.

Подключение и инициализация Isotope

Для работы с Isotope необходимо подключить библиотеку через CDN или локально. После подключения создаётся экземпляр класса Isotope с конфигурацией контейнера и элементов:

const calendarGrid = document.querySelector('.calendar-grid');

const iso = new Isotope(calendarGrid, {
  itemSelector: '.event-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.event-sizer'
  }
});

Разбор параметров:

  • itemSelector — селектор элементов сетки, которые будут управляться Isotope.
  • layoutMode — способ расположения элементов (masonry, fitRows, vertical, cellsByRow). Для календаря оптимален masonry, позволяющий гибко размещать события разной высоты.
  • percentPosition — включает процентное позиционирование для адаптивного дизайна.
  • masonry.columnWidth — задаёт ширину колонок сетки. Часто используется невидимый элемент-сайзер .event-sizer для точного расчёта сетки.

Фильтрация событий

Isotope поддерживает фильтрацию через CSS-классы или атрибуты элементов. Для календаря это особенно полезно для сортировки по типу события, например: «Встреча», «Вебинар», «Конференция».

const filters = document.querySelectorAll('.filter-button');

filters.forEach(button => {
  button.addEventListener('click', () => {
    const filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

Принцип работы фильтрации:

  • Каждому событию назначается класс или атрибут: .meeting, .webinar, .conference.
  • При клике на кнопку фильтра вызывается метод arrange({ filter: ... }).
  • Isotope автоматически скрывает элементы, не соответствующие фильтру, и анимирует перестройку сетки.

Сортировка событий

Для календаря критически важно упорядочить события по дате или приоритету. Isotope предоставляет метод updateSortData для подготовки данных и arrange для применения сортировки:

iso.updateSortData();
iso.arrange({
  sortBy: 'date',
  sortAscending: true
});

Пример определения данных для сортировки:

const iso = new Isotope(calendarGrid, {
  itemSelector: '.event-item',
  layoutMode: 'masonry',
  getSortData: {
    date: '[data-date]', 
    name: '.event-title'
  }
});
  • getSortData.date использует атрибут data-date, который содержит дату события в формате YYYY-MM-DD.
  • sortAscending: true гарантирует, что ближайшие события будут отображаться первыми.

Динамическое добавление и удаление событий

Isotope поддерживает добавление новых элементов без полной перезагрузки сетки, что важно для интерактивных календарей.

const newEvent = document.createElement('div');
newEvent.classList.add('event-item');
newEvent.setAttribute('data-date', '2026-03-15');
newEvent.innerHTML = '<h3 class="event-title">Новая встреча</h3>';

calendarGrid.appendChild(newEvent);
iso.appended(newEvent);

Удаление происходит через метод remove:

const eventToRemove = document.querySelector('.event-item[data-date="2026-03-12"]');
iso.remove(eventToRemove);
iso.layout();
  • appended — добавляет новые элементы в сетку и запускает анимацию.
  • remove — удаляет элемент и перестраивает сетку.

Адаптивная сетка и ресайз

Для корректного отображения календаря на разных устройствах Isotope автоматически реагирует на изменение размера контейнера.

window.addEventListener('resize', () => {
  iso.layout();
});
  • Метод layout() перерассчитывает позиции элементов.
  • Использование percentPosition: true позволяет сетке быть гибкой при изменении ширины экрана.

Совместное использование фильтрации и сортировки

Isotope позволяет объединять фильтрацию и сортировку для интерактивного управления событиями. Например, можно сначала отфильтровать только вебинары, а затем отсортировать их по дате:

iso.arrange({
  filter: '.webinar',
  sortBy: 'date',
  sortAscending: true
});

Это делает календарь максимально динамичным и удобным для пользователя.

Производительность и оптимизация

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

  • Использовать requestAnimationFrame при динамических обновлениях сетки.
  • Минимизировать сложные селекторы в itemSelector.
  • Предварительно вычислять данные для сортировки (data-date вместо вычисления даты из текста).

Isotope эффективно справляется с сетками из сотен элементов, если правильно структурировать HTML и использовать оптимальные селекторы.

Визуальные эффекты и анимация

Isotope поддерживает CSS-переходы и пользовательские анимации. Для календаря можно добавить плавное появление или исчезновение событий при фильтрации:

.event-item {
  transition: transform 0.4s, opacity 0.4s;
}
  • transform обеспечивает плавное перемещение элементов.
  • opacity добавляет эффект плавного исчезновения.

Это создаёт современный и приятный визуальный опыт при работе с календарём событий.

Библиотека Isotope обеспечивает комплексное решение для интерактивного календаря: гибкая сетка, фильтрация, сортировка и динамическое обновление элементов с плавной анимацией, что делает её идеальной для современных веб-приложений с большим количеством событий.

Оглавление