Событие onDayCreate

Сигнатура и базовая модель работы события

Событие onDayCreate вызывается для каждой создаваемой ячейки дня в календаре Flatpickr в момент её формирования DOM-структуры. Это один из ключевых хук-механизмов библиотеки, позволяющий вмешиваться в процесс рендеринга отдельных дат и модифицировать их поведение или визуальное представление.

Сигнатура обработчика:

onDayCreate: function(dObj, dStr, fp, dayElem) {
    // логика обработки
}

Параметры:

  • dObj — объект Date, соответствующий конкретному дню, который рендерится в календаре
  • dStr — строковое представление даты, сформированное согласно конфигурации dateFormat
  • fp — экземпляр Flatpickr, предоставляющий доступ к состоянию компонента и его методам
  • dayElem — DOM-элемент ячейки дня, который можно модифицировать напрямую

Момент вызова и жизненный цикл рендера

onDayCreate срабатывает на этапе построения календарной сетки, когда каждая дата уже преобразована в DOM-элемент, но ещё до того, как календарь становится интерактивным для пользователя.

Внутри жизненного цикла Flatpickr это находится между генерацией структуры месяца и финальной отрисовкой календарного слоя. Это означает:

  • событие вызывается для каждой ячейки отдельно
  • изменения применяются до отображения календаря
  • повторные вызовы происходят при смене месяца, года или режима отображения

Особенность заключается в том, что обработчик не влияет на логику выбора даты напрямую, но полностью управляет визуальным и частично поведенческим уровнем ячейки.

Модификация DOM-элемента дня

Основной сценарий использования — динамическое изменение класса, атрибутов или содержимого dayElem.

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

flatpickr("#calendar", {
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        const date = dObj.getDay();

        if (date === 0 || date === 6) {
            dayElem.classList.add("flatpickr-weekend");
        }
    }
});

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

Контекст экземпляра Flatpickr

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

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

const holidays = [
    "2026-01-01",
    "2026-05-01",
    "2026-12-31"
];

flatpickr("#calendar", {
    dateFormat: "Y-m-d",
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        if (holidays.includes(dStr)) {
            dayElem.classList.add("flatpickr-holiday");
        }
    }
});

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

Работа с атрибутами и доступностью

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

Пример добавления ARIA-атрибутов:

flatpickr("#calendar", {
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        if (dObj.getMonth() === 0 && dObj.getDate() === 1) {
            dayElem.setAttribute("aria-label", "Новый год");
        }
    }
});

Такая модификация улучшает поддержку screen reader и повышает семантическую точность календаря.

Условное блокирование визуальных состояний

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

flatpickr("#calendar", {
    minDate: "today",
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        if (dObj < new Date()) {
            dayElem.classList.add("flatpickr-disabled-visual");
        }
    }
});

Важно различать визуальное оформление и логическое отключение. Реальное отключение достигается через disable, тогда как onDayCreate лишь изменяет внешний вид.

Интеграция с внешними данными

Часто onDayCreate используется совместно с API или локальными источниками данных для отображения событий в календаре.

const events = {
    "2026-06-10": ["meeting"],
    "2026-06-15": ["vacation", "birthday"]
};

flatpickr("#calendar", {
    dateFormat: "Y-m-d",
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        if (events[dStr]) {
            dayElem.classList.add("has-events");
            dayElem.setAttribute("data-events-count", events[dStr].length);
        }
    }
});

Такой подход позволяет превращать календарь в визуальный планировщик с индикаторами активности.

Влияние повторных рендеров

Flatpickr может пересоздавать DOM-элементы при каждом изменении месяца, режима или локали. Это означает, что onDayCreate вызывается многократно для одних и тех же дат, но в разных циклах рендеринга.

Следствием этого является необходимость:

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

Сравнение с другими событиями Flatpickr

onDayCreate часто путают с другими событиями:

  • onReady — вызывается один раз при инициализации календаря
  • onMonthChange — реагирует на смену месяца, но не даёт доступ к каждой ячейке
  • onChange — обрабатывает выбор даты, но не рендер

Ключевая особенность onDayCreate заключается в уровне гранулярности: он работает на уровне отдельной ячейки, а не всего календаря.

Расширенные сценарии кастомизации

Использование onDayCreate позволяет реализовывать сложные интерфейсные модели:

  • тепловые карты активности по дням
  • календарь бронирования с динамической загрузкой занятости
  • визуализация нагрузки по времени
  • интеграция с аналитикой событий

Пример упрощённой тепловой карты:

const intensity = {
    "2026-06-01": 1,
    "2026-06-02": 5,
    "2026-06-03": 10
};

flatpickr("#calendar", {
    dateFormat: "Y-m-d",
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        const level = intensity[dStr];

        if (level) {
            dayElem.classList.add(`heat-${level}`);
        }
    }
});

Особенности производительности

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

Оптимизационные подходы:

  • предварительная подготовка данных вне обработчика
  • использование Map вместо массивов для поиска
  • минимизация DOM-операций внутри функции

Работа с динамическими состояниями

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

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

Оглавление