@progress/kendo-react-dateinputs 13.3.0 → 13.4.0-develop.1
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/PopupSettings.d.ts +22 -0
- package/calendar/components/Calendar.d.ts +202 -0
- package/calendar/components/Calendar.mjs +7 -7
- package/calendar/components/CalendarCell.d.ts +71 -0
- package/calendar/components/CalendarHeaderTitle.d.ts +38 -0
- package/calendar/components/CalendarNavigationItem.d.ts +39 -0
- package/calendar/components/CalendarWeekCell.d.ts +42 -0
- package/calendar/components/Header.d.ts +65 -0
- package/calendar/components/Header.mjs +3 -3
- package/calendar/components/HorizontalViewList.d.ts +80 -0
- package/calendar/components/HorizontalViewList.mjs +3 -3
- package/calendar/components/MultiViewCalendar.d.ts +226 -0
- package/calendar/components/MultiViewCalendar.js +1 -1
- package/calendar/components/MultiViewCalendar.mjs +17 -17
- package/calendar/components/Navigation.d.ts +85 -0
- package/calendar/components/TodayCommand.d.ts +46 -0
- package/calendar/components/TodayCommand.mjs +3 -3
- package/calendar/components/View.d.ts +101 -0
- package/calendar/components/ViewList.d.ts +128 -0
- package/calendar/models/ActiveView.d.ts +11 -0
- package/calendar/models/CalendarSettings.d.ts +256 -0
- package/calendar/models/CalendarViewEnum.d.ts +16 -0
- package/calendar/models/CellContext.d.ts +72 -0
- package/calendar/models/MultiViewCalendarMode.d.ts +16 -0
- package/calendar/models/MultiViewCalendarSettings.d.ts +129 -0
- package/calendar/models/NavigationAction.d.ts +22 -0
- package/calendar/models/SelectionRange.d.ts +24 -0
- package/calendar/models/SelectionRangeEnd.d.ts +11 -0
- package/calendar/models/ViewService.d.ts +32 -0
- package/calendar/models/WeekDaysFormat.d.ts +11 -0
- package/calendar/models/index.d.ts +18 -0
- package/calendar/services/BusViewService.d.ts +28 -0
- package/calendar/services/CenturyViewService.d.ts +32 -0
- package/calendar/services/CenturyViewService.mjs +4 -4
- package/calendar/services/DOMService.d.ts +36 -0
- package/calendar/services/DecadeViewService.d.ts +34 -0
- package/calendar/services/DecadeViewService.mjs +4 -4
- package/calendar/services/MonthViewService.d.ts +40 -0
- package/calendar/services/MonthViewService.mjs +2 -2
- package/calendar/services/NavigationService.d.ts +21 -0
- package/calendar/services/ScrollSyncService.d.ts +28 -0
- package/calendar/services/WeekNamesService.d.ts +17 -0
- package/calendar/services/YearViewService.d.ts +38 -0
- package/calendar/services/YearViewService.mjs +2 -2
- package/calendar/services/index.d.ts +17 -0
- package/calendar/utils/ScrollSync.d.ts +20 -0
- package/codemods/utils.js +1 -8
- package/codemods/v11/dateinput-handle.js +1 -8
- package/codemods/v11/datepicker-handle.js +1 -8
- package/common/AdaptiveMode.d.ts +22 -0
- package/common/ClearButton.d.ts +20 -0
- package/dateinput/DateInput.d.ts +248 -0
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +63 -65
- package/dateinput/dateInputIntl.d.ts +30 -0
- package/dateinput/models/DateInputSettings.d.ts +107 -0
- package/dateinput/models/common-package-props.d.ts +34 -0
- package/dateinput/models/dateinput-options.d.ts +105 -0
- package/dateinput/models/format-placeholder.d.ts +46 -0
- package/dateinput/models/incremental-steps.d.ts +24 -0
- package/dateinput/models/index.d.ts +15 -0
- package/dateinput/models/kendo-date.d.ts +60 -0
- package/dateinput/models/mask.d.ts +14 -0
- package/dateinput/models/selection.d.ts +14 -0
- package/dateinput/utils.d.ts +31 -0
- package/datepicker/DatePicker.d.ts +279 -0
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +68 -72
- package/datepicker/ToggleButton.d.ts +17 -0
- package/datepicker/models/DatePickerSettings.d.ts +248 -0
- package/datepicker/models/index.d.ts +9 -0
- package/daterangepicker/DateRangePicker.d.ts +357 -0
- package/daterangepicker/DateRangePicker.mjs +13 -13
- package/daterangepicker/models/DateRangePickerCalendarSettings.d.ts +13 -0
- package/daterangepicker/models/DateRangePickerDateInputSettings.d.ts +13 -0
- package/daterangepicker/models/DateRangePickerPopupSettings.d.ts +13 -0
- package/daterangepicker/models/DateRangePickerSettings.d.ts +129 -0
- package/daterangepicker/models/index.d.ts +12 -0
- package/datetimepicker/DateTimePicker.d.ts +420 -0
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +16 -20
- package/datetimepicker/DateTimeSelector.d.ts +111 -0
- package/datetimepicker/DateTimeSelector.mjs +3 -3
- package/datetimepicker/models/DateTimePickerSettings.d.ts +154 -0
- package/datetimepicker/models/index.d.ts +9 -0
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/hooks/usePickerFloatingLabel.d.ts +27 -0
- package/index.d.mts +35 -4952
- package/index.d.ts +35 -4952
- package/messages/index.d.ts +132 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +10 -16
- package/package.json +8 -8
- package/timepicker/TimeList.d.ts +97 -0
- package/timepicker/TimeList.js +5 -5
- package/timepicker/TimeList.mjs +122 -112
- package/timepicker/TimePart.d.ts +146 -0
- package/timepicker/TimePart.mjs +3 -3
- package/timepicker/TimePicker.d.ts +417 -0
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +64 -68
- package/timepicker/TimeSelector.d.ts +149 -0
- package/timepicker/TimeSelector.mjs +3 -3
- package/timepicker/models/IncrementalSteps.d.ts +18 -0
- package/timepicker/models/ListItem.d.ts +14 -0
- package/timepicker/models/ListService.d.ts +22 -0
- package/timepicker/models/ListServiceSettings.d.ts +19 -0
- package/timepicker/models/TimePart.d.ts +17 -0
- package/timepicker/models/TimePickerSettings.d.ts +137 -0
- package/timepicker/models/index.d.ts +14 -0
- package/timepicker/services/DOMService.d.ts +18 -0
- package/timepicker/services/DayPeriodService.d.ts +54 -0
- package/timepicker/services/HoursService.d.ts +40 -0
- package/timepicker/services/MinutesService.d.ts +39 -0
- package/timepicker/services/SecondsService.d.ts +39 -0
- package/timepicker/services/index.d.ts +13 -0
- package/timepicker/utils.d.ts +63 -0
- package/timepicker/utils.mjs +1 -1
- package/utils.d.ts +103 -0
- package/utils.js +1 -1
- package/utils.mjs +46 -46
- package/virtualization/Virtualization.d.ts +125 -0
- package/virtualization/services/ScrollerService.d.ts +56 -0
- package/virtualization/services/index.d.ts +10 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { PopupProps } from '@progress/kendo-react-popup';
|
|
9
|
+
export interface DateInputsPopupSettings extends PopupProps {
|
|
10
|
+
/**
|
|
11
|
+
* Controls the popup animation. By default, the open and close animations are enabled.
|
|
12
|
+
*/
|
|
13
|
+
animate?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Controls the popup container. By default, the popup is appended to the [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element.
|
|
16
|
+
*/
|
|
17
|
+
appendTo?: HTMLElement;
|
|
18
|
+
/**
|
|
19
|
+
* Specifies a list of CSS classes that are used for styling the popup.
|
|
20
|
+
*/
|
|
21
|
+
popupClass?: string;
|
|
22
|
+
}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { DateInputsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import { CalendarViewEnum, ActiveView, CalendarSettings } from '../models/index.js';
|
|
11
|
+
import { DOMService, ScrollSyncService } from '../services/index.js';
|
|
12
|
+
import * as React from 'react';
|
|
13
|
+
/**
|
|
14
|
+
* The arguments for the `change` event of the Calendar. The generic argument sets the target type of the event. Defaults to `Calendar`.
|
|
15
|
+
*/
|
|
16
|
+
export interface CalendarChangeEvent<T = Calendar> {
|
|
17
|
+
/**
|
|
18
|
+
* A native DOM event.
|
|
19
|
+
*/
|
|
20
|
+
nativeEvent?: any;
|
|
21
|
+
/**
|
|
22
|
+
* A React Synthetic Event.
|
|
23
|
+
*/
|
|
24
|
+
syntheticEvent: React.SyntheticEvent<any>;
|
|
25
|
+
/**
|
|
26
|
+
* The new value.
|
|
27
|
+
*/
|
|
28
|
+
value: Date;
|
|
29
|
+
/**
|
|
30
|
+
* The Calendar element.
|
|
31
|
+
*/
|
|
32
|
+
target: T;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Represents the props of the [KendoReact Calendar component](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar). The generic argument is passed to the `onChange` property and is used as a target in the [`CalendarChangeEvent`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarchangeevent) interface.
|
|
36
|
+
*/
|
|
37
|
+
export interface CalendarProps<T = any> extends CalendarSettings {
|
|
38
|
+
/** @hidden */
|
|
39
|
+
_ref?: (instance: {
|
|
40
|
+
element: HTMLDivElement | null;
|
|
41
|
+
}) => void;
|
|
42
|
+
/**
|
|
43
|
+
* Sets the default value of the Calendar.
|
|
44
|
+
*/
|
|
45
|
+
defaultValue?: Date | null;
|
|
46
|
+
/**
|
|
47
|
+
* An event that is called after the value of the Calendar has changed.
|
|
48
|
+
*/
|
|
49
|
+
onChange?: (event: CalendarChangeEvent<T>) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Sets the value of the Calendar.
|
|
52
|
+
*/
|
|
53
|
+
value?: Date | null;
|
|
54
|
+
/**
|
|
55
|
+
* @hidden
|
|
56
|
+
*/
|
|
57
|
+
mobileMode?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* @hidden
|
|
60
|
+
*/
|
|
61
|
+
unstyled?: DateInputsClassStructure;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
export interface CalendarState {
|
|
67
|
+
value: Date | null;
|
|
68
|
+
activeView: CalendarViewEnum;
|
|
69
|
+
focusedDate: Date;
|
|
70
|
+
}
|
|
71
|
+
/** @hidden */
|
|
72
|
+
export declare class CalendarWithoutContext extends React.Component<CalendarProps, CalendarState> {
|
|
73
|
+
/**
|
|
74
|
+
* @hidden
|
|
75
|
+
*/
|
|
76
|
+
static displayName: string;
|
|
77
|
+
/**
|
|
78
|
+
* @hidden
|
|
79
|
+
*/
|
|
80
|
+
static propTypes: {
|
|
81
|
+
className: PropTypes.Requireable<string>;
|
|
82
|
+
defaultActiveView: PropTypes.Requireable<ActiveView>;
|
|
83
|
+
defaultValue: PropTypes.Requireable<Date>;
|
|
84
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
85
|
+
focusedDate: PropTypes.Requireable<Date>;
|
|
86
|
+
id: PropTypes.Requireable<string>;
|
|
87
|
+
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
88
|
+
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
89
|
+
weekDaysFormat: PropTypes.Requireable<string>;
|
|
90
|
+
max: PropTypes.Requireable<Date>;
|
|
91
|
+
min: PropTypes.Requireable<Date>;
|
|
92
|
+
navigation: PropTypes.Requireable<boolean>;
|
|
93
|
+
smoothScroll: PropTypes.Requireable<boolean>;
|
|
94
|
+
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
95
|
+
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
96
|
+
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
97
|
+
tabIndex: PropTypes.Requireable<number>;
|
|
98
|
+
value: PropTypes.Requireable<Date>;
|
|
99
|
+
weekNumber: PropTypes.Requireable<boolean>;
|
|
100
|
+
topView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null;
|
|
101
|
+
bottomView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null;
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* @hidden
|
|
105
|
+
*/
|
|
106
|
+
static defaultProps: {
|
|
107
|
+
disabled: boolean;
|
|
108
|
+
min: Date;
|
|
109
|
+
max: Date;
|
|
110
|
+
weekDaysFormat: string;
|
|
111
|
+
navigation: boolean;
|
|
112
|
+
defaultActiveView: ActiveView;
|
|
113
|
+
defaultValue: null;
|
|
114
|
+
topView: ActiveView;
|
|
115
|
+
bottomView: ActiveView;
|
|
116
|
+
showOtherMonthDays: boolean;
|
|
117
|
+
};
|
|
118
|
+
protected dom: DOMService;
|
|
119
|
+
protected scrollSyncService: ScrollSyncService | null;
|
|
120
|
+
private valueDuringOnChange?;
|
|
121
|
+
private focusedDate;
|
|
122
|
+
private get cellUID();
|
|
123
|
+
private get id();
|
|
124
|
+
private Navigation;
|
|
125
|
+
private calendarViewList;
|
|
126
|
+
private _element;
|
|
127
|
+
private intl;
|
|
128
|
+
private bus;
|
|
129
|
+
private service;
|
|
130
|
+
private navigation;
|
|
131
|
+
private isActive;
|
|
132
|
+
private oldValue;
|
|
133
|
+
private didNavigationChange;
|
|
134
|
+
/**
|
|
135
|
+
* Gets the wrapping element of the Calendar.
|
|
136
|
+
*/
|
|
137
|
+
get element(): HTMLDivElement | null;
|
|
138
|
+
/**
|
|
139
|
+
* Gets the value of the Calendar.
|
|
140
|
+
*/
|
|
141
|
+
get value(): Date | null;
|
|
142
|
+
protected get min(): Date;
|
|
143
|
+
protected get max(): Date;
|
|
144
|
+
protected get bottomView(): CalendarViewEnum;
|
|
145
|
+
protected get topView(): CalendarViewEnum;
|
|
146
|
+
constructor(props: CalendarProps);
|
|
147
|
+
/**
|
|
148
|
+
* @hidden
|
|
149
|
+
*/
|
|
150
|
+
componentDidMount(): void;
|
|
151
|
+
/**
|
|
152
|
+
* @hidden
|
|
153
|
+
*/
|
|
154
|
+
componentDidUpdate(prevProps: CalendarProps, prevState: CalendarState): void;
|
|
155
|
+
/**
|
|
156
|
+
* @hidden
|
|
157
|
+
*/
|
|
158
|
+
focus: () => void;
|
|
159
|
+
/**
|
|
160
|
+
* @hidden
|
|
161
|
+
*/
|
|
162
|
+
render(): React.JSX.Element;
|
|
163
|
+
private shouldScroll;
|
|
164
|
+
private handleScroll;
|
|
165
|
+
private handleNavigationChange;
|
|
166
|
+
private handleViewChange;
|
|
167
|
+
private handleDateChange;
|
|
168
|
+
private handleFocus;
|
|
169
|
+
private handleBlur;
|
|
170
|
+
private handleKeyDown;
|
|
171
|
+
private handleMouseDown;
|
|
172
|
+
private handleClick;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Represents the PropsContext of the `Calendar` component.
|
|
176
|
+
* Used for global configuration of all `Calendar` instances.
|
|
177
|
+
*
|
|
178
|
+
* For more information, refer to the [DateInputs Props Context](https://www.telerik.com/kendo-react-ui/components/dateinputs/props-context) article.
|
|
179
|
+
*/
|
|
180
|
+
export declare const CalendarPropsContext: React.Context<(p: CalendarProps<any>) => CalendarProps<any>>;
|
|
181
|
+
/**
|
|
182
|
+
* Represent the `ref` of the Calendar component.
|
|
183
|
+
*/
|
|
184
|
+
export interface CalendarHandle extends Pick<CalendarWithoutContext, keyof CalendarWithoutContext> {
|
|
185
|
+
/**
|
|
186
|
+
* Returns the HTML element of the Calendar component.
|
|
187
|
+
*/
|
|
188
|
+
element: HTMLDivElement | null;
|
|
189
|
+
/**
|
|
190
|
+
* Returns the `value` of the Calendar component.
|
|
191
|
+
*/
|
|
192
|
+
value: Date | null;
|
|
193
|
+
}
|
|
194
|
+
/** @hidden */
|
|
195
|
+
export type Calendar = CalendarHandle;
|
|
196
|
+
/**
|
|
197
|
+
* Represents the KendoReact Calendar Component.
|
|
198
|
+
*
|
|
199
|
+
* Accepts properties of type [CalendarProps](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops).
|
|
200
|
+
* Obtaining the `ref` returns an object of type [CalendarHandle](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarhandle).
|
|
201
|
+
*/
|
|
202
|
+
export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps<any> & React.RefAttributes<any>>;
|
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as f from "react";
|
|
9
9
|
import s from "prop-types";
|
|
10
|
-
import {
|
|
10
|
+
import { withIdHOC as L, createPropsContext as B, Keys as D, setScrollbarWidth as C, classNames as T, uCalendar as F, withPropsContext as K, withUnstyledHOC as U } from "@progress/kendo-react-common";
|
|
11
11
|
import { cloneDate as g, isEqualDate as y, getDate as c } from "@progress/kendo-date-math";
|
|
12
12
|
import { provideIntlService as $, registerForIntl as R } from "@progress/kendo-react-intl";
|
|
13
13
|
import { ViewList as _ } from "./ViewList.mjs";
|
|
14
14
|
import { Navigation as Y } from "./Navigation.mjs";
|
|
15
15
|
import { CalendarViewEnum as r } from "../models/CalendarViewEnum.mjs";
|
|
16
|
-
import { getToday as x, dateInRange as V, viewInRange as I,
|
|
16
|
+
import { getToday as x, dateInRange as V, viewInRange as I, MAX_DATE as z, MIN_DATE as H, isInRange as N } from "../../utils.mjs";
|
|
17
17
|
import { BusViewService as q } from "../services/BusViewService.mjs";
|
|
18
18
|
import { DOMService as X } from "../services/DOMService.mjs";
|
|
19
19
|
import { NavigationService as j } from "../services/NavigationService.mjs";
|
|
@@ -191,8 +191,8 @@ const S = (u) => u ? u.virtualization : null, E = (u = d.defaultProps.min, a = d
|
|
|
191
191
|
this.focusedDate = c(
|
|
192
192
|
V(b && w !== null ? w : this.state.focusedDate, this.min, this.max)
|
|
193
193
|
), this.intl = $(this), this.bus.configure(this.bottomView, this.topView), this.service = this.bus.service(O, this.intl);
|
|
194
|
-
const { smoothScroll: A = Number.parseFloat(f.version) < 18 } = this.props, P =
|
|
195
|
-
|
|
194
|
+
const { smoothScroll: A = Number.parseFloat(f.version) < 18 } = this.props, P = T(
|
|
195
|
+
F.wrapper({
|
|
196
196
|
c: p,
|
|
197
197
|
disabled: o,
|
|
198
198
|
weekNumber: v,
|
|
@@ -312,8 +312,8 @@ n.displayName = "Calendar", n.propTypes = {
|
|
|
312
312
|
}
|
|
313
313
|
}, n.defaultProps = {
|
|
314
314
|
disabled: !1,
|
|
315
|
-
min:
|
|
316
|
-
max:
|
|
315
|
+
min: H,
|
|
316
|
+
max: z,
|
|
317
317
|
weekDaysFormat: "short",
|
|
318
318
|
navigation: !0,
|
|
319
319
|
defaultActiveView: "month",
|
|
@@ -323,7 +323,7 @@ n.displayName = "Calendar", n.propTypes = {
|
|
|
323
323
|
showOtherMonthDays: !1
|
|
324
324
|
};
|
|
325
325
|
let d = n;
|
|
326
|
-
const J =
|
|
326
|
+
const J = B(), Q = L(
|
|
327
327
|
K(
|
|
328
328
|
J,
|
|
329
329
|
U(d)
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { CellContext, CalendarViewEnum } from '../models/index.js';
|
|
9
|
+
import { DateInputsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* The props which will be received by the custom cell of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-cell) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-cell).
|
|
13
|
+
*/
|
|
14
|
+
export interface CalendarCellProps extends CellContext {
|
|
15
|
+
/**
|
|
16
|
+
* Sets a custom CSS class to the calendar cell.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Sets custom inline styles to the calendar cell.
|
|
21
|
+
*/
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
/**
|
|
24
|
+
* Determines if the calendar cell is disabled and non-interactive.
|
|
25
|
+
*/
|
|
26
|
+
isDisabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Specifies the current calendar view (month, year, decade or century).
|
|
29
|
+
*/
|
|
30
|
+
view?: CalendarViewEnum;
|
|
31
|
+
/**
|
|
32
|
+
* Allows range selection to be reversed when interacting with the cell.
|
|
33
|
+
*/
|
|
34
|
+
allowReverse?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Triggered when the calendar cell is clicked.
|
|
37
|
+
*/
|
|
38
|
+
onClick?: (value: Date, event?: React.MouseEvent<any>) => void;
|
|
39
|
+
/**
|
|
40
|
+
* Triggered when the mouse enters the calendar cell.
|
|
41
|
+
*/
|
|
42
|
+
onMouseEnter?: (value: Date, event?: React.MouseEvent<any>) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Triggered when the mouse leaves the calendar cell.
|
|
45
|
+
*/
|
|
46
|
+
onMouseLeave?: (value: Date, event?: React.MouseEvent<any>) => void;
|
|
47
|
+
/**
|
|
48
|
+
* Supports additional accessibility or custom attributes.
|
|
49
|
+
*/
|
|
50
|
+
[aria: string]: any;
|
|
51
|
+
/**
|
|
52
|
+
* @hidden
|
|
53
|
+
*/
|
|
54
|
+
unstyled?: DateInputsClassStructure;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* The `CalendarCell` component is internally used for rendering the items in the current view. Also be used as a custom `cell` of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-cell) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-cell).
|
|
58
|
+
*
|
|
59
|
+
* * [Customizing the cells inside the Calendar view](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-cells-inside-the-view)
|
|
60
|
+
* * [Customizing the cells inside the MultiViewCalendar view](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/custom-rendering#toc-cells-inside-the-view)
|
|
61
|
+
*/
|
|
62
|
+
export declare class CalendarCell extends React.Component<CalendarCellProps> {
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
shouldComponentUpdate(nextProps: CalendarCellProps): boolean;
|
|
67
|
+
render(): React.JSX.Element;
|
|
68
|
+
private handleClick;
|
|
69
|
+
private handleMouseEnter;
|
|
70
|
+
private handleMouseLeave;
|
|
71
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { CalendarViewEnum } from '../models/index.js';
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
/**
|
|
11
|
+
* The props which will be received by the custom header title of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-headertitle) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-headertitle).
|
|
12
|
+
*/
|
|
13
|
+
interface CalendarHeaderTitleProps {
|
|
14
|
+
/** CSS class name for styling the header title */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** Child elements to render inside the header title */
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
/** Text value displayed in the header title */
|
|
19
|
+
value?: string;
|
|
20
|
+
/** Unique identifier for the header title element */
|
|
21
|
+
id?: string;
|
|
22
|
+
/** Current calendar view type */
|
|
23
|
+
view?: CalendarViewEnum;
|
|
24
|
+
/** Inline styles applied to the header title */
|
|
25
|
+
style?: React.CSSProperties;
|
|
26
|
+
/** Click event handler for the header title */
|
|
27
|
+
onClick?: (event?: React.SyntheticEvent<any>) => void;
|
|
28
|
+
/** Whether the header title is disabled */
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The `CalendarHeaderTitle` component is internally used for rendering the title of the current calendar view. Also used as a custom `headerTitle` for the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-headertitle) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-headertitle) components.
|
|
33
|
+
*
|
|
34
|
+
* * [Customizing the title for the current Calendar view](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-cells-inside-the-view)
|
|
35
|
+
* * [Customizing the title for the current MultiViewCalendar view](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/custom-rendering#toc-cells-inside-the-view)
|
|
36
|
+
*/
|
|
37
|
+
declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) => React.JSX.Element;
|
|
38
|
+
export { CalendarHeaderTitle, type CalendarHeaderTitleProps };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { CalendarViewEnum } from '../models/index.js';
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
/**
|
|
11
|
+
* The props which will be received by the custom navigation item of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-navigationitem).
|
|
12
|
+
*/
|
|
13
|
+
interface CalendarNavigationItemProps {
|
|
14
|
+
/** The text content displayed in the navigation item */
|
|
15
|
+
text?: string;
|
|
16
|
+
/** The date value associated with this navigation item */
|
|
17
|
+
value: Date;
|
|
18
|
+
/** Unique identifier for the navigation item element */
|
|
19
|
+
id?: string;
|
|
20
|
+
/** CSS styles to apply to the navigation item */
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
/** The current view of the calendar (month, year, decade, century) */
|
|
23
|
+
view?: CalendarViewEnum;
|
|
24
|
+
/** Callback function triggered when the navigation item is clicked */
|
|
25
|
+
onClick?: (value: Date, event?: React.SyntheticEvent<any>) => void;
|
|
26
|
+
/** Child elements to render within the navigation item */
|
|
27
|
+
children?: React.ReactNode;
|
|
28
|
+
/** CSS class name to apply to the navigation item */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Indicates whether this item represents the start of a range selection */
|
|
31
|
+
isRangeStart?: boolean;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar.
|
|
35
|
+
* Also used as a custom navigation item for the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-navigationitem)
|
|
36
|
+
* ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-items-in-the-side-navigation)).
|
|
37
|
+
*/
|
|
38
|
+
declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) => React.JSX.Element;
|
|
39
|
+
export { CalendarNavigationItem, type CalendarNavigationItemProps };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { DateInputsClassStructure } from '@progress/kendo-react-common';
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
/**
|
|
11
|
+
* The props which will be received by the custom week cell of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-weekcell) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-weekcell).
|
|
12
|
+
*/
|
|
13
|
+
interface CalendarWeekCellProps {
|
|
14
|
+
/** Unique identifier for the week cell element */
|
|
15
|
+
id?: string;
|
|
16
|
+
/** Week number value, null if not available */
|
|
17
|
+
value?: number | null;
|
|
18
|
+
/** Inline styles applied to the week cell */
|
|
19
|
+
style?: React.CSSProperties;
|
|
20
|
+
/** Child elements to render inside the week cell */
|
|
21
|
+
children?: React.ReactNode;
|
|
22
|
+
/** CSS class name for styling the week cell */
|
|
23
|
+
className?: string;
|
|
24
|
+
/** First date of the week represented by this cell */
|
|
25
|
+
firstDate: Date;
|
|
26
|
+
/** Array of dates representing all days in the week */
|
|
27
|
+
weekDays?: Date[];
|
|
28
|
+
/** Click event handler for the week cell */
|
|
29
|
+
onClick?: (firstDate: Date, value: Date[], event: React.MouseEvent<HTMLTableCellElement>) => void;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
33
|
+
unstyled?: DateInputsClassStructure;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The `CalendarWeekCell` component is internally used for rendering the week cells inside the `month` view of the Calendar. Also used as a [custom week cell for the Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/calendarprops#toc-weekcell) and the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#toc-weekcell) components.
|
|
37
|
+
*
|
|
38
|
+
* * [Customizing week-column cells in the Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-cells-inside-the-week-column)
|
|
39
|
+
* * [Customizing week-column cells in the MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/custom-rendering#toc-cells-inside-the-week-column)
|
|
40
|
+
*/
|
|
41
|
+
declare const CalendarWeekCell: (props: CalendarWeekCellProps) => React.JSX.Element;
|
|
42
|
+
export { CalendarWeekCell, type CalendarWeekCellProps };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { DateInputsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import { CalendarHeaderTitleProps } from './CalendarHeaderTitle.js';
|
|
11
|
+
import { BusViewService } from '../services/index.js';
|
|
12
|
+
import { ViewService, CalendarViewEnum } from '../models/index.js';
|
|
13
|
+
import { CalendarHeaderProps } from '../models/CalendarSettings.js';
|
|
14
|
+
import * as React from 'react';
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export interface HeaderEventArguments {
|
|
19
|
+
syntheticEvent: React.SyntheticEvent<any>;
|
|
20
|
+
nativeEvent?: any;
|
|
21
|
+
value: Date;
|
|
22
|
+
target: Header;
|
|
23
|
+
isTodayClick?: boolean;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @hidden
|
|
27
|
+
*/
|
|
28
|
+
export interface HeaderProps {
|
|
29
|
+
activeView: CalendarViewEnum;
|
|
30
|
+
bus: BusViewService;
|
|
31
|
+
currentDate: Date;
|
|
32
|
+
max?: Date;
|
|
33
|
+
min?: Date;
|
|
34
|
+
rangeLength?: number;
|
|
35
|
+
service: ViewService;
|
|
36
|
+
headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
|
|
37
|
+
header?: React.ComponentType<CalendarHeaderProps>;
|
|
38
|
+
commands?: React.ReactNode;
|
|
39
|
+
verticalView?: boolean;
|
|
40
|
+
unstyled?: DateInputsClassStructure;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
45
|
+
export declare class Header extends React.Component<HeaderProps> {
|
|
46
|
+
static propTypes: {
|
|
47
|
+
activeView: PropTypes.Validator<number>;
|
|
48
|
+
currentDate: PropTypes.Validator<Date>;
|
|
49
|
+
max: PropTypes.Validator<Date>;
|
|
50
|
+
min: PropTypes.Validator<Date>;
|
|
51
|
+
rangeLength: PropTypes.Requireable<number>;
|
|
52
|
+
};
|
|
53
|
+
static defaultProps: {
|
|
54
|
+
rangeLength: number;
|
|
55
|
+
min: Date;
|
|
56
|
+
max: Date;
|
|
57
|
+
};
|
|
58
|
+
protected get min(): Date;
|
|
59
|
+
protected get max(): Date;
|
|
60
|
+
protected get rangeLength(): number;
|
|
61
|
+
protected get canMoveUp(): boolean;
|
|
62
|
+
render(): React.JSX.Element;
|
|
63
|
+
protected getTitle: () => string;
|
|
64
|
+
private handleTitleClick;
|
|
65
|
+
}
|
|
@@ -10,7 +10,7 @@ import i from "prop-types";
|
|
|
10
10
|
import { registerForLocalization as v } from "@progress/kendo-react-intl";
|
|
11
11
|
import { classNames as o, uCalendar as c } from "@progress/kendo-react-common";
|
|
12
12
|
import { CalendarHeaderTitle as f } from "./CalendarHeaderTitle.mjs";
|
|
13
|
-
import {
|
|
13
|
+
import { MAX_DATE as T, MIN_DATE as D } from "../../utils.mjs";
|
|
14
14
|
const t = class t extends e.Component {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments), this.getTitle = () => {
|
|
@@ -57,8 +57,8 @@ t.propTypes = {
|
|
|
57
57
|
rangeLength: i.number
|
|
58
58
|
}, t.defaultProps = {
|
|
59
59
|
rangeLength: 1,
|
|
60
|
-
min:
|
|
61
|
-
max:
|
|
60
|
+
min: D,
|
|
61
|
+
max: T
|
|
62
62
|
};
|
|
63
63
|
let l = t;
|
|
64
64
|
v(l);
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { CalendarCellProps } from './CalendarCell.js';
|
|
9
|
+
import { CalendarWeekCellProps } from './CalendarWeekCell.js';
|
|
10
|
+
import { CalendarHeaderTitleProps } from './CalendarHeaderTitle.js';
|
|
11
|
+
import { BusViewService } from '../services/index.js';
|
|
12
|
+
import { CalendarViewEnum, ViewService, SelectionRange } from '../models/index.js';
|
|
13
|
+
import { WeekDaysFormat } from '../models/WeekDaysFormat.js';
|
|
14
|
+
import * as React from 'react';
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export interface HorizontalViewListEventArguments {
|
|
19
|
+
syntheticEvent: React.SyntheticEvent<any>;
|
|
20
|
+
nativeEvent?: any;
|
|
21
|
+
value: Date;
|
|
22
|
+
target: HorizontalViewList;
|
|
23
|
+
isTodayClick: boolean;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @hidden
|
|
27
|
+
*/
|
|
28
|
+
export interface HorizontalViewListProps {
|
|
29
|
+
activeView: CalendarViewEnum;
|
|
30
|
+
bus: BusViewService;
|
|
31
|
+
cellUID: string;
|
|
32
|
+
focusedDate: Date;
|
|
33
|
+
max?: Date;
|
|
34
|
+
min?: Date;
|
|
35
|
+
onChange?: (event: HorizontalViewListEventArguments) => void;
|
|
36
|
+
onWeekSelect?: (firstDate: Date, daysToEqualize: number, event: React.MouseEvent<HTMLTableCellElement>) => void;
|
|
37
|
+
selectionRange: SelectionRange;
|
|
38
|
+
service: ViewService;
|
|
39
|
+
showWeekNumbers?: boolean;
|
|
40
|
+
weekDaysFormat?: WeekDaysFormat;
|
|
41
|
+
take?: number;
|
|
42
|
+
value: Date[] | Date | null;
|
|
43
|
+
views?: number;
|
|
44
|
+
onCellEnter?: (value: Date) => void;
|
|
45
|
+
allowReverse?: boolean;
|
|
46
|
+
cell?: React.ComponentType<CalendarCellProps>;
|
|
47
|
+
weekCell?: React.ComponentType<CalendarWeekCellProps>;
|
|
48
|
+
showOtherMonthDays?: boolean;
|
|
49
|
+
headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
|
|
50
|
+
dates: any[];
|
|
51
|
+
verticalView?: boolean;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* @hidden
|
|
55
|
+
*/
|
|
56
|
+
export declare class HorizontalViewList extends React.Component<HorizontalViewListProps, {}> {
|
|
57
|
+
static defaultProps: {
|
|
58
|
+
showWeekNumbers: boolean;
|
|
59
|
+
views: number;
|
|
60
|
+
take: number;
|
|
61
|
+
allowReverse: boolean;
|
|
62
|
+
weekDaysFormat: string;
|
|
63
|
+
min: Date;
|
|
64
|
+
max: Date;
|
|
65
|
+
};
|
|
66
|
+
private _element;
|
|
67
|
+
private isActive;
|
|
68
|
+
get element(): HTMLDivElement | null;
|
|
69
|
+
protected get weekNumber(): boolean;
|
|
70
|
+
protected get min(): Date;
|
|
71
|
+
protected get max(): Date;
|
|
72
|
+
constructor(props: HorizontalViewListProps);
|
|
73
|
+
focusActiveDate: () => void;
|
|
74
|
+
blurActiveDate: () => void;
|
|
75
|
+
componentDidUpdate(): void;
|
|
76
|
+
render(): React.JSX.Element;
|
|
77
|
+
protected rotateSelectionRange: (selectionRange: SelectionRange) => SelectionRange;
|
|
78
|
+
private handleWeekCellClick;
|
|
79
|
+
private handleDateChange;
|
|
80
|
+
}
|
|
@@ -10,7 +10,7 @@ import { View as h } from "./View.mjs";
|
|
|
10
10
|
import { CalendarViewEnum as i } from "../models/CalendarViewEnum.mjs";
|
|
11
11
|
import { classNames as p } from "@progress/kendo-react-common";
|
|
12
12
|
import { cloneDate as m } from "@progress/kendo-date-math";
|
|
13
|
-
import {
|
|
13
|
+
import { MAX_DATE as u, MIN_DATE as d } from "../../utils.mjs";
|
|
14
14
|
const n = 2, r = class r extends o.Component {
|
|
15
15
|
constructor(l) {
|
|
16
16
|
super(l), this._element = null, this.isActive = !1, this.focusActiveDate = () => {
|
|
@@ -115,8 +115,8 @@ r.defaultProps = {
|
|
|
115
115
|
take: n,
|
|
116
116
|
allowReverse: !0,
|
|
117
117
|
weekDaysFormat: "short",
|
|
118
|
-
min:
|
|
119
|
-
max:
|
|
118
|
+
min: d,
|
|
119
|
+
max: u
|
|
120
120
|
};
|
|
121
121
|
let c = r;
|
|
122
122
|
export {
|