VibeUI

Calendar

Team Week Grid

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

  • calendar
  • team
  • week
  • availability

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/calendar-016

Загрузка команды

16 мар. — 20 мар.

пн16вт17ср18чт19пт20
Аня Ким6 ч8 ч4 ч2 ч0 ч
Борис Лещ3 ч3 ч8 ч8 ч5 ч
Вера Ной0 ч2 ч2 ч6 ч8 ч
Глеб Ро8 ч8 ч8 ч4 ч1 ч
Дина Соль2 ч0 ч5 ч3 ч7 ч

свободнозанято частичнодень забит (8 ч)

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «calendar-016» (Team Week Grid) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/calendar-016.json

Registry item: https://vibeui.ru/r/calendar-016.json
Ставится в: components/vibeui/calendar-016.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

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

## 2. Что это
Недельная сетка занятости команды: люди по строкам, дни по столбцам, в клетке полоса загрузки и число часов.

Занятость команды на неделю: таблица «люди × дни», в клетке полоса и часы, перегруз выделен отдельным тоном. Серверный, один файл, ноль зависимостей.

## 3. Как использовать
import { Calendar016 } from "@/components/vibeui/calendar-016"

<Calendar016
  weekStart="2026-03-16"
  capacity={8}
  heading="Загрузка команды"
  members={[{ name: "Аня Ким", hours: [6, 8, 4, 2, 0] }]}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-calendar-016-* — иначе после установки блок будет выглядеть иначе, чем в превью
- таблицу с th по строкам и столбцам: без scope клетка теряет и имя человека, и дату
- число часов рядом с полосой: по длине полосы нельзя назвать «шесть часов из восьми»
- отдельный тон для забитого дня: сто процентов и просто много — разные новости для того, кто раздаёт задачи
- контейнер с overflow-x: на телефоне таблица обязана скроллиться внутри блока, а не растягивать страницу
- собственную светлую подложку: тёмный текст таблицы на тёмной карточке каталога не читается

## 6. Можно менять
- состав команды и часы через members
- начало недели через weekStart и норму дня через capacity
- заголовок блока через heading
- язык дат через locale и цвет полос через accent

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

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/calendar-016.json
https://vibeui.ru/r/calendar-016.json

Серверный компонент: данные приходят массивом members, состояния нет. Раскладка — обычная таблица с областями заголовков: имена в th со scope=row, даты в th со scope=col, поэтому скринридер называет клетку по человеку и дню. Клетка несёт и полосу, и число: полоса даёт увидеть свободное окно всей команды одним взглядом, число отвечает на вопрос «насколько занят», на который цвет не отвечает. Ширина полосы задаётся своей переменной в inline-стиле — это единственное динамическое значение, которое нельзя выразить статическим классом. Перегруз красится отдельным тоном: «занят на сто процентов» и «занят сверх нормы» — разные новости. Таблица лежит в контейнере с overflow-x, чтобы на телефоне блок скроллился внутри себя, а не растягивал страницу.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Calendar016Member = {
  name: string
  /** Занятость по дням недели в часах, слева направо. */
  hours: number[]
}

export type Calendar016Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children" | "title"
> & {
  weekStart?: string
  members?: Calendar016Member[]
  capacity?: number
  heading?: string
  locale?: string
  accent?: string
}

// Идея компонента: занятость команды — это таблица «люди × дни», а не
// пять отдельных календарей. Клетка несёт и полосу, и число часов: полоса
// даёт увидеть свободное окно всей команды одним взглядом, число отвечает
// на вопрос «а насколько занят», на который цвет не отвечает.
const STYLES = `
:where([data-vibeui-block="calendar-016"]){
--vibeui-calendar-016-bg:oklch(1 0 0);
--vibeui-calendar-016-fg:oklch(0.24 0.014 265);
--vibeui-calendar-016-muted:oklch(0.62 0.014 265);
--vibeui-calendar-016-border:oklch(0.91 0.006 265);
--vibeui-calendar-016-track:oklch(0.95 0.004 265);
--vibeui-calendar-016-accent:oklch(0.55 0.15 210);
--vibeui-calendar-016-full:oklch(0.56 0.16 25);
--vibeui-calendar-016-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="calendar-016"]{
width:100%;max-width:44rem;box-sizing:border-box;padding:1rem;
background:var(--vibeui-calendar-016-bg);
border:1px solid var(--vibeui-calendar-016-border);border-radius:1rem;
color:var(--vibeui-calendar-016-fg);font-family:var(--vibeui-calendar-016-font);
}
[data-vibeui-block="calendar-016"] [data-part="head"]{
display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.5rem;
margin:0 0 0.75rem;
}
[data-vibeui-block="calendar-016"] [data-part="heading"]{
margin:0;font-size:0.9375rem;font-weight:700;letter-spacing:-0.01em;
}
[data-vibeui-block="calendar-016"] [data-part="range"]{
font-size:0.75rem;color:var(--vibeui-calendar-016-muted);
}
[data-vibeui-block="calendar-016"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="calendar-016"] table{width:100%;min-width:30rem;border-collapse:collapse}
[data-vibeui-block="calendar-016"] thead th{
padding:0 0.25rem 0.4375rem;text-align:center;vertical-align:bottom;
font-size:0.6875rem;font-weight:600;color:var(--vibeui-calendar-016-muted);
border-bottom:1px solid var(--vibeui-calendar-016-border);
}
[data-vibeui-block="calendar-016"] thead th[scope="col"] span{
display:block;text-transform:capitalize;color:var(--vibeui-calendar-016-fg);font-weight:650;
}
[data-vibeui-block="calendar-016"] thead th[data-weekend="true"] span{color:var(--vibeui-calendar-016-muted)}
[data-vibeui-block="calendar-016"] tbody th{
padding:0.375rem 0.625rem 0.375rem 0;text-align:left;white-space:nowrap;
font-size:0.8125rem;font-weight:600;
}
[data-vibeui-block="calendar-016"] tbody tr+tr th,
[data-vibeui-block="calendar-016"] tbody tr+tr td{border-top:1px solid var(--vibeui-calendar-016-border)}
[data-vibeui-block="calendar-016"] td{padding:0.375rem 0.1875rem;vertical-align:middle}
[data-vibeui-block="calendar-016"] [data-part="cell"]{
display:flex;flex-direction:column;align-items:center;gap:0.1875rem;
}
[data-vibeui-block="calendar-016"] [data-part="bar"]{
width:100%;height:0.4375rem;border-radius:0.25rem;overflow:hidden;
background:var(--vibeui-calendar-016-track);
}
[data-vibeui-block="calendar-016"] [data-part="bar"] i{
display:block;height:100%;border-radius:inherit;
width:calc(var(--vibeui-calendar-016-fill,0) * 1%);
background:var(--vibeui-calendar-016-accent);
}
/* Перегруз красится отдельным тоном: «занят на 100%» и «занят сверх нормы»
   — разные новости для того, кто раздаёт задачи. */
[data-vibeui-block="calendar-016"] [data-part="cell"][data-state="full"] [data-part="bar"] i{background:var(--vibeui-calendar-016-full)}
[data-vibeui-block="calendar-016"] [data-part="hours"]{
font-size:0.6875rem;font-variant-numeric:tabular-nums;color:var(--vibeui-calendar-016-muted);
}
[data-vibeui-block="calendar-016"] [data-part="cell"][data-state="free"] [data-part="hours"]{opacity:.5}
[data-vibeui-block="calendar-016"] [data-part="cell"][data-state="full"] [data-part="hours"]{
color:var(--vibeui-calendar-016-full);font-weight:650;
}
[data-vibeui-block="calendar-016"] [data-part="legend"]{
display:flex;flex-wrap:wrap;gap:0.875rem;margin:0.75rem 0 0;
font-size:0.6875rem;color:var(--vibeui-calendar-016-muted);
}
[data-vibeui-block="calendar-016"] [data-part="legend"] span{display:inline-flex;align-items:center;gap:0.3125rem}
[data-vibeui-block="calendar-016"] [data-part="legend"] i{
width:0.75rem;height:0.4375rem;border-radius:0.25rem;background:var(--vibeui-calendar-016-track);
}
[data-vibeui-block="calendar-016"] [data-part="legend"] i[data-tone="busy"]{background:var(--vibeui-calendar-016-accent)}
[data-vibeui-block="calendar-016"] [data-part="legend"] i[data-tone="full"]{background:var(--vibeui-calendar-016-full)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="calendar-016"] *{animation:none!important;transition:none!important}}
`

const DAY = 86400000

const DEFAULT_MEMBERS: Calendar016Member[] = [
  { name: "Аня Ким", hours: [6, 8, 4, 2, 0] },
  { name: "Борис Лещ", hours: [3, 3, 8, 8, 5] },
  { name: "Вера Ной", hours: [0, 2, 2, 6, 8] },
  { name: "Глеб Ро", hours: [8, 8, 8, 4, 1] },
  { name: "Дина Соль", hours: [2, 0, 5, 3, 7] },
]

/**
 * Недельная сетка занятости команды: люди по строкам, дни по столбцам.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Calendar016({
  weekStart = "2026-03-16",
  members = DEFAULT_MEMBERS,
  capacity = 8,
  heading = "Загрузка команды",
  locale = "ru-RU",
  accent,
  className,
  style,
  ...props
}: Calendar016Props) {
  const [year, month, day] = weekStart.split("-").map(Number)
  const first = new Date(year, month - 1, day)
  const columns = Math.max(1, ...members.map((member) => member.hours.length))
  const days = Array.from(
    { length: columns },
    (_, index) => new Date(first.getTime() + index * DAY),
  )

  const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" })
  const short = new Intl.DateTimeFormat(locale, {
    day: "numeric",
    month: "short",
  })

  const palette = {
    ...(accent ? { "--vibeui-calendar-016-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-calendar-016" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="calendar-016"
        className={className}
        style={palette}
      >
        <header data-part="head">
          <h3 data-part="heading">{heading}</h3>
          <p data-part="range">
            {short.format(days[0])} — {short.format(days[days.length - 1])}
          </p>
        </header>
        <div data-part="scroll">
          <table aria-label={heading}>
            <thead>
              <tr>
                <th scope="col" aria-label="Участник" />
                {days.map((date) => {
                  const weekend = date.getDay() === 0 || date.getDay() === 6

                  return (
                    <th
                      key={date.toISOString()}
                      scope="col"
                      data-weekend={weekend}
                    >
                      <span>{weekday.format(date)}</span>
                      {date.getDate()}
                    </th>
                  )
                })}
              </tr>
            </thead>
            <tbody>
              {members.map((member) => (
                <tr key={member.name}>
                  <th scope="row">{member.name}</th>
                  {days.map((date, index) => {
                    const hours = member.hours[index] ?? 0
                    const fill = Math.min(
                      100,
                      Math.round((hours / capacity) * 100),
                    )
                    const state =
                      hours === 0 ? "free" : fill >= 100 ? "full" : "busy"

                    return (
                      <td key={date.toISOString()}>
                        <span
                          data-part="cell"
                          data-state={state}
                          title={`${member.name}, ${short.format(date)}: ${hours} из ${capacity} ч`}
                        >
                          <span data-part="bar" aria-hidden="true">
                            <i
                              style={
                                {
                                  "--vibeui-calendar-016-fill": fill,
                                } as CSSProperties
                              }
                            />
                          </span>
                          <span data-part="hours">{hours} ч</span>
                        </span>
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p data-part="legend">
          <span>
            <i aria-hidden="true" />
            свободно
          </span>
          <span>
            <i data-tone="busy" aria-hidden="true" />
            занято частично
          </span>
          <span>
            <i data-tone="full" aria-hidden="true" />
            день забит ({capacity} ч)
          </span>
        </p>
      </section>
    </>
  )
}