Компоненты/Лента дней с липкой датой

Лента дней с липкой датой

29 сентября 2026

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

Установка

npm install clsx motion tailwind-merge
pnpm add clsx motion tailwind-merge
yarn add clsx motion tailwind-merge
bun add clsx motion tailwind-merge

Файлы

timeline-calendar.tsx
НазадКарусель-наклонДалееТост

Лента задач, разбитая по дням. Вверху закреплена шапка с текущей датой: как только очередной день доезжает до верхнего края, дата в шапке сменяется на новую с лёгким сдвигом и проявлением.

У каждого дня свой заголовок с числом и днём недели и список задач с круглыми маркерами. Прокрутка вверх возвращает в шапку предыдущие даты.

Вручную

Скопируйте эти файлы в components/timeline-calendar/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { TimelineCalendar } from "@/components/timeline-calendar/timeline-calendar";

const data = [
{ date: "1 окт. / среда", items: ["Созвон с командой", "Ревью макетов"] },
{ date: "2 окт. / четверг", items: ["Релиз", "Ретро"] },
];

export function Week() {
return <TimelineCalendar data={data} dotColor="#66d9e8" />;
}

Пропсы

Пропс
Описание
data

Дни: date вида «1 окт. / среда» и список items

Тип TimelineDay[]

container?

Прокручиваемый контейнер

Тип RefObject<HTMLElement | null>·По умолчанию окно

viewportHeight?

Высота области просмотра, от неё считается нижний отступ

Тип number | string·По умолчанию "100vh"

maxWidth?

Максимальная ширина ленты, px

Тип number·По умолчанию 896

dayGap?

Отступ до и после каждого дня, px

Тип number·По умолчанию 88

itemGap?

Отступ между задачами, px

Тип number·По умолчанию 16

dotSize?

Размер маркера задачи, px

Тип number·По умолчанию 20

dotColor?

Цвет маркеров; по умолчанию полупрозрачный цвет текста

Тип string

headerClassName?

Классы закреплённой шапки (например, её фон)

Тип string

className?

Классы корневого блока

Тип string