Ui.Calendar

Provides a calendar where the user can select a day in a month.

Interactive Demo

You can play around with a Ui.Calendar below using the controls.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
Day
2024-12-03
Month
2024-12-01
Size (16px)
Disabled
Change Month on Select
Embeeded
<Ui.Calendar
month={Time.from(2024, 12, 1)}
day={Time.from(2024, 12, 3)}
changeMonthOnSelect={false}
size={Ui.Size.Px(16)}
disabled={false}
embedded={false}/>
Change Month on Select

The changeMonthOnSelect property controls Whether or not to fire the month change event when clicking on a day that is not in the current month.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<>
<Ui.Calendar
onMonthChange={
(month : Time) {
Ui.Notifications.notifyDefault(
<>Time.format(month, Time.Format.ENGLISH, "%Y-%m-%d")</>)
}
}
changeMonthOnSelect={false}
/>
<Ui.Calendar
onMonthChange={
(month : Time) {
Ui.Notifications.notifyDefault(
<>Time.format(month, Time.Format.ENGLISH, "%Y-%m-%d")</>)
}
}
changeMonthOnSelect={true}
/>
</>
Size

The size of the calendar can be set with the size property.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<>
<Ui.Calendar size={Ui.Size.Px(12)}/>
<Ui.Calendar size={Ui.Size.Px(16)}/>
<Ui.Calendar size={Ui.Size.Px(20)}/>
</>
Change Event

The calendar calls the onChange handler (property) when a user selects a day.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<Ui.Calendar
onChange={
(day : Time) {
Ui.Notifications.notifyDefault(
<>Time.format(day, Time.Format.ENGLISH, "%Y-%m-%d")</>)
}
}
/>
Month Change Event

The calendar calls the onMonthChange handler (property) when a user navigates to a different month.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<Ui.Calendar
onMonthChange={
(day : Time) {
Ui.Notifications.notifyDefault(
<>Time.format(day, Time.Format.ENGLISH, "%Y-%m-%d")</>)
}
}
/>
Disabled

The calendar can be disabled using the disabled property.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<>
<Ui.Calendar disabled={false}/>
<Ui.Calendar disabled={true}/>
</>
Embedded

The calendar can be used in an embedded form where there is no padding, border and background using the embedded property.

December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
December - 2024
Mon
Tue
Wed
Thu
Fri
Sat
Sun
25
26
27
28
29
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
04
05
<>
<Ui.Calendar embedded={false}/>
<Ui.Calendar embedded={true}/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.