/ UI
Компоненты

Компонент

Календарь событий

EventCalendar отображает встречи, события на весь день и пересекающиеся интервалы. Поддерживает навигацию, управляемую дату и вид, русские подписи и действия добавления и выбора события. Даты используют локальный часовой пояс, окончание интервала не включается.

Пример

Интерактивный пример

октябрь 2026 г.

пнвтсрчтптсбвс

пятница, 9 октября 2026 г.

Демонстрация на октябрь 2026 года. Изменения сохраняются только до перезагрузки страницы.

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

Импортируйте компонент из публичной точки входа пакета.

"use client";

import { EventCalendar, type EventCalendarView } from "denjs-ui";
import { useState } from "react";

/** Demonstrates independently controlled calendar navigation and presentation. */
export function Example() {
  /** Local date anchoring the visible period. */
  const [date, setDate] = useState(new Date(2026, 9, 9));
  /** Presentation selected in the calendar toolbar. */
  const [view, setView] = useState<EventCalendarView>("month");

  return (
    <EventCalendar
      date={date}
      onDateChange={setDate}
      view={view}
      onViewChange={setView}
      locale="en-US"
      weekStartsOn={1}
      events={[
        {
          id: "design-review",
          title: "Design review",
          start: new Date(2026, 9, 9, 10),
          end: new Date(2026, 9, 9, 11),
          location: "Studio",
        },
        {
          id: "team-day",
          title: "Team day",
          start: new Date(2026, 9, 12),
          allDay: true,
        },
      ]}
    />
  );
}