VibeUI
РусEng
Войти

Отраслевые секции

Неделя курса календарной лентой

Как проходит неделя — календарной лентой: семь колонок с днями, занятия лежат как события в календаре, лайв пульсирует точкой и залит маркером, пустые дни заштрихованы. Колонки появляются каскадом. Ниже фото занятия и форматы обучения.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • days: день, тип, время, заголовок, текст — несколько событий в один день допустимы
  • weekdays, formats, image, imageAlt, caption; eyebrow, title, lede
  • accent и background, tone

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Неделя курса календарной лентой — Как проходит неделя — календарной лентой: семь колонок с днями, занятия лежат как события в календаре, лайв пульсирует точкой и залит маркером, пустые дни заштрихованы. Колонки появляются каскадом. Ниже фото занятия и форматы обучения.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/course-004?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

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

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

Загружается…

Как использовать

<Course004
  title="Одна неделя курса — по дням"
  days={[
    { day: "пн", kind: "запись", time: "с утра", title: "Три урока недели открываются" },
    { day: "ср", kind: "лайв", time: "19:30 · 1,5 ч", title: "Лайв с автором: разбор и вопросы" },
    { day: "сб", kind: "ревью", time: "до 12:00", title: "Дедлайн домашки" },
  ]}
  image="/photos/lesson.webp"
  formats={[{ title: "18 записанных уроков", text: "по 35–50 минут" }]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Одна неделя курса — по дням
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Отраслевые секции»

Частые вопросы

Как установить компонент «Неделя курса календарной лентой» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Неделя курса календарной лентой»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-092.
Что можно поменять в компоненте «Неделя курса календарной лентой»?
Можно менять: days: день, тип, время, заголовок, текст — несколько событий в один день допустимы; weekdays, formats, image, imageAlt, caption; eyebrow, title, lede; accent и background, tone. Сохранить как есть: импорты card-092 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; семь колонок-дней с событиями и заштрихованными пустыми днями — расписание читается как календарь; пульсирующую точку и заливку маркером у лайва.
Компонент «Неделя курса календарной лентой» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/course-004.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует card-092 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, серверный компонент. Дни группируются по weekdays: каждая колонка — <li data-busy> с подписью дня и списком событий, пустая — заштрихованный span (repeating-linear-gradient). Событие — карточка с цветной полоской слева, мета-строкой «тип · время», заголовком и текстом; kind из набора «лайв/live/эфир/вебинар» даёт data-kind=live: заливка маркером и пульсирующая точка (@keyframes scale/opacity на ::after). Колонки — @keyframes с задержкой --n×80ms. До 48rem (container query) колонки — строки с днём слева (3.2rem/1fr); от 48rem семь колонок; от 64rem фото и форматы в два столбца. Палитра --vibeui-course-004-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • course
  • education
  • edtech
  • landing
  • schedule
  • calendar
  • week
  • format
  • live
  • composite
Исходник компонента

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

Загружается…