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

package/datetimepicker/datetimepicker.component.d.ts

@@ -40,7 +40,31 @@ import { FooterTemplateDirective } from '../calendar/templates/footer-template.d
 import { WeekDaysFormat } from '../common/models/week-days-format';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
+ * Represents the Kendo UI DateTimePicker component for Angular.
+ * Allows users to select both date and time values from an interactive calendar and time selector.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-datetimepicker
+ *       [(value)]="dateTimeValue"
+ *       [format]="'g'"
+ *       [min]="minDate"
+ *       [max]="maxDate">
+ *     </kendo-datetimepicker>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public dateTimeValue: Date = new Date();
+ *   public minDate: Date = new Date(2000, 0, 1);
+ *   public maxDate: Date = new Date(2030, 11, 31);
+ * }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link DateTimePickerCustomMessagesComponent}.
  */
 export declare class DateTimePickerComponent extends MultiTabStop implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
     private popupService;
@@ -97,27 +121,27 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     weekDaysFormat?: WeekDaysFormat;
     /**
      * Displays the days that fall out of the current month in the Calendar ([see example]({% slug datetimepicker_calendar_options %}#toc-displaying-other-month-days)).
-     * The default values per Calendar type are:
-     * - `infinite` - false
-     * - `classic` - true
+     * You can set this to show or hide days from other months.
+     *
+     * For infinite Calendar the default value is `false`, while for classic Calendar it is `true`.
      */
     showOtherMonthDays: boolean;
     /**
-     * Specifies the value of the DateTimePicker component.
+     * Sets the value of the DateTimePicker component.
+     * You can set a specific date and time for the picker to display and use.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value: Date | null);
     get value(): Date | null;
     /**
      * Specifies the date format for displaying the input value
-     * ([see example]({% slug formats_datetimepicker %}))
+     * ([see example]({% slug formats_datetimepicker %})).
      *
-     * Format value options:
-     * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
-     * - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
+     * When using a string format, the same format is applied regardless of whether the input is focused or blurred.
+     * When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states.
      *
-     * > If a [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) object is provided, the `displayFormat` value will be used for the popup TimePicker.
+     * If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker.
      */
     set format(format: string | FormatSettings);
     get format(): string | FormatSettings;
@@ -127,6 +151,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     * @default 68
      */
     twoDigitYearMax: number;
     /**
@@ -144,47 +169,53 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * Configures the popup settings of the DateTimePicker
      * ([see example]({% slug datetimepicker_popup_options %}#toc-customizing-the-popup)).
      *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
+     * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
+     * The `popupClass` option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings: PopupSettings);
     get popupSettings(): PopupSettings;
     /**
-     * Sets the title of the input element of the DateTimePicker and the title text rendered
-     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Specifies the title of the input element of the DateTimePicker and the title text rendered
+     * in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ''
      */
     adaptiveTitle: string;
     /**
-     * Sets the subtitle text rendered in the header of the popup(action sheet).
+     * Specifies the subtitle text rendered in the header of the popup (action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ''
      */
     adaptiveSubtitle: string;
     /**
-     * Sets or gets the `disabled` property of the DateTimePicker and determines whether the component is active
+     * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example]({% slug disabled_datetimepicker %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms).
+     * @default false
      */
     disabled: boolean;
     /**
-     * Sets the read-only state of the DateTimePicker
+     * Specifies the read-only state of the DateTimePicker
      * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
+     * @default false
      *
      * @default false
      */
     readonly: boolean;
     /**
-     * Sets the read-only state of the DateTimePicker input field
+     * Determines whether the input field of the DateTimePicker is read-only
      * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
      *
-     * > Note that if you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
+     *
+     * @default false
      */
     readOnlyInput: boolean;
     /**
      * Determines whether to display the **Cancel** button in the popup
      * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
+     * @default true
      */
     cancelButton: boolean;
     /**
@@ -210,17 +241,14 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     /**
      * Specifies the Calendar type.
      *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     calendarType: CalendarType;
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
      * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
      *
-     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     * The feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
      * @default false
      */
@@ -228,6 +256,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     /**
      * Determines whether to display a week number column in the `month` view of the popup Calendar
      * ([see example]({% slug datetimepicker_calendar_options %}#toc-week-number-column)).
+     * @default false
      */
     weekNumber: boolean;
     /**
@@ -249,24 +278,25 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     set max(value: Date | null);
     get max(): Date;
     /**
-     * Determines whether the built-in min or max validators are enforced when validating a form
+     * Determines whether the built-in `min` or `max` validators are enforced when validating a form
      * ([see example](slug:dateranges_datetimepicker)).
      *
      * @default true
      */
     rangeValidation: boolean;
     /**
-     * Determines whether the built-in validator for disabled
-     * date ranges is enforced when validating a form
+     * Determines whether the built-in validator for disabled date ranges is enforced when validating a form
      * ([see example](slug:disabled_dates_datetimepicker)).
+     * @default true
      */
     disabledDatesValidation: boolean;
     /**
-     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     * Determines whether the built-in validation for incomplete dates is enforced when validating a form.
+     * @default false
      */
     incompleteDateValidation: boolean;
     /**
-     * Determines whether to autocorrect invalid segments automatically.
+     * Determines whether to auto correct invalid segments automatically.
      *
      * @default true
      */
@@ -278,39 +308,40 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      */
     autoSwitchParts: boolean;
     /**
-     * A string array representing custom keys, which will move the focus to the next date format segment.
+     * Specifies custom keys that move the focus to the next date format segment.
      */
     autoSwitchKeys: string[];
     /**
-     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     * Determines whether you can use the mouse scroll to increase or decrease the time segment values.
      *
      * @default true
      */
     enableMouseWheel: boolean;
     /**
-     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     * Determines whether you can see a blinking caret inside the DateInput when possible.
      *
      * @default false
      */
     allowCaretMode: boolean;
     /**
-     * If set to `true`, renders a clear button after the input text or DateTimePicker value has been changed.
+     * Renders a clear button when set to `true` after the input text or DateTimePicker value has been changed.
      * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
      * @default false
      */
     clearButton: boolean;
     /**
-     * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
+     * Auto fills the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
     autoFill: boolean;
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
+     * @default 'none'
      */
     adaptiveMode: AdaptiveMode;
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities.
      */
     inputAttributes: {
         [key: string]: string;
@@ -347,7 +378,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      */
     escape: EventEmitter<any>;
     /**
-     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
+     * Indicates whether the component is currently open. This is when the popup or action sheet is open.
      */
     get isOpen(): boolean;
     /**
@@ -356,44 +387,25 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     get isActive(): boolean;
     set isActive(value: boolean);
     /**
-     * Sets the active tab on opening the popup
+     * Specifies the active tab when opening the popup
      * ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
      */
     set defaultTab(tab: DateTimePickerActiveTab);
     get defaultTab(): DateTimePickerActiveTab;
     /**
-     * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * Specifies the size of the component.
      *
      */
     set size(size: DateInputSize);
     get size(): DateInputSize;
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Specifies the border radius of the component.
      *
      */
     set rounded(rounded: DateInputRounded);
     get rounded(): DateInputRounded;
     /**
-     * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
+     * Specifies the fill mode of the component.
      *
      */
     set fillMode(fillMode: DateInputFillMode);
@@ -565,17 +577,17 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /**
-     * * If the popup is closed, focuses the DateTimePicker input.
-     * * If the popup is open, the focus is moved to its content.
+     * Focuses the DateTimePicker input if the popup is closed.
+     * Moves the focus to the popup content if the popup is open.
      */
     focus(): void;
     /**
-     * Blurs the DateTimePicker.
+     * Blurs the DateTimePicker component.
      */
     blur(): void;
     /**
-     * Toggles the visibility of the popup or actionSheet.
-     * If you use the `toggle` method to show or hide the popup or actionSheet,
+     * Toggles the visibility of the popup or action sheet.
+     * If you use the `toggle` method to show or hide the popup or action sheet,
      * the `open` and `close` events do not fire.
      *
      * @param show - The state of the popup.
@@ -693,21 +705,21 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private verifyValue;
     private verifyMinMaxRange;
     /**
-     * Extracts the time slots and the literals that are not preceded by date parts
-     * and concatenates the resulting parts into a string.
-     * If the provided format value does not contain any time parts,
-     * returns the designated format of the default popup component of the TimePicker.
+     * Extracts the time slots and literals that are not preceded by date parts
+     * and combines the resulting parts into a string.
+     * If the provided `format` value does not contain any time parts,
+     * returns the designated format of the default popup component of the `TimePicker`.
      */
     private getTimeSelectorFormat;
     /**
      * Extracts the `displayFormat` from the provided `string | FormatSettings` value.
-     * Fallbacks to the default input value, if a falsy value param is passed.
+     * Falls back to the default input value if a falsy value parameter is passed.
      */
     private getDisplayFormat;
     /**
      * The filter expression that filters out all format parts
      * except for `hour`, `minute`, `second`, `dayperiod`, and specific literals.
-     * Literals will be left only if they are not preceded by date parts.
+     * Literals remain only if they are not preceded by date parts.
      */
     private timeFormatPartFilter;
     /**
@@ -720,19 +732,19 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private closePopup;
     private handleValueChange;
     /**
-     * Indicates whether the focus target is part of this component,
-     * that is, whether the focus target is inside the component or in the popup.
+     * Indicates whether the focus target is part of this component.
+     * Checks whether the focus target is inside the component or in the popup.
      */
     private focusTargetInComponent;
     private setTimeSelectorMinMax;
     private setCalendarValue;
     /**
-     * If the popup is available, runs a popup change detection.
+     * Runs a popup change detection if the popup is available.
      */
     private detectPopupChanges;
     /**
-     * Depending on the predicate `runInZone` value that is passed,
-     * runs the provided function either in the Angular or in the current zone.
+     * Runs the provided function either in the Angular zone or in the current zone.
+     * The execution zone depends on the predicate `runInZone` value that is passed.
      */
     private run;
     private handleDateCompletenessChange;

package/datetimepicker/datetimepicker.module.d.ts

@@ -17,8 +17,22 @@ import * as i11 from "../calendar/templates/weeknumber-cell-template.directive";
 import * as i12 from "../calendar/templates/year-cell-template.directive";
 import * as i13 from "@progress/kendo-angular-common";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the DateTimePicker component.
+ * Required for adding all DateTimePicker features in [NgModule-based](link:site.data.urls.angular['ngmoduleapi']) Angular applications.
+ *
+ * @example
+ * ```typescript
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     DateTimePickerModule
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export declare class DateTimePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;

package/datetimepicker/localization/datetimepicker-custom-messages.component.d.ts

@@ -6,7 +6,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DateTimePickerMessages } from './messages';
 import * as i0 from "@angular/core";
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Allows you to override the default messages of the DateTimePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-datetimepicker>
+ *   <kendo-datetimepicker-messages
+ *     toggle="Open calendar">
+ *   </kendo-datetimepicker-messages>
+ * </kendo-datetimepicker>
+ * ```
  */
 export declare class DateTimePickerCustomMessagesComponent extends DateTimePickerMessages {
     protected service: LocalizationService;

package/esm2022/calendar/calendar.component.mjs

@@ -81,17 +81,13 @@ export const KENDO_INPUT_PROVIDER = {
 };
 /**
  * Represents the [Kendo UI Calendar component for Angular](slug:overview_calendar).
- *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-calendar></kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar></kendo-calendar>
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link CalendarCustomMessagesComponent}.
  */
 export class CalendarComponent {
     bus;
@@ -108,10 +104,7 @@ export class CalendarComponent {
     selectionService;
     pickerService;
     /**
-     * Displays the days that fall out of the current month ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
-     * The default values per Calendar type are:
-     * - `infinite` - false
-     * - `classic` - true
+     * Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
      */
     set showOtherMonthDays(_showOtherMonthDays) {
         this._showOtherMonthDays = _showOtherMonthDays;
@@ -134,11 +127,10 @@ export class CalendarComponent {
         return `kendo-popup-${this.bus.calendarId}`;
     }
     /**
-     * Sets or gets the `focusedDate` property of the Calendar and
-     * defines the focused date of the component
+     * Specifies the focused date of the Calendar
      * ([see example]({% slug dates_calendar %}#toc-focused-dates)).
      *
-     * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
+     * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
      */
     set focusedDate(focusedDate) {
         if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
@@ -168,10 +160,10 @@ export class CalendarComponent {
         return this.id + '-header';
     }
     /**
-     * Sets or gets the `min` property of the Calendar and
-     * defines the minimum allowed date value
+     * Specifies the minimum allowed date value
      * ([see example]({% slug dateranges_calendar %})).
-     * By default, the `min` value is `1900-1-1`.
+     *
+     * @default 1900-1-1
      */
     set min(min) {
         this._min = min || new Date(MIN_DATE);
@@ -180,10 +172,10 @@ export class CalendarComponent {
         return this._min;
     }
     /**
-     * Sets or gets the `max` property of the Calendar and
-     * defines the maximum allowed date value
+     * Specifies the maximum allowed date value
      * ([see example]({% slug dateranges_calendar %})).
-     * By default, the `max` value is `2099-12-31`.
+     *
+     * @default 2099-12-31
      */
     set max(max) {
         this._max = max || new Date(MAX_DATE);
@@ -192,29 +184,27 @@ export class CalendarComponent {
         return this._max;
     }
     /**
-     * Determines whether the built-in min or max validators are enforced when validating a form.
+     * Determines whether the built-in `min` or `max` validators are enforced when validating a form.
      *
      * @default false
      */
     rangeValidation = false;
     /**
-     * Sets the format of the displayed Calendar week days' names.
+     * Specifies the format of the displayed week day names.
+     *
      * @default 'short'
      */
     weekDaysFormat = "short";
     /**
      * Toggles the visibility of the footer.
+     *
      * @default false
      */
     footer = false;
     /**
      * Sets the Calendar selection mode
      * ([see example]({% slug selection_calendar %})).
-     *
-     * The available values are:
-     * * `single` (default)
-     * * `multiple`
-     * * `range`
+     * @default 'single'
      */
     set selection(_selection) {
         this._selection = _selection;
@@ -234,7 +224,7 @@ export class CalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -251,9 +241,11 @@ export class CalendarComponent {
      */
     disabled = false;
     /**
-     * Sets or gets the `tabindex` property of the Calendar. Based on the
+     * Specifies the `tabindex` property of the Calendar. Based on the
      * [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
      * it determines whether the component is focusable.
+     *
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -266,7 +258,7 @@ export class CalendarComponent {
         return this.tabindex;
     }
     /**
-     * Sets the dates of the Calendar that will be disabled
+     * Specifies the dates of the Calendar that will be disabled
      * ([see example]({% slug disabled_dates_calendar %})).
      */
     set disabledDates(value) {
@@ -277,37 +269,39 @@ export class CalendarComponent {
         return this._disabledDates;
     }
     /**
-     * Sets or gets the `navigation` property of the Calendar
-     * and determines whether the navigation side-bar will be displayed
+     * Determines whether the navigation side-bar will be displayed
      * ([see example]({% slug sidebar_calendar %})).
      * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
+     *
+     * @default true
      */
     navigation = true;
     /**
      * Defines the active view that the Calendar initially renders
      * ([see example]({% slug viewoptions_calendar %})).
-     * By default, the active view is `month`.
+     * You have to set `activeView` within the `topView`-`bottomView` range.
      *
-     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     * @default 'month'
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the bottommost view to which the user can navigate
      * ([see example](slug:viewdepth_calendar)).
+     *
+     * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the topmost view to which the user can navigate
      * ([see example](slug:viewdepth_calendar)).
+     *
+     * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
      * Specifies the Calendar type.
      *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     set type(type) {
         this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
@@ -323,7 +317,7 @@ export class CalendarComponent {
      * Determines whether to enable animation when navigating to previous/next view.
      * Applies to the [`classic`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
      *
-     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     * This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
      * @default false
      */
@@ -331,6 +325,8 @@ export class CalendarComponent {
     /**
      * Determines whether to display a week number column in the `month` view
      * ([see example]({% slug weeknumcolumn_calendar %})).
+     *
+     * @default false
      */
     weekNumber = false;
     /**
@@ -578,10 +574,10 @@ export class CalendarComponent {
     }
     _size = DEFAULT_SIZE;
     /**
-     * Specify, which end of the defined selection range should be marked as active.
+     * Specifies which end of the defined selection range should be marked as active.
+     * Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.
      *
-     * > Value will be ignored if the selection range is undefined.
-     * > If range selection is used then the default value is 'start'.
+     * @default 'start'
      */
     set activeRangeEnd(_activeRangeEnd) {
         this._activeRangeEnd = _activeRangeEnd;
@@ -783,18 +779,6 @@ export class CalendarComponent {
     }
     /**
      * Focuses the Calendar by making the table.k-calendar-table element active.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="calendar.focus()">Focus calendar</button>
-     *  <kendo-calendar #calendar></kendo-calendar>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         this.currentlyFocusedElement = this.type === 'infinite' ?