Calendar
Two Zone Slots
Выбор слота созвона сразу в двух часовых поясах: каждая строка показывает своё и чужое время, а часы вне рабочего дня партнёра помечены.
- calendar
- timezone
- meeting
- scheduling
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/calendar-023
Слот созвона
среда, 15 апреля
17:00 в городе Moscow — это 10:00, ср, 15 апр. в городе New York
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «calendar-023» (Two Zone Slots) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/calendar-023.json
Registry item: https://vibeui.ru/r/calendar-023.json
Ставится в: components/vibeui/calendar-023.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Выбор слота созвона сразу в двух часовых поясах: каждая строка показывает своё и чужое время, а часы вне рабочего дня партнёра помечены.
Список слотов созвона, где каждая строка сразу подписана двумя временами — своим и партнёрским. Разница поясов считается через Intl, а не константой, поэтому переход на летнее время не ломает расчёт; строки, попадающие вне рабочего дня партнёра, помечены цветом и словами. Ноль зависимостей, один файл, своя палитра.
## 3. Как использовать
import { Calendar023 } from "@/components/vibeui/calendar-023"
<Calendar023 homeZone="Europe/Moscow" awayZone="America/New_York" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-calendar-023-* и не подменять её токенами вашей темы (bg-popover, text-muted-foreground и подобными)
- функции zoneOffset и instantOf: смещение зоны читается у Intl, а не считается вычитанием часов, иначе перевод часов даёт ошибку в час
- второй проход в instantOf — в сутки перехода на летнее время одного прохода не хватает, и слот уезжает
- форматирование обоих времён из одного момента: две независимые даты рано или поздно разойдутся
- пометку data-offhours и её текстовую расшифровку: цвет один не должен нести смысл «партнёр спит»
- aria-pressed на строке слота и итог с aria-live="polite" — выбор иначе не объявляется
- подпись чужой даты в итоге: за океаном слот часто попадает на другой календарный день, и это надо сказать словами
## 6. Можно менять
- date — день, для которого показаны слоты
- homeZone и awayZone — идентификаторы часовых поясов IANA
- homeLabel и awayLabel — подписи городов; без них имя берётся из зоны
- officeFrom и officeTo — границы рабочего дня, они же задают список слотов
- locale — локаль подписей и формата времени
- onSelect — обработчик выбранного часа; accent — цвет выделения
## 7. Правила
- Не храните разницу поясов числом в базе: она меняется дважды в год и по решению правительств.
- Идентификатор зоны должен быть из базы IANA («Europe/Moscow»), сокращения вроде MSK и EST Intl не понимает.
- Слот отдаётся часом в домашней зоне — на сервере превращайте его в момент через ту же зону, иначе смысл потеряется.
- Для трёх и более городов список строк станет нечитаемым: там нужна сетка часов, а не пара колонок.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/calendar-023.jsonhttps://vibeui.ru/r/calendar-023.jsonКомпонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-calendar-023-*. Клиентский: выбранный час живёт в useState. Разница поясов не хардкодится: zoneOffset читает смещение зоны через Intl.DateTimeFormat с timeZone и formatToParts, а instantOf двумя проходами находит момент UTC, которому соответствует заданное локальное время в домашней зоне (второй проход нужен в сутки перевода часов). Дальше один и тот же момент форматируется двумя Intl-форматтерами, поэтому строка «17:00 → 10:00» всегда согласована. Признак offhours считается по часу в чужой зоне и вешается на data-offhours, метка «вне часов» дорисовывается CSS-псевдоэлементом. Названия городов по умолчанию выводятся из имени зоны, поэтому смена awayZone меняет и подпись колонки.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"use client"
import { useMemo, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Calendar023Props = Omit<
ComponentPropsWithoutRef<"section">,
"children" | "onSelect"
> & {
date?: string
homeZone?: string
awayZone?: string
homeLabel?: string
awayLabel?: string
/** Границы рабочего дня в обоих городах, в часах. */
officeFrom?: number
officeTo?: number
locale?: string
defaultHour?: number
onSelect?: (hour: number) => void
accent?: string
}
// Идея компонента: созвон с другим городом срывается не из-за календаря,
// а из-за арифметики часовых поясов в голове. Поэтому слот здесь — это
// сразу две подписи времени, а строки вне чужого рабочего дня помечены:
// решение принимают глазами, не считая разницу.
const STYLES = `
:where([data-vibeui-block="calendar-023"]){
--vibeui-calendar-023-bg:oklch(1 0 0);
--vibeui-calendar-023-fg:oklch(0.23 0.014 285);
--vibeui-calendar-023-muted:oklch(0.57 0.014 285);
--vibeui-calendar-023-border:oklch(0.91 0.006 285);
--vibeui-calendar-023-soft:oklch(0.97 0.006 285);
--vibeui-calendar-023-accent:oklch(0.5 0.14 285);
--vibeui-calendar-023-accentsoft:oklch(0.95 0.04 285);
--vibeui-calendar-023-warn:oklch(0.58 0.13 55);
--vibeui-calendar-023-radius:0.75rem;
--vibeui-calendar-023-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="calendar-023"]{
display:flex;flex-direction:column;gap:0.7rem;
width:100%;max-width:26rem;box-sizing:border-box;padding:1rem;
background:var(--vibeui-calendar-023-bg);
border:1px solid var(--vibeui-calendar-023-border);
border-radius:calc(var(--vibeui-calendar-023-radius) + 0.25rem);
color:var(--vibeui-calendar-023-fg);
font-family:var(--vibeui-calendar-023-font);
}
[data-vibeui-block="calendar-023"] [data-part="title"]{
margin:0;font-size:0.95rem;font-weight:700;letter-spacing:-0.01em;
}
[data-vibeui-block="calendar-023"] [data-part="when"]{
margin:0.15rem 0 0;font-size:0.75rem;color:var(--vibeui-calendar-023-muted);
}
[data-vibeui-block="calendar-023"] [data-part="cols"]{
display:grid;grid-template-columns:1fr 1.2rem 1fr;align-items:center;gap:0.4rem;
font-size:0.7rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
color:var(--vibeui-calendar-023-muted);
}
[data-vibeui-block="calendar-023"] [data-part="cols"] span:last-child{text-align:right}
[data-vibeui-block="calendar-023"] [data-part="list"]{
display:flex;flex-direction:column;gap:0.3rem;margin:0;padding:0;list-style:none;
max-height:15rem;overflow:auto;
}
[data-vibeui-block="calendar-023"] [data-part="slot"]{
appearance:none;cursor:pointer;font:inherit;width:100%;
display:grid;grid-template-columns:1fr 1.2rem 1fr;align-items:center;gap:0.4rem;
box-sizing:border-box;padding:0.5rem 0.6rem;
border:1px solid var(--vibeui-calendar-023-border);
border-radius:0.6rem;
background:var(--vibeui-calendar-023-soft);
color:inherit;text-align:left;
font-variant-numeric:tabular-nums;
transition:background-color .16s ease,border-color .16s ease;
}
[data-vibeui-block="calendar-023"] [data-part="slot"]:hover{border-color:var(--vibeui-calendar-023-accent)}
[data-vibeui-block="calendar-023"] [data-part="slot"]:focus-visible{
outline:2px solid var(--vibeui-calendar-023-accent);outline-offset:2px;
}
[data-vibeui-block="calendar-023"] [data-part="slot"][aria-pressed="true"]{
background:var(--vibeui-calendar-023-accentsoft);
border-color:var(--vibeui-calendar-023-accent);
}
[data-vibeui-block="calendar-023"] [data-part="home"]{font-size:0.9rem;font-weight:700}
[data-vibeui-block="calendar-023"] [data-part="arrow"]{
text-align:center;color:var(--vibeui-calendar-023-muted);font-size:0.8rem;
}
[data-vibeui-block="calendar-023"] [data-part="away"]{
text-align:right;font-size:0.9rem;font-weight:600;color:var(--vibeui-calendar-023-muted);
}
[data-vibeui-block="calendar-023"] [data-part="slot"][data-offhours="true"] [data-part="away"]{
color:var(--vibeui-calendar-023-warn);
}
[data-vibeui-block="calendar-023"] [data-part="slot"][data-offhours="true"] [data-part="away"]::after{
content:" вне часов";font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;
}
[data-vibeui-block="calendar-023"] [data-part="foot"]{
margin:0;padding-top:0.6rem;border-top:1px solid var(--vibeui-calendar-023-border);
font-size:0.8125rem;color:var(--vibeui-calendar-023-muted);
}
[data-vibeui-block="calendar-023"] [data-part="foot"] b{color:var(--vibeui-calendar-023-fg)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="calendar-023"] *{animation:none!important;transition:none!important}}
`
/** Смещение зоны в минутах для конкретного момента: считаем через Intl. */
function zoneOffset(zone: string, instant: Date) {
const parts = new Intl.DateTimeFormat("en-US", {
timeZone: zone,
hour12: false,
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
}).formatToParts(instant)
const read = (type: string) =>
Number(parts.find((part) => part.type === type)?.value ?? "0")
const local = Date.UTC(
read("year"),
read("month") - 1,
read("day"),
read("hour") % 24,
read("minute"),
)
return (local - instant.getTime()) / 60000
}
/**
* Момент, в который в зоне zone наступает указанное локальное время.
* Второй проход нужен ради дней перехода на летнее время.
*/
function instantOf(zone: string, date: string, hour: number) {
const [year, month, day] = date.split("-").map(Number)
const naive = Date.UTC(year, month - 1, day, hour)
const first = new Date(naive - zoneOffset(zone, new Date(naive)) * 60000)
return new Date(naive - zoneOffset(zone, first) * 60000)
}
function cityOf(zone: string) {
return (zone.split("/").pop() ?? zone).replace(/_/g, " ")
}
/**
* Выбор слота созвона с двумя часовыми поясами в одной строке.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Calendar023({
date = "2026-04-15",
homeZone = "Europe/Moscow",
awayZone = "America/New_York",
homeLabel,
awayLabel,
officeFrom = 9,
officeTo = 19,
locale = "ru-RU",
defaultHour = 17,
onSelect,
accent,
className,
style,
...props
}: Calendar023Props) {
const [hour, setHour] = useState(defaultHour)
const clock = useMemo(
() => ({
home: new Intl.DateTimeFormat(locale, {
timeZone: homeZone,
hour: "2-digit",
minute: "2-digit",
hour12: false,
}),
away: new Intl.DateTimeFormat(locale, {
timeZone: awayZone,
hour: "2-digit",
minute: "2-digit",
hour12: false,
}),
awayHour: new Intl.DateTimeFormat("en-US", {
timeZone: awayZone,
hour: "2-digit",
hour12: false,
}),
awayDay: new Intl.DateTimeFormat(locale, {
timeZone: awayZone,
weekday: "short",
day: "numeric",
month: "short",
}),
}),
[locale, homeZone, awayZone],
)
const slots = useMemo(
() =>
Array.from({ length: officeTo - officeFrom }, (_, step) => {
const value = officeFrom + step
const instant = instantOf(homeZone, date, value)
const away = Number(clock.awayHour.format(instant).replace(/\D/g, ""))
return {
value,
instant,
home: clock.home.format(instant),
away: clock.away.format(instant),
offhours: away < officeFrom || away >= officeTo,
}
}),
[officeFrom, officeTo, homeZone, date, clock],
)
const picked = slots.find((slot) => slot.value === hour)
const heading = new Intl.DateTimeFormat(locale, {
weekday: "long",
day: "numeric",
month: "long",
}).format(new Date(`${date}T12:00:00`))
const palette = {
...(accent ? { "--vibeui-calendar-023-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-calendar-023" precedence="medium">
{STYLES}
</style>
<section
{...props}
data-vibeui-block="calendar-023"
className={className}
style={palette}
>
<header>
<h3 data-part="title">Слот созвона</h3>
<p data-part="when">{heading}</p>
</header>
<div data-part="cols" aria-hidden="true">
<span>{homeLabel ?? cityOf(homeZone)}</span>
<span />
<span>{awayLabel ?? cityOf(awayZone)}</span>
</div>
<ul data-part="list">
{slots.map((slot) => (
<li key={slot.value}>
<button
type="button"
data-part="slot"
data-offhours={slot.offhours}
aria-pressed={slot.value === hour}
onClick={() => {
setHour(slot.value)
onSelect?.(slot.value)
}}
>
<span data-part="home">{slot.home}</span>
<span data-part="arrow" aria-hidden="true">
→
</span>
<span data-part="away">{slot.away}</span>
</button>
</li>
))}
</ul>
<p data-part="foot" aria-live="polite">
{picked ? (
<>
<b>{picked.home}</b> в городе {homeLabel ?? cityOf(homeZone)} —
это <b>{picked.away}</b>, {clock.awayDay.format(picked.instant)} в
городе {awayLabel ?? cityOf(awayZone)}
</>
) : (
"Слот не выбран"
)}
</p>
</section>
</>
)
}