Выбор рабочих дней

Рабочие дни в календаре Flatpickr представляют собой набор дат, доступных для выбора, при этом выходные и праздничные дни исключаются из интерактивного выбора. Логика фильтрации строится вокруг механизмов disable, enable, пользовательских функций и событий рендеринга ячеек календаря.

Наиболее распространённый сценарий — блокировка субботы и воскресенья. В Flatpickr это реализуется через функцию disable, которая принимает массив правил или функцию-предикат.

flatpickr("#calendar", {
  disable: [
    function(date) {
      // 0 — воскресенье, 6 — суббота
      return (date.getDay() === 0 || date.getDay() === 6);
    }
  ]
});

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

Инверсия логики через enable

Вместо исключения выходных часто используется обратная модель — явное указание рабочих дней. Это особенно полезно, когда рабочий график нестандартный (например, сменный или плавающий).

flatpickr("#calendar", {
  enable: [
    function(date) {
      return date.getDay() >= 1 && date.getDay() <= 5;
    }
  ]
});

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

Учет праздничных дней

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

const holidays = [
  "2026-01-01",
  "2026-03-08",
  "2026-05-01"
];

flatpickr("#calendar", {
  disable: [
    function(date) {
      const iso = date.toISOString().slice(0, 10);
      return holidays.includes(iso);
    },
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ]
});

Каждое правило в disable обрабатывается последовательно, формируя итоговую недоступность даты.

Комбинированная модель рабочих дней

В реальных приложениях логика рабочих дней почти всегда комбинированная: будни + исключения по праздникам + иногда региональные особенности.

function isHoliday(date, holidaysSet) {
  return holidaysSet.has(date.toISOString().slice(0, 10));
}

const holidaysSet = new Set([
  "2026-01-01",
  "2026-03-08",
  "2026-05-01"
]);

flatpickr("#calendar", {
  disable: [
    function(date) {
      const day = date.getDay();
      if (day === 0 || day === 6) return true;
      if (isHoliday(date, holidaysSet)) return true;
      return false;
    }
  ]
});

Использование Set снижает сложность проверки и ускоряет обработку при больших списках праздничных дат.

Гибкая настройка через пользовательские правила

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

  • филиала компании
  • региона
  • типа пользователя
  • календаря проекта

Пример условной логики:

flatpickr("#calendar", {
  disable: [
    function(date) {
      const day = date.getDay();

      const isWeekend = (day === 0 || day === 6);
      const isFirstHalfMonth = date.getDate() <= 15;

      // например, во второй половине месяца по субботам могут быть рабочие дни
      if (isWeekend && isFirstHalfMonth) {
        return true;
      }

      return false;
    }
  ]
});

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

Визуальная маркировка рабочих и нерабочих дней

Хотя disable управляет доступностью, визуальная дифференциация часто реализуется через onDayCreate, где можно модифицировать DOM каждой ячейки.

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

    if (day === 0 || day === 6) {
      dayElem.classList.add("non-working-day");
    } else {
      dayElem.classList.add("working-day");
    }
  }
});

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

Диапазоны рабочих дней

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

flatpickr("#calendar", {
  minDate: "2026-01-01",
  maxDate: "2026-12-31",
  disable: [
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ]
});

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

Динамическое обновление рабочих дней

В некоторых интерфейсах рабочие дни могут меняться без перезагрузки компонента. Flatpickr поддерживает динамическое обновление через методы set() и redraw().

const fp = flatpickr("#calendar", {
  disable: []
});

function setNewSchedule(holidays) {
  fp.set("disable", [
    function(date) {
      const iso = date.toISOString().slice(0, 10);
      return holidays.includes(iso) || date.getDay() === 0 || date.getDay() === 6;
    }
  ]);

  fp.redraw();
}

Это позволяет обновлять календарь в зависимости от API-ответов или пользовательских настроек.

Локализация рабочих дней

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

flatpickr("#calendar", {
  locale: {
    firstDayOfWeek: 1
  },
  disable: [
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ]
});

Хотя firstDayOfWeek не изменяет саму логику getDay(), он влияет на пользовательское восприятие структуры недели.

Сложные сценарии рабочих графиков

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

const schedule = {
  0: "off",
  1: "work",
  2: "work",
  3: "night",
  4: "work",
  5: "work",
  6: "off"
};

flatpickr("#calendar", {
  disable: [
    function(date) {
      return schedule[date.getDay()] === "off";
    }
  ]
});

Такая модель позволяет расширять календарь до уровня полноценного планировщика ресурсов.

Поведение при пересечении правил

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

disable: [
  isWeekend,
  isHoliday,
  isMaintenanceDay
]

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

Оглавление