Scheduler: remove dropDownAppointmentTemplate and scrollToTime api options (DevExpress#30932)

Author: aleksei-semikozov

e2e/testcafe-devextreme/tests/scheduler/common/scrollToTime.ts

@@ -95,14 +95,6 @@ export class DxiViewComponent extends CollectionNestedOption {
         this._setOption('dateCellTemplate', value);
     }
 
-    @Input()
-    get dropDownAppointmentTemplate(): any {
-        return this._getOption('dropDownAppointmentTemplate');
-    }
-    set dropDownAppointmentTemplate(value: any) {
-        this._setOption('dropDownAppointmentTemplate', value);
-    }
-
     @Input()
     get endDayHour(): number {
         return this._getOption('endDayHour');

packages/devextreme-angular/src/ui/nested/view-dxi.ts

@@ -336,21 +336,6 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     }
 
 
-    /**
-     * [descr:dxSchedulerOptions.dropDownAppointmentTemplate]
-    
-     * @deprecated [depNote:dxSchedulerOptions.dropDownAppointmentTemplate]
-    
-     */
-    @Input()
-    get dropDownAppointmentTemplate(): any {
-        return this._getOption('dropDownAppointmentTemplate');
-    }
-    set dropDownAppointmentTemplate(value: any) {
-        this._setOption('dropDownAppointmentTemplate', value);
-    }
-
-
     /**
      * [descr:dxSchedulerOptions.editing]
     
@@ -850,10 +835,10 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, dropDownAppointmentTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
+    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
         return this._getOption('views');
     }
-    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, dropDownAppointmentTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
+    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
         this._setOption('views', value);
     }
 
@@ -1160,13 +1145,6 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      */
     @Output() disabledChange: EventEmitter<boolean>;
 
-    /**
-    
-     * This member supports the internal infrastructure and is not intended to be used directly from your code.
-    
-     */
-    @Output() dropDownAppointmentTemplateChange: EventEmitter<any>;
-
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -1438,7 +1416,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, dropDownAppointmentTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
+    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
 
     /**
     
@@ -1540,7 +1518,6 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
             { emit: 'dateSerializationFormatChange' },
             { emit: 'descriptionExprChange' },
             { emit: 'disabledChange' },
-            { emit: 'dropDownAppointmentTemplateChange' },
             { emit: 'editingChange' },
             { emit: 'elementAttrChange' },
             { emit: 'endDateExprChange' },

packages/devextreme-angular/src/ui/scheduler/index.ts

@@ -95,14 +95,6 @@ export class DxiSchedulerViewComponent extends CollectionNestedOption {
         this._setOption('dateCellTemplate', value);
     }
 
-    @Input()
-    get dropDownAppointmentTemplate(): any {
-        return this._getOption('dropDownAppointmentTemplate');
-    }
-    set dropDownAppointmentTemplate(value: any) {
-        this._setOption('dropDownAppointmentTemplate', value);
-    }
-
     @Input()
     get endDayHour(): number {
         return this._getOption('endDayHour');

packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts

@@ -56,8 +56,6 @@ type ISchedulerOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, I
   dataCellComponent?: React.ComponentType<any>;
   dateCellRender?: (...params: any) => React.ReactNode;
   dateCellComponent?: React.ComponentType<any>;
-  dropDownAppointmentRender?: (...params: any) => React.ReactNode;
-  dropDownAppointmentComponent?: React.ComponentType<any>;
   resourceCellRender?: (...params: any) => React.ReactNode;
   resourceCellComponent?: React.ComponentType<any>;
   timeCellRender?: (...params: any) => React.ReactNode;
@@ -128,11 +126,6 @@ const Scheduler = memo(
           render: "dateCellRender",
           component: "dateCellComponent"
         },
-        {
-          tmplOption: "dropDownAppointmentTemplate",
-          render: "dropDownAppointmentRender",
-          component: "dropDownAppointmentComponent"
-        },
         {
           tmplOption: "resourceCellTemplate",
           render: "resourceCellRender",
@@ -486,7 +479,6 @@ type IViewProps = React.PropsWithChildren<{
   cellDuration?: number;
   dataCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
   dateCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
-  dropDownAppointmentTemplate?: ((itemData: any, itemIndex: number, contentElement: any) => string | any) | template;
   endDayHour?: number;
   firstDayOfWeek?: FirstDayOfWeek | undefined;
   groupByDate?: boolean;
@@ -512,8 +504,6 @@ type IViewProps = React.PropsWithChildren<{
   dataCellComponent?: React.ComponentType<any>;
   dateCellRender?: (...params: any) => React.ReactNode;
   dateCellComponent?: React.ComponentType<any>;
-  dropDownAppointmentRender?: (...params: any) => React.ReactNode;
-  dropDownAppointmentComponent?: React.ComponentType<any>;
   resourceCellRender?: (...params: any) => React.ReactNode;
   resourceCellComponent?: React.ComponentType<any>;
   timeCellRender?: (...params: any) => React.ReactNode;
@@ -548,10 +538,6 @@ const _componentView = (props: IViewProps) => {
         tmplOption: "dateCellTemplate",
         render: "dateCellRender",
         component: "dateCellComponent"
-      }, {
-        tmplOption: "dropDownAppointmentTemplate",
-        render: "dropDownAppointmentRender",
-        component: "dropDownAppointmentComponent"
       }, {
         tmplOption: "resourceCellTemplate",
         render: "resourceCellRender",

packages/devextreme-react/src/scheduler.ts

@@ -92,7 +92,6 @@ type AccessibleOptions = Pick<Properties,
   "dateSerializationFormat" |
   "descriptionExpr" |
   "disabled" |
-  "dropDownAppointmentTemplate" |
   "editing" |
   "elementAttr" |
   "endDateExpr" |
@@ -179,7 +178,6 @@ const componentConfig = {
     dateSerializationFormat: String,
     descriptionExpr: String,
     disabled: Boolean,
-    dropDownAppointmentTemplate: {},
     editing: [Boolean, Object] as PropType<boolean | Record<string, any>>,
     elementAttr: Object as PropType<Record<string, any>>,
     endDateExpr: String,
@@ -262,7 +260,6 @@ const componentConfig = {
     "update:dateSerializationFormat": null,
     "update:descriptionExpr": null,
     "update:disabled": null,
-    "update:dropDownAppointmentTemplate": null,
     "update:editing": null,
     "update:elementAttr": null,
     "update:endDateExpr": null,
@@ -696,7 +693,6 @@ const DxViewConfig = {
     "update:cellDuration": null,
     "update:dataCellTemplate": null,
     "update:dateCellTemplate": null,
-    "update:dropDownAppointmentTemplate": null,
     "update:endDayHour": null,
     "update:firstDayOfWeek": null,
     "update:groupByDate": null,
@@ -722,7 +718,6 @@ const DxViewConfig = {
     cellDuration: Number,
     dataCellTemplate: {},
     dateCellTemplate: {},
-    dropDownAppointmentTemplate: {},
     endDayHour: Number,
     firstDayOfWeek: Number as PropType<FirstDayOfWeek>,
     groupByDate: Boolean,

packages/devextreme-vue/src/scheduler.ts

@@ -52,7 +52,6 @@ export class CompactAppointmentsHelper {
     return {
       clickEvent: this._clickEvent(options.onAppointmentClick).bind(this),
       dragBehavior: options.allowDrag && this._createTooltipDragBehavior($appointmentCollector).bind(this),
-      dropDownAppointmentTemplate: this.instance.option().dropDownAppointmentTemplate, // TODO deprecated option
       isButtonClick: true,
       _loopFocus: true,
     };

packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts

@@ -484,7 +484,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
         this.updateAppointmentDataSource();
         this.repaint();
         break;
-      case 'dropDownAppointmentTemplate':
       case 'appointmentCollectorTemplate':
       case '_appointmentTooltipOffset':
       case '_appointmentCountPerCell':
@@ -1996,11 +1995,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     this._appointmentTooltip?.hide();
   }
 
-  scrollToTime(hours, minutes, date) {
-    errors.log('W0002', 'dxScheduler', 'scrollToTime', '21.1', 'Use the "scrollTo" method instead');
-    this._workSpace.scrollToTime(hours, minutes, date);
-  }
-
   scrollTo(date, groupValues, allDay) {
     this._workSpace.scrollTo(date, groupValues, allDay);
   }

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -6,7 +6,6 @@ import {
   DEFAULT_SCHEDULER_INTERNAL_OPTIONS,
   DEFAULT_SCHEDULER_OPTIONS,
   DEFAULT_SCHEDULER_OPTIONS_RULES,
-  DEPRECATED_SCHEDULER_OPTIONS,
 } from './utils/options/constants';
 import type {
   NormalizedView, SafeSchedulerOptions, SchedulerOptionsRule, View,
@@ -41,14 +40,6 @@ export class SchedulerOptionsBaseWidget extends Widget<SafeSchedulerOptions> {
     }) as SafeSchedulerOptions;
   }
 
-  _setDeprecatedOptions(): void {
-    // @ts-expect-error
-    super._setDeprecatedOptions();
-
-    // @ts-expect-error
-    extend(this._deprecatedOptions, DEPRECATED_SCHEDULER_OPTIONS);
-  }
-
   protected _defaultOptionsRules(): SchedulerOptionsRule[] {
     // @ts-expect-error
     const rules: SchedulerOptionsRule[] = super._defaultOptionsRules();

packages/devextreme/js/__internal/scheduler/scheduler_options_base_widget.ts

@@ -15,6 +15,8 @@ const TOOLTIP_APPOINTMENT_ITEM_MARKER_BODY = `${TOOLTIP_APPOINTMENT_ITEM}-marker
 const TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON_CONTAINER = `${TOOLTIP_APPOINTMENT_ITEM}-delete-button-container`;
 const TOOLTIP_APPOINTMENT_ITEM_DELETE_BUTTON = `${TOOLTIP_APPOINTMENT_ITEM}-delete-button`;
 
+const APPOINTMENT_TOOLTIP_TEMPLATE = 'appointmentTooltipTemplate';
+
 export class TooltipStrategyBase {
   protected asyncTemplatePromises = new Set<Promise<void>>();
 
@@ -135,32 +137,31 @@ export class TooltipStrategyBase {
     const itemListContent = this._createItemListContent(appointment, targetedAppointment, color);
     this._options.addDefaultTemplates({
       // @ts-expect-error
-      [this._getItemListTemplateName()]: new FunctionTemplate((options) => {
+      appointmentTooltip: new FunctionTemplate((options) => {
         const $container = $(options.container);
         $container.append(itemListContent);
         return $container;
       }),
     });
 
-    const template = this._options.getAppointmentTemplate(`${this._getItemListTemplateName()}Template`);
+    const template = this._options.getAppointmentTemplate(APPOINTMENT_TOOLTIP_TEMPLATE);
     return this._createFunctionTemplate(template, appointment, targetedAppointment, index);
   }
 
   _createFunctionTemplate(template, appointmentData, targetedAppointmentData, index) {
     const isButtonClicked = Boolean(this._extraOptions.isButtonClick);
 
-    const isEmptyDropDownAppointmentTemplate = this._isEmptyDropDownAppointmentTemplate();
     // @ts-expect-error
     return new FunctionTemplate((options) => {
       // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
       const { promise, resolve } = createPromise<void>();
       this.asyncTemplatePromises.add(promise);
       return template.render({
-        model: isEmptyDropDownAppointmentTemplate ? {
+        model: {
           appointmentData,
           targetedAppointmentData,
           isButtonClicked,
-        } : appointmentData,
+        },
         container: options.container,
         index,
         onRendered: () => {
@@ -171,14 +172,6 @@ export class TooltipStrategyBase {
     });
   }
 
-  _getItemListTemplateName() {
-    return this._isEmptyDropDownAppointmentTemplate() ? 'appointmentTooltip' : 'dropDownAppointment';
-  }
-
-  _isEmptyDropDownAppointmentTemplate() {
-    return !this._extraOptions.dropDownAppointmentTemplate || this._extraOptions.dropDownAppointmentTemplate === 'dropDownAppointment';
-  }
-
   _onListItemClick(e) {
     this.hide();
     this._extraOptions.clickEvent && this._extraOptions.clickEvent(e);