HR Design System
FőoldalHR PortálKomponensekNaptár

Naptár komponensek

Ez az oldal a HR és Karrier portálok naptár és eseménykezelő komponenseit mutatja be. Minden komponens az Audi design rendszerével összhangban készült, és rugalmasan alkalmazható különböző kontextusokban.

Havi naptár nézet

A havi naptár nézet lehetővé teszi a teljes hónap eseményeinek áttekintését és kezelését.

2025 Április
H
K
Sze
Cs
P
Szo
V
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
28
29
30
1
2
3
4
Projekt
Tréning
Workshop
Csapatépítés

Részletek

A havi naptár nézet kompakt módon jeleníti meg egy teljes hónap eseményeit, színkódolással jelölve a különböző eseménytípusokat.

Navigáció:
Hónap váltás, aktuális dátum kijelölése
Jelölések:
Színes indikátorok az eseménytípus jelölésére
Kiemelt nap:
Az aktuális nap vizuálisan kiemelve jelenik meg
Interakció:
Napra kattintva megjelennek az aznapi események részletei

Használat

<MonthlyCalendar 
  year="2025"
  month="4"
  events="events"
  eventColors="{ 
    project: '#f50537',
    training: '#f50537',
    workshop: '#0078D7',
    teambuilding: '#644AB5'
  }"
  @day-click="showDayEvents"
/>

Heti naptár nézet

A heti naptár nézet részletesebb beosztásban mutatja az adott hét eseményeit és időbeosztását.

2025 Április
H
K
Sze
Cs
P
Szo
V
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
28
29
30
1
2
3
4
Projekt
Tréning
Workshop
Csapatépítés

Részletek

A havi naptár nézet kompakt módon jeleníti meg egy teljes hónap eseményeit, színkódolással jelölve a különböző eseménytípusokat.

Navigáció:
Hónap váltás, aktuális dátum kijelölése
Jelölések:
Színes indikátorok az eseménytípus jelölésére
Kiemelt nap:
Az aktuális nap vizuálisan kiemelve jelenik meg
Interakció:
Napra kattintva megjelennek az aznapi események részletei

Használat

<MonthlyCalendar 
  year="2025"
  month="4"
  events="events"
  eventColors="{ 
    project: '#f50537',
    training: '#f50537',
    workshop: '#0078D7',
    teambuilding: '#644AB5'
  }"
  @day-click="showDayEvents"
/>

Napi ütemezés nézet

A napi ütemezés nézet óránkénti bontásban jeleníti meg egy adott nap eseményeit és találkozóit.

2025 Április
H
K
Sze
Cs
P
Szo
V
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
28
29
30
1
2
3
4
Projekt
Tréning
Workshop
Csapatépítés

Részletek

A havi naptár nézet kompakt módon jeleníti meg egy teljes hónap eseményeit, színkódolással jelölve a különböző eseménytípusokat.

Navigáció:
Hónap váltás, aktuális dátum kijelölése
Jelölések:
Színes indikátorok az eseménytípus jelölésére
Kiemelt nap:
Az aktuális nap vizuálisan kiemelve jelenik meg
Interakció:
Napra kattintva megjelennek az aznapi események részletei

Használat

<MonthlyCalendar 
  year="2025"
  month="4"
  events="events"
  eventColors="{ 
    project: '#f50537',
    training: '#f50537',
    workshop: '#0078D7',
    teambuilding: '#644AB5'
  }"
  @day-click="showDayEvents"
/>

Esemény részletek

Az esemény részletek komponens egy naptári esemény teljes információkészletét jeleníti meg.

2025 Április
H
K
Sze
Cs
P
Szo
V
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
28
29
30
1
2
3
4
Projekt
Tréning
Workshop
Csapatépítés

Részletek

A havi naptár nézet kompakt módon jeleníti meg egy teljes hónap eseményeit, színkódolással jelölve a különböző eseménytípusokat.

Navigáció:
Hónap váltás, aktuális dátum kijelölése
Jelölések:
Színes indikátorok az eseménytípus jelölésére
Kiemelt nap:
Az aktuális nap vizuálisan kiemelve jelenik meg
Interakció:
Napra kattintva megjelennek az aznapi események részletei

Használat

<MonthlyCalendar 
  year="2025"
  month="4"
  events="events"
  eventColors="{ 
    project: '#f50537',
    training: '#f50537',
    workshop: '#0078D7',
    teambuilding: '#644AB5'
  }"
  @day-click="showDayEvents"
/>

Esemény létrehozás/szerkesztés

Ez a komponens új események létrehozását vagy meglévők szerkesztését teszi lehetővé.

2025 Április
H
K
Sze
Cs
P
Szo
V
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
28
29
30
1
2
3
4
Projekt
Tréning
Workshop
Csapatépítés

Részletek

A havi naptár nézet kompakt módon jeleníti meg egy teljes hónap eseményeit, színkódolással jelölve a különböző eseménytípusokat.

Navigáció:
Hónap váltás, aktuális dátum kijelölése
Jelölések:
Színes indikátorok az eseménytípus jelölésére
Kiemelt nap:
Az aktuális nap vizuálisan kiemelve jelenik meg
Interakció:
Napra kattintva megjelennek az aznapi események részletei

Használat

<MonthlyCalendar 
  year="2025"
  month="4"
  events="events"
  eventColors="{ 
    project: '#f50537',
    training: '#f50537',
    workshop: '#0078D7',
    teambuilding: '#644AB5'
  }"
  @day-click="showDayEvents"
/>