Scheduler

Scheduler показывает неделю сеткой: строки — дни, колонки — часы. Клик по ячейке переключает час, клик по названию дня — всю строку, клик по часу в нижнем ряду — всю колонку; под сеткой — сброс. В форме boolean включённая ячейка помечена галочкой, в форме number — числом, выключенная — прочерком. Значение — матрица 7 × 24, bindable.

Статус: experimental · в системе с 2026-09 · интерактивность: always (всегда)

Когда использовать

Расписание показов кампании по дням недели и часам.
Окна активности правила или отчёта.

Не использовать:

Одна дата или диапазон дат — это Input Date и Input Date Range.
Время без дней — это Input Time.

Альтернативы:

input-date-range — диапазон дат без часов
input-time-range — интервал времени в один день

Часы показов

Форма boolean: рабочие часы будней включены, клик по дню переключает строку.

<!--
  🟢

  Форма boolean: рабочие часы будней включены; клик по дню переключает
  строку, по часу — колонку, ссылка снизу сбрасывает всё.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Scheduler from "$lib/ui/Scheduler.svelte";

let value = $state(
	Array.from({ length: 7 }, (_, day) => Array.from({ length: 24 }, (_, hour) => day < 5 && hour >= 9 && hour < 18)),
);
</script>

<Scheduler bind:value label={t("Часы показов")} />

Числа в ячейках

Форма number: ставка по часам, выключенные — прочерк.

<!--
  🟢

  Форма number: ставка по часам — число в ячейке, выключенные — прочерк.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Scheduler from "$lib/ui/Scheduler.svelte";

let value = $state(
	Array.from({ length: 7 }, (_, day) => Array.from({ length: 24 }, (_, hour) => (day < 5 && hour >= 10 && hour < 14 ? 2 : 0))),
);
</script>

<Scheduler bind:value type="number" label={t("Ставка по часам")} />