Безкоштовно · MIT · TypeScript · Без залежностей

Швидкий JavaScript-календар подій

Подання Month, Week, Day і Agenda з безперервною навігацією та адаптивними розкладками.

Розрахований на реальні дані застосунку, великі колекції подій і вузькі контейнери — без постійного розростання DOM.

Стабільна версія · 1.0.0

Відкрити інтерактивне демо Документація

npm GitHub

RollDateEvents · подання Week

Подання Week у RollDate Events із подіями на сітці часу

4подання

0залежностей під час виконання

TSтипи

MITліцензія

Безкоштовновідкритий код

Подання

Чотири подання, одна модель події

Month

Огляд місяця з чіпами подій; на вузьких контейнерах — компактні кольорові крапки.

Week

Часова сітка із секцією подій на весь день і коректним розміщенням подій, що перетинаються в часі.

Day

Розклад одного дня з вертикальною навігацією між датами.

Agenda

Компактний список подій, згрупований за датами. Дні без подій пропускаються.

Відкрити інтерактивне демо →

Архітектура

Безперервна навігація без нескінченного DOM

Буферизована навігаціяКожне подання відображає лише обмежений буфер сегментів дат
Завантаження видимого діапазонуonVisibleRangeChange для завантаження даних за потреби
Окреме сховище подійІндексування подій за днями незалежно від відображення
Стабільний скролОновлення подій зберігають навігацію, де це можливо

Як архітектура календаря тримає великі набори даних →

API

API для роботи з подіями

calendar.js

calendar.setEvents(events)
calendar.getEvents()
calendar.addEvent({ id: 2, title: 'Review', start, end })
calendar.updateEvent(1, { title: 'Standup (remote)' })
calendar.removeEvent(1)

Адаптивність

Адаптується до ширини контейнера

Розкладка реагує на контейнер календаря — компактні крапки в Month, читабельні колонки Week, щільні рядки Agenda. Використовує ResizeObserver, коли він доступний.

Швидкий старт

Встановлення з npm

terminal

npm install @rolldate/events

app.js

import { RollDateEvents } from '@rolldate/events'
import '@rolldate/events/styles'

new RollDateEvents('#calendar', {
  defaultView: 'week',
  events: [{ id: 1, title: 'Standup', start: '2026-08-30T09:00:00', end: '2026-08-30T09:30:00' }]
})

Читати документацію npm GitHub

Можливості версії 1.0

Безкоштовно й з відкритим кодом

RollDate Events 1.0 — повноцінна безкоштовна бібліотека календаря подій під ліцензією MIT без залежностей під час виконання.

У версії 1.0 поки немає перетягування та зміни розміру подій, подання ресурсів на часовій шкалі й автоматичного створення повторюваних подій.