Scheduler: Demos fix import statements and type definitions (#31940)

Author: aleksei-semikozov

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html

@@ -123,7 +123,7 @@ <h3>DXCinema Show Times</h3>
           <div class="title">{{ movie.text }}</div>
           <div>
             Ticket Price:
-            <strong>${{ model.targetedAppointmentData.price }}</strong>
+            <strong>$ {{ model.targetedAppointmentData.price }}</strong>
           </div>
           <div>
             {{

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

@@ -3,21 +3,17 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import query from 'devextreme/data/query';
+import { query } from 'devextreme-angular/common/data';
 import { DxSchedulerModule, DxSchedulerComponent } from 'devextreme-angular/ui/scheduler';
-import {
-  ValueChangedEvent as SelectBoxValueChangedEvent,
-  ContentReadyEvent as SelectBoxContentReadyEvent,
-} from 'devextreme/ui/select_box';
-import dxForm, {
-  InitializedEvent as FormInitializedEvent,
-  FieldDataChangedEvent,
-} from 'devextreme/ui/form';
-import { OptionChangedEvent as PopupOptionChangedEvent } from 'devextreme/ui/popup';
+import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
+import { DxFormTypes } from 'devextreme-angular/ui/form';
+import { DxPopupTypes } from 'devextreme-angular/ui/popup';
 import {
   Service, MovieData, TheatreData, Data,
 } from './app.service';
 
+type dxForm = NonNullable<DxFormTypes.InitializedEvent['component']>;
+
 @Pipe({ name: 'apply' })
 export class ApplyPipe<TArgs, TReturn> implements PipeTransform {
   transform(func: ((...args: TArgs[]) => TReturn), ...args: TArgs[]): TReturn { return func(...args); }
@@ -69,7 +65,7 @@ export class AppComponent {
 
   priceDisplayExpr = (value: number): string => `$${value}`;
 
-  onMovieValueChanged = (e: SelectBoxValueChangedEvent): void => {
+  onMovieValueChanged = (e: DxSelectBoxTypes.ValueChangedEvent): void => {
     const movie = this.getMovieById(e.value);
     this.currentSelectedMovie = movie;
 
@@ -79,15 +75,15 @@ export class AppComponent {
     }
   };
 
-  onMovieEditorContentReady = (e: SelectBoxContentReadyEvent): void => {
+  onMovieEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => {
     e.component.option('stylingMode', this.getEditorStylingMode());
   };
 
-  onPriceEditorContentReady = (e: SelectBoxContentReadyEvent): void => {
+  onPriceEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => {
     e.component.option('stylingMode', this.getEditorStylingMode());
   };
 
-  onPopupOptionChanged = (e: PopupOptionChangedEvent): void => {
+  onPopupOptionChanged = (e: DxPopupTypes.OptionChangedEvent): void => {
     if (e.fullName === 'toolbarItems' && e.value) {
       e.value.forEach((item, index) => {
         if (item.shortcut === 'done' || item.shortcut === 'cancel') {
@@ -106,7 +102,7 @@ export class AppComponent {
     }
   };
 
-  onFormInitialized = (e: FormInitializedEvent): void => {
+  onFormInitialized = (e: DxFormTypes.InitializedEvent): void => {
     const form = e.component;
     this.formInstance = form;
 
@@ -118,7 +114,7 @@ export class AppComponent {
       this.currentSelectedMovie = null;
     }
 
-    form.on('fieldDataChanged', (fieldEvent: FieldDataChangedEvent) => {
+    form.on('fieldDataChanged', (fieldEvent: DxFormTypes.FieldDataChangedEvent) => {
       if (fieldEvent.dataField === 'startDate') {
         const currentFormData = form.option('formData');
         if (currentFormData.movieId) {

apps/demos/Demos/Scheduler/Templates/React/App.tsx

@@ -8,16 +8,17 @@ import Scheduler, {
 } from 'devextreme-react/scheduler';
 import { query } from 'devextreme-react/common/data';
 import { type SelectBoxTypes } from 'devextreme-react/select-box';
-import type { InitializedEvent as FormInitializedEvent, FieldDataChangedEvent } from 'devextreme/ui/form';
-import type dxForm from 'devextreme/ui/form';
-import type { OptionChangedEvent as PopupOptionChangedEvent } from 'devextreme/ui/popup';
+import { type FormTypes } from 'devextreme-react/form';
+import { type PopupTypes } from 'devextreme-react/popup';
 import Appointment from './Appointment.tsx';
 import AppointmentTooltip from './AppointmentTooltip.tsx';
 import MovieInfoContainer from './MovieInfoContainer.tsx';
 import {
   data, moviesData, theatreData, type MovieResource,
 } from './data.ts';
 
+type dxForm = NonNullable<FormTypes.InitializedEvent['component']>;
+
 const currentDate = new Date(2025, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['day', 'week', 'timelineDay'];
 const groups = ['theatreId'];
@@ -60,7 +61,7 @@ const App = () => {
     e.component.option('stylingMode', getEditorStylingMode());
   }, []);
 
-  const onPopupOptionChanged = useCallback((e: PopupOptionChangedEvent) => {
+  const onPopupOptionChanged = useCallback((e: PopupTypes.OptionChangedEvent) => {
     if (e.fullName === 'toolbarItems' && e.value) {
       e.value.forEach((item: any, index: number) => {
         if (item.shortcut === 'done' || item.shortcut === 'cancel') {
@@ -70,11 +71,11 @@ const App = () => {
     }
   }, []);
 
-  const onFormInitialized = useCallback((e: FormInitializedEvent) => {
+  const onFormInitialized = useCallback((e: FormTypes.InitializedEvent) => {
     const form = e.component;
     formInstanceRef.current = form;
 
-    form.on('fieldDataChanged', (fieldEvent: FieldDataChangedEvent) => {
+    form.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => {
       if (fieldEvent.dataField === 'startDate') {
         const currentFormData = form.option('formData');
         if (currentFormData.movieId) {

apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import type dxForm from 'devextreme/ui/form';
-import type { FieldDataChangedEvent } from 'devextreme/ui/form';
+import { type FormTypes } from 'devextreme-react/form';
 import { query } from 'devextreme-react/common/data';
 import { moviesData, type MovieResource } from './data.ts';
 
+type dxForm = NonNullable<FormTypes.InitializedEvent['component']>;
+
 type MovieInfoContainerProps = {
   formInstanceRef: React.RefObject<dxForm | null>;
 };
@@ -25,7 +26,7 @@ const MovieInfoContainer: React.FC<MovieInfoContainerProps> = ({ formInstanceRef
         setMovie(null);
       }
 
-      const handleFieldDataChanged = (e: FieldDataChangedEvent) => {
+      const handleFieldDataChanged = (e: FormTypes.FieldDataChangedEvent) => {
         if (e.dataField === 'movieId') {
           if (e.value) {
             const updatedMovie = getMovieById(e.value);

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

@@ -112,24 +112,26 @@ import DxScheduler, {
   DxForm as DxSchedulerForm,
   type DxSchedulerTypes,
 } from 'devextreme-vue/scheduler';
-import DxForm, { DxItem, type DxFormTypes } from 'devextreme-vue/form';
+import { DxItem, type DxFormTypes } from 'devextreme-vue/form';
 import { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
-import type { OptionChangedEvent as PopupOptionChangedEvent } from 'devextreme/ui/popup';
-import query from 'devextreme/data/query';
+import { type DxPopupTypes } from 'devextreme-vue/popup';
+import { query } from 'devextreme-vue/common/data';
 import type { MovieResource } from './data.ts';
 import AppointmentTemplate from './AppointmentTemplate.vue';
 import AppointmentTooltipTemplate from './AppointmentTooltipTemplate.vue';
 import MovieInfoContainer from './MovieInfoContainer.vue';
 import { data, moviesData, theatreData } from './data.ts';
 
+type dxForm = NonNullable<DxFormTypes.InitializedEvent['component']>;
+
 const views = ['day', 'week', 'timelineDay'];
 const groups = ['theatreId'];
 const scheduler = ref<DxScheduler['instance']>();
 const currentDate = new Date(2025, 3, 27);
 const dataSource = data;
 
 const currentMovie = ref<MovieResource | null | undefined>(null);
-const formInstance = ref<DxForm['instance'] | null>(null);
+const formInstance = ref<dxForm | null>(null);
 
 const getMovieById = (resourceId: number): MovieResource | undefined =>
   query(moviesData)
@@ -143,7 +145,7 @@ const getEditorStylingMode = (): 'filled' | 'outlined' => {
 
 const priceDisplayExpr = (value: number): string => `$${value}`;
 
-const updateEndDate = (form: NonNullable<DxForm['instance']>, movie: MovieResource): void => {
+const updateEndDate = (form: dxForm, movie: MovieResource): void => {
   const formData = form.option('formData');
   const { startDate } = formData;
   if (startDate && movie?.duration) {
@@ -170,7 +172,7 @@ const onPriceEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void
   e.component.option('stylingMode', getEditorStylingMode());
 };
 
-const onPopupOptionChanged = (e: PopupOptionChangedEvent): void => {
+const onPopupOptionChanged = (e: DxPopupTypes.OptionChangedEvent): void => {
   if (e.fullName === 'toolbarItems' && e.value) {
     e.value.forEach((item: any, index: number) => {
       if (item.shortcut === 'done' || item.shortcut === 'cancel') {