Структура CSS

Библиотека Flatpickr состоит не только из JavaScript-кода, отвечающего за логику календаря, но и из тщательно организованной CSS-структуры. Именно она определяет внешний вид календаря, расположение элементов, анимации, размеры, стили состояний и поддержку различных режимов работы.

Понимание структуры CSS позволяет:

изменять внешний вид календаря без переписывания библиотеки;
создавать собственные темы оформления;
адаптировать календарь под дизайн-проект;
исправлять конфликты со стилями приложения;
эффективно использовать CSS-переопределения.

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

Основной контейнер календаря

После создания экземпляра Flatpickr в DOM появляется корневой элемент:

<div class="flatpickr-calendar">
    ...
</div>

Класс:

.flatpickr-calendar

является главным контейнером всего календаря.

Через него управляются:

размеры календаря;
фон;
границы;
позиционирование;
отображение и скрытие;
анимации открытия.

Пример переопределения:

.flatpickr-calendar {
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

Состояния календаря

Flatpickr активно использует дополнительные классы состояний.

Открытый календарь

<div class="flatpickr-calendar open">

Класс:

.open

появляется при открытии.

Пример:

.flatpickr-calendar.open {
    opacity: 1;
}

Активный календарь

<div class="flatpickr-calendar open arrowTop">

Дополнительные классы используются для определения положения относительно поля ввода.

Статическое отображение

Если используется настройка:

static: true

появляется класс:

.static

Он влияет на способ позиционирования календаря.

Контейнер месяцев

Следующий важный элемент структуры:

<div class="flatpickr-months">

Этот блок содержит:

кнопки переключения;
заголовок месяца;
выпадающий список месяцев;
поле выбора года.

Структура:

<div class="flatpickr-months">
    <span class="flatpickr-prev-month"></span>
    <div class="flatpickr-month"></div>
    <span class="flatpickr-next-month"></span>
</div>

Кнопки переключения месяцев

Для навигации используются два класса.

Предыдущий месяц:

.flatpickr-prev-month

Следующий месяц:

.flatpickr-next-month

Пример стилизации:

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #444;
    transition: color .2s;
}

Эффект наведения:

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #0066ff;
}

Заголовок месяца

Внутри блока месяцев находится:

<div class="flatpickr-month">

Он содержит информацию о текущем месяце и годе.

Пример структуры:

<div class="flatpickr-month">
    <div class="flatpickr-current-month">
        ...
    </div>
</div>

Текущий месяц

Класс:

.flatpickr-current-month

управляет отображением строки текущего месяца.

Пример:

.flatpickr-current-month {
    font-size: 18px;
    font-weight: 600;
}

Список месяцев

Если включено:

monthSelectorType: "dropdown"

создается элемент:

<select class="flatpickr-monthDropdown-months">

Основной класс:

.flatpickr-monthDropdown-months

Пример оформления:

.flatpickr-monthDropdown-months {
    border: none;
    background: transparent;
}

Поле выбора года

Для отображения года используется:

<input class="numInput cur-year">

Классы:

.numInput
.cur-year

Настройка внешнего вида:

.cur-year {
    font-weight: bold;
    text-align: center;
}

Контейнер дней недели

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

<div class="flatpickr-weekdays">

Внутри:

<div class="flatpickr-weekdaycontainer">

Каждый день недели имеет класс:

.flatpickr-weekday

Пример:

.flatpickr-weekday {
    color: #777;
    font-size: 12px;
    text-transform: uppercase;
}

Контейнер дней месяца

Основная сетка календаря располагается внутри:

<div class="flatpickr-days">

Внутри находится контейнер текущего месяца:

<div class="dayContainer">

Именно здесь создаются все ячейки дат.

Ячейка дня

Каждая дата представлена элементом:

<span class="flatpickr-day">

Это наиболее часто переопределяемый CSS-класс.

Пример:

.flatpickr-day {
    border-radius: 8px;
}

Активная дата

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

.selected

Пример HTML:

<span class="flatpickr-day selected">

Стилизация:

.flatpickr-day.selected {
    background: #0066ff;
    color: white;
}

Текущий день

Для сегодняшней даты применяется:

.today

Пример:

<span class="flatpickr-day today">

Переопределение:

.flatpickr-day.today {
    border-color: #0066ff;
}

Наведение курсора

Состояние hover задается обычным CSS:

.flatpickr-day:hover {
    background: #f3f3f3;
}

Дни соседних месяцев

Для отображения дат предыдущего и следующего месяца используется:

.prevMonthDay
.nextMonthDay

Пример:

.prevMonthDay,
.nextMonthDay {
    color: #bdbdbd;
}

Заблокированные даты

Если дата недоступна для выбора:

<span class="flatpickr-day flatpickr-disabled">

Класс:

.flatpickr-disabled

Пример:

.flatpickr-disabled {
    opacity: .35;
    cursor: not-allowed;
}

Диапазон дат

В режиме:

mode: "range"

используется несколько специальных классов.

Начало диапазона:

.startRange

Конец диапазона:

.endRange

Промежуточные даты:

.inRange

Пример:

.flatpickr-day.inRange {
    background: #dce9ff;
}

Начало:

.flatpickr-day.startRange {
    background: #0066ff;
}

Конец:

.flatpickr-day.endRange {
    background: #0066ff;
}

Контейнер времени

Если активирована настройка:

enableTime: true

создается блок:

<div class="flatpickr-time">

Он содержит элементы выбора времени.

Поля времени

Для часов используются:

.flatpickr-hour

Для минут:

.flatpickr-minute

Для секунд:

.flatpickr-second

Пример:

.flatpickr-hour,
.flatpickr-minute {
    font-size: 16px;
}

AM/PM переключатель

В 12-часовом режиме появляется:

<span class="flatpickr-am-pm">

Класс:

.flatpickr-am-pm

Пример:

.flatpickr-am-pm {
    font-weight: 600;
}

Номер недели

Если включено:

weekNumbers: true

создается колонка:

<div class="flatpickr-weekwrapper">

Внутри находятся номера недель.

Классы:

.flatpickr-weekwrapper
.flatpickr-weeks
.flatpickr-weekday

Пример оформления:

.flatpickr-weekwrapper {
    background: #fafafa;
}

Множественные месяцы

При использовании:

showMonths: 2

или большего значения создаются дополнительные контейнеры:

<div class="dayContainer">

для каждого отображаемого месяца.

Общий контейнер:

.flatpickr-days

автоматически становится шире.

Для настройки отступов часто используются правила:

.dayContainer {
    padding: 0 10px;
}

Анимации открытия

Flatpickr управляет отображением через комбинацию классов:

.open
.animate
.arrowTop
.arrowBottom

Именно они отвечают за:

плавное появление;
направление стрелки;
положение календаря.

Пример переопределения анимации:

.flatpickr-calendar {
    transition: transform .2s ease,
                opacity .2s ease;
}

Темы оформления

Базовый файл:

flatpickr.min.css

содержит стандартную тему.

Дополнительные темы подключаются отдельными файлами:

themes/dark.css
themes/material_blue.css
themes/airbnb.css
themes/confetti.css

Каждая тема использует ту же структуру CSS-классов, изменяя только визуальное оформление.

Это позволяет переключать темы без изменения HTML и JavaScript-кода.

Иерархия основных CSS-классов

Типичная структура календаря выглядит следующим образом:

flatpickr-calendar
│
├── flatpickr-months
│   ├── flatpickr-prev-month
│   ├── flatpickr-month
│   │   └── flatpickr-current-month
│   └── flatpickr-next-month
│
├── flatpickr-weekdays
│   └── flatpickr-weekday
│
├── flatpickr-days
│   └── dayContainer
│       └── flatpickr-day
│
└── flatpickr-time
    ├── flatpickr-hour
    ├── flatpickr-minute
    ├── flatpickr-second
    └── flatpickr-am-pm

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