v3.3.1
  • Спонсор
  • Дополнительные возможности

    Сворачивание

    enableCollapse добавляет под сеткой элемент управления. Клик по нему сворачивает месяц до одной недели, повторный клик разворачивает обратно. По умолчанию опция выключена и не требует enableSwipe или animation.

    Элемент подстраивается под устройство. С мышью это шеврон, на сенсорном экране — черточка, которую можно тянуть вверх и вниз, и календарь всё это время едет за пальцем. При медленной тяге нужно пройти четверть пути, а быстрый взмах может завершить переход раньше, потому что учитывается и скорость отпускания. В остальных случаях календарь возвращается назад.

    Целевая неделя выбирается по первой выбранной дате, если она относится к отображаемому месяцу. Иначе календарь использует сегодняшний день, если он относится к этому месяцу, а в последнюю очередь — первое число отображаемого месяца.

    В свёрнутом виде стрелки листают по одной неделе. При разворачивании календарь показывает месяц вокруг той же недели.

    Сворачивание переключает type на 'week', поэтому calendar.type показывает текущее состояние, а set({ type: 'week' }) делает то же самое без перехода. Опцию принимают только типы default и week; вместе с multiple она бросает ошибку на init().

    Тайминги

    Переход использует опцию animation. Его тайминги можно настроить отдельно через группу collapse:

    ts
    new Calendar('#calendar', {
      animation: { collapse: { duration: 450 } },
      enableCollapse: true,
    });

    Без animation или при запросе уменьшения движения через prefers-reduced-motion: reduce тяга всё так же следует за пальцем, но отпускание срабатывает мгновенно.