@progress/kendo-angular-dateinputs 19.1.2-develop.3 → 19.1.2-develop.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/calendar/calendar.component.d.ts +40 -56
  2. package/calendar/calendar.module.d.ts +10 -21
  3. package/calendar/calendars.module.d.ts +10 -21
  4. package/calendar/localization/calendar-custom-messages.component.d.ts +9 -1
  5. package/calendar/localization/multiview-calendar-custom-messages.component.d.ts +9 -1
  6. package/calendar/models/orientation.d.ts +10 -1
  7. package/calendar/models/selection-range-end.type.d.ts +11 -1
  8. package/calendar/models/selection-range.interface.d.ts +18 -3
  9. package/calendar/models/selection.d.ts +19 -4
  10. package/calendar/models/type.d.ts +7 -3
  11. package/calendar/models/view.type.d.ts +12 -1
  12. package/calendar/multiview-calendar.component.d.ts +49 -40
  13. package/calendar/multiview-calendar.module.d.ts +1 -0
  14. package/calendar/templates/cell-template.directive.d.ts +16 -19
  15. package/calendar/templates/century-cell-template.directive.d.ts +15 -19
  16. package/calendar/templates/decade-cell-template.directive.d.ts +15 -19
  17. package/calendar/templates/footer-template.directive.d.ts +16 -17
  18. package/calendar/templates/header-template.directive.d.ts +19 -18
  19. package/calendar/templates/header-title-template.directive.d.ts +15 -18
  20. package/calendar/templates/month-cell-template.directive.d.ts +15 -17
  21. package/calendar/templates/navigation-item-template.directive.d.ts +15 -18
  22. package/calendar/templates/weeknumber-cell-template.directive.d.ts +15 -17
  23. package/calendar/templates/year-cell-template.directive.d.ts +15 -20
  24. package/codemods/utils.js +0 -3
  25. package/dateinput/dateinput.component.d.ts +50 -119
  26. package/dateinput/dateinput.module.d.ts +15 -2
  27. package/dateinput/localization/dateinput-custom-messages.component.d.ts +18 -1
  28. package/dateinput/models/format-placeholder.model.d.ts +15 -20
  29. package/dateinput/models/format-settings.model.d.ts +14 -4
  30. package/dateinput/models/incremental-steps.model.d.ts +16 -1
  31. package/datepicker/datepicker.component.d.ts +68 -127
  32. package/datepicker/datepicker.module.d.ts +11 -2
  33. package/datepicker/localization/datepicker-custom-messages.component.d.ts +11 -1
  34. package/daterange/auto-correct-on.type.d.ts +2 -1
  35. package/daterange/date-range-end-input.directive.d.ts +25 -24
  36. package/daterange/date-range-popup-template.directive.d.ts +13 -2
  37. package/daterange/date-range-popup.component.d.ts +83 -73
  38. package/daterange/date-range-selection.directive.d.ts +10 -9
  39. package/daterange/date-range-start-input.directive.d.ts +29 -27
  40. package/daterange/date-range.component.d.ts +4 -6
  41. package/daterange/date-range.service.d.ts +27 -27
  42. package/datetimepicker/datetimepicker.component.d.ts +91 -79
  43. package/datetimepicker/datetimepicker.module.d.ts +16 -2
  44. package/datetimepicker/localization/datetimepicker-custom-messages.component.d.ts +10 -1
  45. package/esm2022/calendar/calendar.component.mjs +40 -56
  46. package/esm2022/calendar/calendar.module.mjs +10 -21
  47. package/esm2022/calendar/calendars.module.mjs +10 -21
  48. package/esm2022/calendar/localization/calendar-custom-messages.component.mjs +9 -1
  49. package/esm2022/calendar/localization/multiview-calendar-custom-messages.component.mjs +9 -1
  50. package/esm2022/calendar/models/selection-range.interface.mjs +2 -0
  51. package/esm2022/calendar/models/selection.mjs +11 -0
  52. package/esm2022/calendar/multiview-calendar.component.mjs +49 -40
  53. package/esm2022/calendar/multiview-calendar.module.mjs +1 -0
  54. package/esm2022/calendar/templates/cell-template.directive.mjs +16 -19
  55. package/esm2022/calendar/templates/century-cell-template.directive.mjs +15 -19
  56. package/esm2022/calendar/templates/decade-cell-template.directive.mjs +15 -19
  57. package/esm2022/calendar/templates/footer-template.directive.mjs +16 -17
  58. package/esm2022/calendar/templates/header-template.directive.mjs +19 -18
  59. package/esm2022/calendar/templates/header-title-template.directive.mjs +15 -18
  60. package/esm2022/calendar/templates/month-cell-template.directive.mjs +15 -17
  61. package/esm2022/calendar/templates/navigation-item-template.directive.mjs +15 -18
  62. package/esm2022/calendar/templates/weeknumber-cell-template.directive.mjs +15 -17
  63. package/esm2022/calendar/templates/year-cell-template.directive.mjs +15 -20
  64. package/esm2022/dateinput/dateinput.component.mjs +57 -126
  65. package/esm2022/dateinput/dateinput.module.mjs +15 -2
  66. package/esm2022/dateinput/localization/dateinput-custom-messages.component.mjs +18 -1
  67. package/esm2022/datepicker/datepicker.component.mjs +71 -130
  68. package/esm2022/datepicker/datepicker.module.mjs +11 -2
  69. package/esm2022/datepicker/localization/datepicker-custom-messages.component.mjs +11 -1
  70. package/esm2022/daterange/date-range-end-input.directive.mjs +25 -24
  71. package/esm2022/daterange/date-range-popup-template.directive.mjs +13 -2
  72. package/esm2022/daterange/date-range-popup.component.mjs +83 -73
  73. package/esm2022/daterange/date-range-selection.directive.mjs +10 -9
  74. package/esm2022/daterange/date-range-start-input.directive.mjs +29 -27
  75. package/esm2022/daterange/date-range.component.mjs +4 -6
  76. package/esm2022/daterange/date-range.service.mjs +27 -27
  77. package/esm2022/datetimepicker/datetimepicker.component.mjs +94 -82
  78. package/esm2022/datetimepicker/datetimepicker.module.mjs +16 -2
  79. package/esm2022/datetimepicker/localization/datetimepicker-custom-messages.component.mjs +10 -1
  80. package/esm2022/package-metadata.mjs +2 -2
  81. package/esm2022/timepicker/localization/messages.mjs +14 -14
  82. package/esm2022/timepicker/localization/timepicker-custom-messages.component.mjs +12 -1
  83. package/esm2022/timepicker/timepicker.component.mjs +57 -119
  84. package/esm2022/timepicker/timepicker.module.mjs +13 -2
  85. package/esm2022/timepicker/timeselector.component.mjs +24 -40
  86. package/fesm2022/progress-kendo-angular-dateinputs.mjs +913 -1015
  87. package/package.json +13 -12
  88. package/popup-settings.model.d.ts +3 -10
  89. package/timepicker/localization/messages.d.ts +14 -14
  90. package/timepicker/localization/timepicker-custom-messages.component.d.ts +12 -1
  91. package/timepicker/timepicker.component.d.ts +53 -115
  92. package/timepicker/timepicker.module.d.ts +13 -2
  93. package/timepicker/timeselector.component.d.ts +24 -40
@@ -40,17 +40,13 @@ export declare const RANGE_CALENDAR_VALUE_ACCESSOR: any;
40
40
  export declare const RANGE_CALENDAR_RANGE_VALIDATORS: any;
41
41
  /**
42
42
  * Represents the Kendo UI MultiViewCalendar component for Angular.
43
- *
44
43
  * @example
45
- * ```ts
46
- * _@Component({
47
- * selector: 'my-app',
48
- * template: `
49
- * <kendo-multiviewcalendar></kendo-multiviewcalendar>
50
- * `
51
- * })
52
- * export class AppComponent { }
44
+ * ```html
45
+ * <kendo-multiviewcalendar> </kendo-multiviewcalendar>
53
46
  * ```
47
+ *
48
+ * @remarks
49
+ * Supported children components are: {@link MultiViewCalendarCustomMessagesComponent}.
54
50
  */
55
51
  export declare class MultiViewCalendarComponent implements AfterViewInit, ControlValueAccessor, OnChanges, DoCheck, OnDestroy, Validator {
56
52
  bus: BusViewService;
@@ -62,7 +58,8 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
62
58
  private disabledDatesService;
63
59
  private selectionService;
64
60
  /**
65
- * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
61
+ * Shows days that fall outside the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
62
+ *
66
63
  * @default true
67
64
  */
68
65
  showOtherMonthDays: boolean;
@@ -93,16 +90,16 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
93
90
  */
94
91
  id: string;
95
92
  /**
96
- * Sets or gets the `focusedDate` property of the Calendar and
97
- * defines the focused date of the component
93
+ * Specifies the focused date of the Calendar
98
94
  * ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
99
95
  *
100
- * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
96
+ * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
101
97
  */
102
98
  set focusedDate(focusedDate: Date);
103
99
  get focusedDate(): Date;
104
100
  /**
105
101
  * Toggles the visibility of the footer.
102
+ *
106
103
  * @default false
107
104
  */
108
105
  footer: boolean;
@@ -119,21 +116,21 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
119
116
  */
120
117
  get calendarHeaderIdLabel(): string;
121
118
  /**
122
- * Sets or gets the `min` property of the Calendar and
123
- * defines the minimum allowed date value.
124
- * By default, the `min` value is `1900-1-1`.
119
+ * Specifies the minimum allowed date value
120
+ *
121
+ * @default 1970-01-01
125
122
  */
126
123
  set min(min: Date);
127
124
  get min(): Date;
128
125
  /**
129
- * Sets or gets the `max` property of the Calendar and
130
- * defines the maximum allowed date value.
131
- * By default, the `max` value is `2099-12-31`.
126
+ * Specifies the maximum allowed date value
127
+ *
128
+ * @default 2099-12-31
132
129
  */
133
130
  set max(max: Date);
134
131
  get max(): Date;
135
132
  /**
136
- * Determines whether the built-in min or max validators are enforced when validating a form.
133
+ * Determines whether the built-in `min` or `max` validators are enforced when validating a form.
137
134
  *
138
135
  * @default false
139
136
  */
@@ -142,16 +139,14 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
142
139
  * Determines whether the built-in validator for disabled
143
140
  * date ranges is enforced when validating a form
144
141
  * ([see example](slug:disabled_dates_multiviewcalendar)).
142
+ *
143
+ * @default false
145
144
  */
146
145
  disabledDatesRangeValidation: boolean;
147
146
  /**
148
147
  * Sets the Calendar selection mode
149
148
  * ([see example]({% slug selection_multiviewcalendar %})).
150
- *
151
- * The available values are:
152
- * * `single` (default)
153
- * * `multiple`
154
- * * `range`
149
+ * @default 'single'
155
150
  */
156
151
  set selection(_selection: CalendarSelection);
157
152
  get selection(): CalendarSelection;
@@ -173,16 +168,19 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
173
168
  set value(candidate: Date | Date[] | SelectionRange | null);
174
169
  get value(): Date | Date[] | SelectionRange | null;
175
170
  /**
176
- * Sets or gets the `disabled` property of the Calendar and
177
- * determines whether the component is active
171
+ * Specifies whether the component is disabled
178
172
  * ([see example]({% slug disabled_multiviewcalendar %})).
179
173
  * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiviewcalendar#toc-managing-the-multiviewcalendar-disabled-state-in-reactive-forms).
174
+ *
175
+ * @default false
180
176
  */
181
177
  disabled: boolean;
182
178
  /**
183
- * Sets or gets the `tabindex` property of the Calendar. Based on the
179
+ * Specifies the `tabindex` property of the Calendar. Based on the
184
180
  * [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
185
181
  * it determines whether the component is focusable.
182
+ *
183
+ * @default 0
186
184
  */
187
185
  tabindex: number;
188
186
  /**
@@ -191,7 +189,8 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
191
189
  set tabIndex(tabIndex: number);
192
190
  get tabIndex(): number;
193
191
  /**
194
- * Sets the format of the displayed Calendar week days' names.
192
+ * Specifies the format of the displayed week day names.
193
+ *
195
194
  * @default 'short'
196
195
  */
197
196
  weekDaysFormat?: WeekDaysFormat;
@@ -200,29 +199,35 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
200
199
  */
201
200
  isActive: boolean;
202
201
  /**
203
- * Sets the dates of the MultiViewCalendar that will be disabled
202
+ * Specifies the dates of the MultiViewCalendar that will be disabled
204
203
  * ([see example]({% slug disabled_dates_multiviewcalendar %})).
205
204
  */
206
205
  set disabledDates(value: ((date: Date) => boolean) | Date[] | Day[]);
207
206
  /**
208
- * Defines the active view that the Calendar initially renders
209
- * ([see example]({% slug viewoptions_multiviewcalendar %})).
207
+ * Specifies the active view that the Calendar initially renders.
210
208
  * By default, the active view is `month`.
211
209
  *
212
210
  * > You have to set `activeView` within the `topView`-`bottomView` range.
211
+ *
212
+ * @default month
213
213
  */
214
214
  activeView: CalendarView;
215
215
  /**
216
- * Defines the bottommost view, to which the user can navigate
217
- * ([see example](slug:viewdepth_multiviewcalendar)).
216
+ * Specifies the bottommost view to which you can navigate.
217
+ *
218
+ * @default month
218
219
  */
219
220
  bottomView: CalendarView;
220
221
  /**
221
- * Defines the topmost view, to which the user can navigate.
222
+ * Specifies the topmost view to which you can navigate.
223
+ *
224
+ * @default century
222
225
  */
223
226
  topView: CalendarView;
224
227
  /**
225
- * Determines whether to display a header for every view (for example the month name).
228
+ * Determines whether to display a header for every view (for example, the month name).
229
+ *
230
+ * @default false
226
231
  */
227
232
  showViewHeader: boolean;
228
233
  /**
@@ -234,12 +239,14 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
234
239
  */
235
240
  animateNavigation: boolean;
236
241
  /**
237
- * Determines whether to display a week number column in the `month` view
242
+ * Specifies whether to display a week number column in the `month` view
238
243
  * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
244
+ *
245
+ * @default false
239
246
  */
240
247
  weekNumber: boolean;
241
248
  /**
242
- * Specify, which end of the defined selection range should be marked as active.
249
+ * Specifies which end of the defined selection range should be marked as active.
243
250
  *
244
251
  * > Value will be ignored if the selection range is undefined.
245
252
  * > If range selection is used then the default value is 'start'.
@@ -247,7 +254,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
247
254
  set activeRangeEnd(_activeRangeEnd: SelectionRangeEnd);
248
255
  get activeRangeEnd(): SelectionRangeEnd;
249
256
  /**
250
- * Sets or gets the `selectionRange` property of the Calendar and
257
+ * Specifies the `selectionRange` property and
251
258
  * defines the selection range of the component
252
259
  * ([see example](slug:selection_multiviewcalendar#toc-range-selection)).
253
260
  * > We recommend using the `value` property as it now supports `range` selection.
@@ -255,8 +262,10 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
255
262
  set selectionRange(range: SelectionRange);
256
263
  get selectionRange(): SelectionRange;
257
264
  /**
258
- * Sets or gets the `views` property of the Calendar and
265
+ * Specifies the `views` property and
259
266
  * defines the number of rendered months.
267
+ *
268
+ * @default 2
260
269
  */
261
270
  views: number;
262
271
  /**
@@ -16,6 +16,7 @@ import * as i10 from "./templates/navigation-item-template.directive";
16
16
  import * as i11 from "./templates/weeknumber-cell-template.directive";
17
17
  import * as i12 from "./templates/year-cell-template.directive";
18
18
  /**
19
+ * Required for adding all MultiViewCalendar features in NgModule-based Angular applications.
19
20
  * The package exports:
20
21
  * - `CellTemplateDirective`&mdash;The month cell template directive.
21
22
  * - `MonthCellTemplateDirective`&mdash;The month cell template directive.
@@ -5,30 +5,27 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the cell content of the Calendar. To define the cell template, nest an `<ng-template>` tag
9
- * with the `kendoCalendarCellTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details
11
- * about the current cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of calendar cells
11
+ * in the month view. The template context provides access to the current date and cell context information.
12
+ *
13
+ * Template Context Variables:
14
+ * - `date` - The Date object representing the current cell's date
15
+ * - `cellContext` - Additional context information about the current cell
12
16
  *
13
17
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
18
  *
15
- * > `kendoCalendarCellTemplate` is equivalent to
16
- * > [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
19
+ * `kendoCalendarCellTemplate` is equivalent to
20
+ * [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
17
21
  *
18
22
  * @example
19
- * ```ts
20
- * _@Component({
21
- * selector: 'my-app',
22
- * styles: ['.custom { color: red; }'],
23
- * template: `
24
- * <kendo-calendar>
25
- * <ng-template kendoCalendarCellTemplate let-date>
26
- * <span class="custom">{{date.getDate()}}</span>
27
- * </ng-template>
28
- * </kendo-calendar>
29
- * `
30
- * })
31
- * export class AppComponent { }
23
+ * ```html
24
+ * <kendo-calendar>
25
+ * <ng-template kendoCalendarCellTemplate let-date let-cellContext="cellContext">
26
+ * <span class="custom">{{date.getDate()}}</span>
27
+ * </ng-template>
28
+ * </kendo-calendar>
32
29
  * ```
33
30
  */
34
31
  export declare class CellTemplateDirective {
@@ -5,29 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the century cell content of the Calendar. To define the century cell template, nest an `<ng-template>`
9
- * tag with the `kendoCalendarCenturyCellTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details about
11
- * the current century cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the century cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of century cells
11
+ * when the Calendar is in century view. The template context provides access to the current date
12
+ * and cell context information.
13
+ *
14
+ * Template Context Variables:
15
+ * - `date` - The Date object representing the current cell's date
16
+ * - `cellContext` - Additional context information about the current century cell
12
17
  *
13
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
19
  *
15
20
  * @example
16
- * ```ts
17
- * _@Component({
18
- * selector: 'my-app',
19
- * styles: ['.custom { color: red; }'],
20
- * template: `
21
- * <kendo-calendar [activeView]="activeView">
22
- * <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
23
- * <span class="custom">{{context.formattedValue}}</span>
24
- * </ng-template>
25
- * </kendo-calendar>
26
- * `
27
- * })
28
- * export class AppComponent {
29
- * public activeView: CalendarView = 'century';
30
- * }
21
+ * ```html
22
+ * <kendo-calendar [activeView]="activeView">
23
+ * <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
24
+ * <span class="custom">{{context.formattedValue}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
31
27
  * ```
32
28
  */
33
29
  export declare class CenturyCellTemplateDirective {
@@ -5,29 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the decade cell content of the Calendar. To define the decade cell template, nest an `<ng-template>`
9
- * tag with the `kendoCalendarDecadeCellTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details about
11
- * the current decade cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the decade cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of decade cells
11
+ * when the Calendar is in decade view. The template context provides access to the current date
12
+ * and cell context information.
13
+ *
14
+ * Template Context Variables:
15
+ * - `date` - The Date object representing the current cell's date
16
+ * - `cellContext` - Additional context information about the current decade cell
12
17
  *
13
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
19
  *
15
20
  * @example
16
- * ```ts
17
- * _@Component({
18
- * selector: 'my-app',
19
- * styles: ['.custom { color: red; }'],
20
- * template: `
21
- * <kendo-calendar [activeView]="activeView">
22
- * <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
23
- * <span class="custom">{{context.formattedValue}}</span>
24
- * </ng-template>
25
- * </kendo-calendar>
26
- * `
27
- * })
28
- * export class AppComponent {
29
- * public activeView: CalendarView = 'decade';
30
- * }
21
+ * ```html
22
+ * <kendo-calendar [activeView]="activeView">
23
+ * <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
24
+ * <span class="custom">{{context.formattedValue}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
31
27
  * ```
32
28
  */
33
29
  export declare class DecadeCellTemplateDirective {
@@ -5,27 +5,26 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the footer of the Calendar. To define the footer template, nest an `<ng-template>` tag
9
- * with the `kendoCalendarFooterTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current `date` use the `let-date` directive. To get a reference to the
11
- * current active view use the `let-activeView` directive.
8
+ * A directive for customizing the footer in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the footer content.
11
+ * The template context provides access to the current date and active view.
12
+ *
13
+ * Template Context Variables:
14
+ * - `date` - The Date object representing the current calendar context
15
+ * - `activeView` - The current active view of the Calendar
12
16
  *
13
17
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
18
  *
15
19
  * @example
16
- * ```ts
17
- * _@Component({
18
- * selector: 'my-app',
19
- * styles: ['.custom { color: red; }'],
20
- * template: `
21
- * <kendo-calendar>
22
- * <ng-template kendoCalendarFooterTemplate let-date>
23
- * <span class="custom">{{date}}</span>
24
- * </ng-template>
25
- * </kendo-calendar>
26
- * `
27
- * })
28
- * export class AppComponent { }
20
+ * ```html
21
+ * <kendo-calendar>
22
+ * <ng-template kendoCalendarFooterTemplate let-date let-activeView="activeView">
23
+ * <div class="custom">
24
+ * Today: {{date | date:'short'}} ({{activeView}} view)
25
+ * </div>
26
+ * </ng-template>
27
+ * </kendo-calendar>
29
28
  * ```
30
29
  */
31
30
  export declare class FooterTemplateDirective {
@@ -5,28 +5,29 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the header of the Calendar. To define the header template, nest an `<ng-template>` tag
9
- * with the `kendoCalendarHeaderTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current title, use the `let-title` directive. To provide more details about
11
- * the current title, get a reference to the current `date` by using the `let-date` directive or get a reference to the
12
- * current active view by using the `let-activeView` directive.
8
+ * A directive for customizing the entire header in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the complete header content,
11
+ * including navigation controls and title. The template context provides access to the title text,
12
+ * current date, and active view.
13
+ *
14
+ * Template Context Variables:
15
+ * - `title` - The formatted title text for the header
16
+ * - `date` - The Date object representing the current header context
17
+ * - `activeView` - The current active view of the Calendar
13
18
  *
14
19
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
15
20
  *
16
21
  * @example
17
- * ```ts
18
- * _@Component({
19
- * selector: 'my-app',
20
- * styles: ['.custom { color: red; }'],
21
- * template: `
22
- * <kendo-calendar>
23
- * <ng-template kendoCalendarHeaderTemplate let-title>
24
- * <span class="custom">{{title}}</span>
25
- * </ng-template>
26
- * </kendo-calendar>
27
- * `
28
- * })
29
- * export class AppComponent { }
22
+ * ```html
23
+ * <kendo-calendar>
24
+ * <ng-template kendoCalendarHeaderTemplate let-title let-date="date">
25
+ * <div class="custom">
26
+ * <span>{{title}}</span>
27
+ * <small>{{date | date:'yyyy-MM-dd'}}</small>
28
+ * </div>
29
+ * </ng-template>
30
+ * </kendo-calendar>
30
31
  * ```
31
32
  */
32
33
  export declare class HeaderTemplateDirective {
@@ -5,28 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the header title of the Calendar. To define the header title template, nest an `<ng-template>` tag
9
- * with the `kendoCalendarHeaderTitleTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current title, use the `let-title` directive. To provide more details about
11
- * the current title, get a reference to the current `date` by using the `let-date` directive or get a reference to the
12
- * current active view by using the `let-activeView` directive.
8
+ * A directive for customizing the header title in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the header title content.
11
+ * The template context provides access to the title text, current date, and active view.
12
+ *
13
+ * Template Context Variables:
14
+ * - `title` - The formatted title text for the header
15
+ * - `date` - The Date object representing the current header context
16
+ * - `activeView` - The current active view of the Calendar
13
17
  *
14
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
15
19
  *
16
20
  * @example
17
- * ```ts
18
- * _@Component({
19
- * selector: 'my-app',
20
- * styles: ['.custom { color: red; }'],
21
- * template: `
22
- * <kendo-calendar>
23
- * <ng-template kendoCalendarHeaderTitleTemplate let-title>
24
- * <span class="custom">{{title}}</span>
25
- * </ng-template>
26
- * </kendo-calendar>
27
- * `
28
- * })
29
- * export class AppComponent { }
21
+ * ```html
22
+ * <kendo-calendar>
23
+ * <ng-template kendoCalendarHeaderTitleTemplate let-title let-activeView="activeView">
24
+ * <span class="custom">{{title}} ({{activeView}})</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
30
27
  * ```
31
28
  */
32
29
  export declare class HeaderTitleTemplateDirective {
@@ -5,27 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the month cell content of the Calendar. To define the month cell template, nest an `<ng-template>` tag
9
- * with the `kendoCalendarMonthCellTemplate` directive inside the component tag. The template context is set to the current
10
- * component. To get a reference to the current date, use the `let-date` directive. To provide more details about the current
11
- * month cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the month cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of month cells
11
+ * when the Calendar is in year view. The template context provides access to the current date
12
+ * and cell context information.
13
+ *
14
+ * Template Context Variables:
15
+ * - `date` - The Date object representing the current cell's date
16
+ * - `cellContext` - Additional context information about the current month cell
12
17
  *
13
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
19
  *
15
20
  * @example
16
- * ```ts
17
- * _@Component({
18
- * selector: 'my-app',
19
- * styles: ['.custom { color: red; }'],
20
- * template: `
21
- * <kendo-calendar>
22
- * <ng-template kendoCalendarMonthCellTemplate let-context="cellContext">
23
- * <span class="custom">{{context.formattedValue}}</span>
24
- * </ng-template>
25
- * </kendo-calendar>
26
- * `
27
- * })
28
- * export class AppComponent { }
21
+ * ```html
22
+ * <kendo-calendar [activeView]="'year'">
23
+ * <ng-template kendoCalendarMonthCellTemplate let-context="cellContext">
24
+ * <span class="custom">{{context.formattedValue}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
29
27
  * ```
30
28
  */
31
29
  export declare class MonthCellTemplateDirective {
@@ -5,28 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the navigation item of the Calendar. To define the navigation item template, nest an `<ng-template>`
9
- * tag with the `kendoCalendarNavigationItemTemplate` directive inside the component tag. The template context is set to the
10
- * current component. To get a reference to the current item value, use the `let-title` directive. To provide more details
11
- * about the current title, get a reference to the current `date` by using the `let-date='date'` directive or get a reference
12
- * to the current active view by using the `let-activeView='activeView'` directive.
8
+ * A directive for customizing the navigation items in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of navigation items
11
+ * in the Calendar header. The template context provides access to the title, current date, and active view.
12
+ *
13
+ * Template Context Variables:
14
+ * - `title` - The formatted title text for the navigation item
15
+ * - `date` - The Date object representing the current navigation context
16
+ * - `activeView` - The current active view of the Calendar
13
17
  *
14
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
15
19
  *
16
20
  * @example
17
- * ```ts
18
- * _@Component({
19
- * selector: 'my-app',
20
- * styles: ['.custom { color: red; }'],
21
- * template: `
22
- * <kendo-calendar>
23
- * <ng-template kendoCalendarNavigationItemTemplate let-title>
24
- * <span class="custom">{{title}}</span>
25
- * </ng-template>
26
- * </kendo-calendar>
27
- * `
28
- * })
29
- * export class AppComponent { }
21
+ * ```html
22
+ * <kendo-calendar>
23
+ * <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date">
24
+ * <span class="custom">{{title}} - {{date | date:'yyyy'}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
30
27
  * ```
31
28
  */
32
29
  export declare class NavigationItemTemplateDirective {
@@ -5,27 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the week number cell content in the month view of the Calendar. To define the month week number cell template,
9
- * nest an `<ng-template>` tag with the `kendoCalendarWeekNumberCellTemplate` directive inside the component tag. The template
10
- * context is set to the current component. To get a reference to the current date, use the `let-date` directive. To provide more
11
- * details about the current week number cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the week number cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of week number cells
11
+ * in the month view when the weekNumber property is enabled. The template context provides access to
12
+ * the current date and cell context information.
13
+ *
14
+ * Template Context Variables:
15
+ * - `date` - The Date object representing the current week's date
16
+ * - `cellContext` - Additional context information about the current week number cell
12
17
  *
13
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
14
19
  *
15
20
  * @example
16
- * ```ts
17
- * _@Component({
18
- * selector: 'my-app',
19
- * styles: ['.custom { color: red; }'],
20
- * template: `
21
- * <kendo-calendar [weekNumber]="true">
22
- * <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
23
- * <span class="custom">{{context.formattedValue}}</span>
24
- * </ng-template>
25
- * </kendo-calendar>
26
- * `
27
- * })
28
- * export class AppComponent { }
21
+ * ```html
22
+ * <kendo-calendar [weekNumber]="true">
23
+ * <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
24
+ * <span class="custom">W{{context.formattedValue}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
29
27
  * ```
30
28
  */
31
29
  export declare class WeekNumberCellTemplateDirective {