Компонент Calendar для Angular | ng-hub-ui-calendar

Компонент календаря для Angular с представлениями событий, drag and drop, шаблонами, интернационализацией и CSS-переменными для интерфейсов планирования.

Обзор

Почему команды ищут эту библиотеку

Этот компонент календаря для Angular спроектирован для интерфейсов планирования, которым нужны настраиваемые представления, рендеринг событий, drag and drop и готовая к продакшену тематизация.

Установка

npm install ng-hub-ui-calendar

Перейти к

Идеально для

  • инструменты бронирования
  • командные календари
  • планирование ресурсов
  • управление событиями

О библиотеке calendar

ng-hub-ui-calendar помогает командам Angular создавать инструменты бронирования, командные расписания и экраны планирования с переиспользуемой поверхностью календаря. Он поддерживает тот тип рендеринга событий и паттерны взаимодействия, которые ожидаются в реальных продуктах планирования.

Руководства по возможностям

Представления и навигация

Переключение между представлениями месяца, недели, дня и года и перемещение между периодами

Примеры:
Представления календаря

Представления календаря

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Team Meeting
Lunch Break
27
Project Deadline
28
29
30
1
2
3
4
5
6
7
8
9
10
11
Навигация

Навигация

Current Date: Friday, June 26, 2026

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Today's Event
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Navigation Log:

События

Отображение событий и обработка взаимодействий с событиями и днями

Примеры:
Обработка событий

Обработка событий

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Important Meeting
Casual Lunch
27
Project Review
28
29
30
1
2
3
4
5
6
7
8
9
10
11
Переполнение содержимого события

Переполнение содержимого события

This example uses very long event titles and descriptions to verify that overflowing content does not resize calendar columns or break the month grid layout.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
28
29
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
30
1
Customer workshop: scope alignment, backlog refinement, and technical constraints review
2
3
4
5
6
7
8
9
10
11
События drag & drop

События drag & drop

Drag events to move them to different days.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Movable Meeting
27
Reschedule This
28
Flexible Task
29
30
1
2
3
4
5
6
7
8
9
10
11

Drop Log:

No drops yet. Try dragging an event!

Шаблоны

Настройка отрисовки событий и ячеек дней с помощью шаблонов

Примеры:
Пользовательские шаблоны

Пользовательские шаблоны

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
262 events
271 events
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Конфигурация

Настройка поведения календаря через параметры конфигурации

Примеры:
Настройка календаря

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

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Morning Standup
Lunch Break
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

Стилизация и i18n

Темизация через CSS-переменные и локализация календаря

Примеры:
Темизация через переменные CSS

Темизация через переменные CSS

This example customizes the calendar using --hub-calendar-* CSS variables.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Design Review
27
Client Call
28
Roadmap Planning
29
30
1
2
3
4
5
6
7
8
9
10
11
Интернационализация (i18n)

Интернационализация (i18n)

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
International Meeting
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

i18n Support:

The calendar uses ng-hub-ui-utils TranslatePipe for labels.

Configure translations via provideHubTranslation() with the CALENDAR_I18N dictionary.

Ключевые возможности

Последние изменения

Version 21.1.1 - 3/19/26, 12:00 AM

changed: Co-locate SCSS with component via styleUrl; no manual @use import needed.

changed: Removed hardcoded design system token defaults from stylesheet.

fixed: Fixed grid overflow: added min-width: 0 to tracks, day cells, and event containers.

Version 21.1.0 - 3/10/26, 12:00 AM

added: Multiple calendar views: month, week, day, year.

added: Native drag-and-drop event support.

Связанные библиотеки

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-paginable