Календарь
График смен
График смен таблицей «сотрудники × дни»: код смены в клетке, цвет по типу и итог смен справа, так что дыру в покрытии видно как пустой столбец.
Что можно поменять
- heading — заголовок над графиком
- weekStart — первый день недели строкой YYYY-MM-DD
- people — список сотрудников с ролью и семью сменами подряд
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/calendar-025?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-calendar-025-*. Серверный: состояния нет, всё считается из пропа people при рендере. Разметка — настоящая <table> с <th scope="col"> у дней и <th scope="row"> у сотрудников, поэтому скринридер читает клетку как «Ирина Соколова, вторник». В клетке лежит короткий код под aria-hidden и полное название смены в визуально скрытом [data-part="sr"], так что цвет не единственный носитель смысла. Тип смены выражен атрибутом data-shift, палитра для каждого типа своя. Плотность строк переключается переменной --vibeui-calendar-025-cell через data-density, горизонтальная прокрутка живёт в отдельной обёртке [data-part="scroll"], поэтому таблица не растягивает карточку. Тема берётся из color-scheme окружения через light-dark(): подложки у компонента по умолчанию нет, он лежит прямо на фоне страницы и темнеет вместе с ней, а проп background возвращает плашку. Все подписи — заголовок колонки сотрудников, названия и коды смен — приходят пропами, русские значения лежат в дефолтах.
Теги
- calendar
- shifts
- roster
- team
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…