Prism Docs

Calendar

A full-featured calendar panel for displaying and selecting dates.

Card Mode

SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11
Click a date to select it. 
<prism-calendar
  [fullscreen]="false"
  [(value)]="selectedDate"
  (selectChange)="onDateSelect($event)"
/>

Full-Screen Mode

SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11
<prism-calendar
  [fullscreen]="true"
  [(value)]="selectedDate"
/>

Year View

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec 
<prism-calendar
  [fullscreen]="false"
  mode="year"
/>

Disabled Dates

SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11
// Disable weekends
disabledFn = (date: Date) => {
  const day = date.getDay();
  return day === 0 || day === 6;
};

<prism-calendar
  [fullscreen]="false"
  [disabledDate]="disabledFn"
/>
NameTypeDefaultDescription
valueDate | nullnullSelected date (two-way binding via model).
mode'month' | 'year''month'View mode: day grid or month picker.
fullscreenbooleantrueFull-width mode or compact card mode.
disabledDate(date: Date) => booleannullFunction to disable specific dates.
panelChangeEventEmitter<{date, mode}>—Emitted when month/year navigation changes.
selectChangeEventEmitter<Date>—Emitted when a date is clicked.