@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.
- package/calendar/calendar.component.d.ts +40 -56
- package/calendar/calendar.module.d.ts +10 -21
- package/calendar/calendars.module.d.ts +10 -21
- package/calendar/localization/calendar-custom-messages.component.d.ts +9 -1
- package/calendar/localization/multiview-calendar-custom-messages.component.d.ts +9 -1
- package/calendar/models/orientation.d.ts +10 -1
- package/calendar/models/selection-range-end.type.d.ts +11 -1
- package/calendar/models/selection-range.interface.d.ts +18 -3
- package/calendar/models/selection.d.ts +19 -4
- package/calendar/models/type.d.ts +7 -3
- package/calendar/models/view.type.d.ts +12 -1
- package/calendar/multiview-calendar.component.d.ts +49 -40
- package/calendar/multiview-calendar.module.d.ts +1 -0
- package/calendar/templates/cell-template.directive.d.ts +16 -19
- package/calendar/templates/century-cell-template.directive.d.ts +15 -19
- package/calendar/templates/decade-cell-template.directive.d.ts +15 -19
- package/calendar/templates/footer-template.directive.d.ts +16 -17
- package/calendar/templates/header-template.directive.d.ts +19 -18
- package/calendar/templates/header-title-template.directive.d.ts +15 -18
- package/calendar/templates/month-cell-template.directive.d.ts +15 -17
- package/calendar/templates/navigation-item-template.directive.d.ts +15 -18
- package/calendar/templates/weeknumber-cell-template.directive.d.ts +15 -17
- package/calendar/templates/year-cell-template.directive.d.ts +15 -20
- package/codemods/utils.js +0 -3
- package/dateinput/dateinput.component.d.ts +50 -119
- package/dateinput/dateinput.module.d.ts +15 -2
- package/dateinput/localization/dateinput-custom-messages.component.d.ts +18 -1
- package/dateinput/models/format-placeholder.model.d.ts +15 -20
- package/dateinput/models/format-settings.model.d.ts +14 -4
- package/dateinput/models/incremental-steps.model.d.ts +16 -1
- package/datepicker/datepicker.component.d.ts +68 -127
- package/datepicker/datepicker.module.d.ts +11 -2
- package/datepicker/localization/datepicker-custom-messages.component.d.ts +11 -1
- package/daterange/auto-correct-on.type.d.ts +2 -1
- package/daterange/date-range-end-input.directive.d.ts +25 -24
- package/daterange/date-range-popup-template.directive.d.ts +13 -2
- package/daterange/date-range-popup.component.d.ts +83 -73
- package/daterange/date-range-selection.directive.d.ts +10 -9
- package/daterange/date-range-start-input.directive.d.ts +29 -27
- package/daterange/date-range.component.d.ts +4 -6
- package/daterange/date-range.service.d.ts +27 -27
- package/datetimepicker/datetimepicker.component.d.ts +91 -79
- package/datetimepicker/datetimepicker.module.d.ts +16 -2
- package/datetimepicker/localization/datetimepicker-custom-messages.component.d.ts +10 -1
- package/esm2022/calendar/calendar.component.mjs +40 -56
- package/esm2022/calendar/calendar.module.mjs +10 -21
- package/esm2022/calendar/calendars.module.mjs +10 -21
- package/esm2022/calendar/localization/calendar-custom-messages.component.mjs +9 -1
- package/esm2022/calendar/localization/multiview-calendar-custom-messages.component.mjs +9 -1
- package/esm2022/calendar/models/selection-range.interface.mjs +2 -0
- package/esm2022/calendar/models/selection.mjs +11 -0
- package/esm2022/calendar/multiview-calendar.component.mjs +49 -40
- package/esm2022/calendar/multiview-calendar.module.mjs +1 -0
- package/esm2022/calendar/templates/cell-template.directive.mjs +16 -19
- package/esm2022/calendar/templates/century-cell-template.directive.mjs +15 -19
- package/esm2022/calendar/templates/decade-cell-template.directive.mjs +15 -19
- package/esm2022/calendar/templates/footer-template.directive.mjs +16 -17
- package/esm2022/calendar/templates/header-template.directive.mjs +19 -18
- package/esm2022/calendar/templates/header-title-template.directive.mjs +15 -18
- package/esm2022/calendar/templates/month-cell-template.directive.mjs +15 -17
- package/esm2022/calendar/templates/navigation-item-template.directive.mjs +15 -18
- package/esm2022/calendar/templates/weeknumber-cell-template.directive.mjs +15 -17
- package/esm2022/calendar/templates/year-cell-template.directive.mjs +15 -20
- package/esm2022/dateinput/dateinput.component.mjs +57 -126
- package/esm2022/dateinput/dateinput.module.mjs +15 -2
- package/esm2022/dateinput/localization/dateinput-custom-messages.component.mjs +18 -1
- package/esm2022/datepicker/datepicker.component.mjs +71 -130
- package/esm2022/datepicker/datepicker.module.mjs +11 -2
- package/esm2022/datepicker/localization/datepicker-custom-messages.component.mjs +11 -1
- package/esm2022/daterange/date-range-end-input.directive.mjs +25 -24
- package/esm2022/daterange/date-range-popup-template.directive.mjs +13 -2
- package/esm2022/daterange/date-range-popup.component.mjs +83 -73
- package/esm2022/daterange/date-range-selection.directive.mjs +10 -9
- package/esm2022/daterange/date-range-start-input.directive.mjs +29 -27
- package/esm2022/daterange/date-range.component.mjs +4 -6
- package/esm2022/daterange/date-range.service.mjs +27 -27
- package/esm2022/datetimepicker/datetimepicker.component.mjs +94 -82
- package/esm2022/datetimepicker/datetimepicker.module.mjs +16 -2
- package/esm2022/datetimepicker/localization/datetimepicker-custom-messages.component.mjs +10 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/timepicker/localization/messages.mjs +14 -14
- package/esm2022/timepicker/localization/timepicker-custom-messages.component.mjs +12 -1
- package/esm2022/timepicker/timepicker.component.mjs +57 -119
- package/esm2022/timepicker/timepicker.module.mjs +13 -2
- package/esm2022/timepicker/timeselector.component.mjs +24 -40
- package/fesm2022/progress-kendo-angular-dateinputs.mjs +913 -1015
- package/package.json +13 -12
- package/popup-settings.model.d.ts +3 -10
- package/timepicker/localization/messages.d.ts +14 -14
- package/timepicker/localization/timepicker-custom-messages.component.d.ts +12 -1
- package/timepicker/timepicker.component.d.ts +53 -115
- package/timepicker/timepicker.module.d.ts +13 -2
- 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
|
-
* ```
|
|
46
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
123
|
-
*
|
|
124
|
-
*
|
|
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
|
-
*
|
|
130
|
-
*
|
|
131
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
217
|
-
*
|
|
216
|
+
* Specifies the bottommost view to which you can navigate.
|
|
217
|
+
*
|
|
218
|
+
* @default month
|
|
218
219
|
*/
|
|
219
220
|
bottomView: CalendarView;
|
|
220
221
|
/**
|
|
221
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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`—The month cell template directive.
|
|
21
22
|
* - `MonthCellTemplateDirective`—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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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
|
-
*
|
|
16
|
-
*
|
|
19
|
+
* `kendoCalendarCellTemplate` is equivalent to
|
|
20
|
+
* [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
|
|
17
21
|
*
|
|
18
22
|
* @example
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* the
|
|
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
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* the
|
|
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
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* current active view
|
|
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
|
-
* ```
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
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
|
-
* ```
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
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
|
-
* ```
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
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
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
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 {
|