Toolbar
Beta

Calendar

The FktCalendar component provides a comprehensive date selection interface with multiple view modes and extensive customization options. Built with Angular signals for optimal performance and reactivity, it supports date, month, and year selection with configurable styling and behavior.

Import

import {FktCalendarComponent} from "frakton-ng/calendar";

Basic calendar

Basic calendar with date selection functionality and month/year navigation.


Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06

Borderless calendar

Calendar displayed without border for seamless integration into containers.


Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06

With disabled dates

Calendar with disabled dates to restrict user selection to valid date ranges.


Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
Past dates
Weekends
Blackout dates (15th of month, Dec 24-26)

Disabled Date Rules:

  • All past dates are disabled
  • Weekends (Saturday & Sunday) are disabled
  • 15th of every month (maintenance day)
  • December 24-26 (holiday period)
Past dates
Weekends
Blackout dates (15th of month, Dec 24-26)

Disabled Date Rules:

  • All past dates are disabled
  • Weekends (Saturday & Sunday) are disabled
  • 15th of every month (maintenance day)
  • December 24-26 (holiday period)

With events

Calendar displaying events and highlighting dates with special significance.


Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06

Click History

Click on any date to see interaction history

Click History

@if (clickHistory().length === 0) {

Click on any date to see interaction history

} @else { @for (item of clickHistory(); track item) {
{{ item }}
} }

Custom styling

Calendar with custom styling and visual indicators for different date states.


Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
Weekends
Holidays
Past dates
Weekends
Holidays
Past dates