مكوّن Calendar لـ Angular | ng-hub-ui-calendar

مكوّن تقويم لـ Angular مع عروض الأحداث والسحب والإفلات والقوالب والتعريب ومتغيرات CSS لواجهات الجدولة.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

صُمّم مكوّن التقويم هذا لـ Angular لواجهات الجدولة التي تحتاج إلى عروض قابلة للتخصيص وعرض الأحداث والسحب والإفلات وتنسيق جاهز للإنتاج.

التثبيت

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