Scheduler Vue: add types (#2961)

* fix

* fix

* fix imports

* fix

JSDemos/Demos/Scheduler/Adaptability/Vue/App.vue

@@ -28,14 +28,14 @@
 import { ref } from 'vue';
 import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
 import DxSpeedDialAction from 'devextreme-vue/speed-dial-action';
-import { data, priorities } from './data.js';
+import { data, priorities } from './data.ts';
 
 const views = ['week', 'month'];
 const currentDate = new Date(2021, 2, 25);
 const cellDuration = 30;
 const dataSource = data;
 const schedulerRef = ref<DxScheduler>();
 function showPopup() {
-  schedulerRef.value!.instance!.showAppointmentPopup();
+  schedulerRef.value?.instance?.showAppointmentPopup();
 }
 </script>

JSDemos/Demos/Scheduler/Agenda/Vue/App.vue

@@ -24,7 +24,7 @@
 </template>
 <script setup lang="ts">
 import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
-import { data, assignees, priorities } from './data.js';
+import { data, assignees, priorities } from './data.ts';
 
 const views = ['agenda'];
 const currentDate = new Date(2021, 4, 11);

JSDemos/Demos/Scheduler/AllDayPanelMode/Vue/App.vue

@@ -26,9 +26,9 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxScheduler from 'devextreme-vue/scheduler';
+import DxScheduler, { DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import { DxRadioGroup } from 'devextreme-vue/radio-group';
-import { data } from './data.js';
+import { data } from './data.ts';
 
 const currentDate = new Date(2021, 2, 28);
 const views = [
@@ -39,6 +39,6 @@ const views = [
   },
   'week',
 ];
-const allDayPanelItems = ['all', 'allDay', 'hidden'];
-const allDayPanelMode = ref('allDay');
+const allDayPanelItems: DxSchedulerTypes.AllDayPanelMode[] = ['all', 'allDay', 'hidden'];
+const allDayPanelMode = ref<DxSchedulerTypes.AllDayPanelMode>('allDay');
 </script>

JSDemos/Demos/Scheduler/BasicViews/Vue/App.vue

@@ -10,10 +10,10 @@
   />
 </template>
 <script setup lang="ts">
-import DxScheduler from 'devextreme-vue/scheduler';
-import { data } from './data.js';
+import DxScheduler, { DxSchedulerTypes } from 'devextreme-vue/scheduler';
+import { data } from './data.ts';
 
-const views = ['day', 'week', 'workWeek', 'month'];
+const views: DxSchedulerTypes.ViewType[] = ['day', 'week', 'workWeek', 'month'];
 const currentDate = new Date(2021, 3, 29);
 const dataSource = data;
 </script>

JSDemos/Demos/Scheduler/CellTemplates/Vue/App.vue

@@ -43,38 +43,38 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { DxScheduler } from 'devextreme-vue/scheduler';
+import { DxScheduler, DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import notify from 'devextreme/ui/notify';
-import { data, holidays } from './data.js';
-import Utils from './utils.js';
+import { data, holidays } from './data.ts';
+import Utils from './utils.ts';
 import DataCell from './DataCell.vue';
 import DataCellMonth from './DataCellMonth.vue';
 import DateCell from './DateCell.vue';
 import TimeCell from './TimeCell.vue';
 
-const views = ['workWeek', 'month'];
-const currentView = ref('workWeek');
+const views: DxSchedulerTypes.ViewType[] = ['workWeek', 'month'];
+const currentView = ref<DxSchedulerTypes.ViewType>('workWeek');
 const currentDate = new Date(2021, 3, 27);
 const dataSource = data;
 
 const isMonthView = computed(() => currentView.value === 'month');
 
-function onAppointmentFormOpening(e) {
+function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEvent) {
   const startDate = new Date(e.appointmentData.startDate);
   if (!Utils.isValidAppointmentDate(startDate)) {
     e.cancel = true;
     notifyDisableDate();
   }
   applyDisableDatesToDateEditors(e.form);
 }
-function onAppointmentAdding(e) {
+function onAppointmentAdding(e: DxSchedulerTypes.AppointmentAddingEvent) {
   const isValidAppointment = Utils.isValidAppointment(e.component, e.appointmentData);
   if (!isValidAppointment) {
     e.cancel = true;
     notifyDisableDate();
   }
 }
-function onAppointmentUpdating(e) {
+function onAppointmentUpdating(e: DxSchedulerTypes.AppointmentUpdatingEvent) {
   const isValidAppointment = Utils.isValidAppointment(e.component, e.newData);
   if (!isValidAppointment) {
     e.cancel = true;

JSDemos/Demos/Scheduler/CellTemplates/Vue/DataCell.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import Utils from './utils.js';
+import Utils from './utils.ts';
 
 withDefaults(defineProps<{
   cellData?: any

JSDemos/Demos/Scheduler/CellTemplates/Vue/DateCell.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import Utils from './utils.js';
+import Utils from './utils.ts';
 
 withDefaults(defineProps<{
   cellData?: any

JSDemos/Demos/Scheduler/CellTemplates/Vue/TimeCell.vue

@@ -9,7 +9,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import Utils from './utils.js';
+import Utils from './utils.ts';
 
 const props = withDefaults(defineProps<{
   cellData?: any

JSDemos/Demos/Scheduler/CellTemplates/Vue/utils.js → JSDemos/Demos/Scheduler/CellTemplates/Vue/utils.ts

@@ -1,26 +1,26 @@
-import { dinnerTime, holidays } from './data.js';
+import { dinnerTime, holidays } from './data.ts';
 
 export default class Utils {
-  static isHoliday(date) {
+  static isHoliday(date: Date) {
     const localeDate = date.toLocaleDateString();
     return holidays.filter((holiday) => holiday.toLocaleDateString() === localeDate).length > 0;
   }
 
-  static isWeekend(date) {
+  static isWeekend(date: Date) {
     const day = date.getDay();
     return day === 0 || day === 6;
   }
 
-  static isDisableDate(date) {
+  static isDisableDate(date: Date) {
     return Utils.isHoliday(date) || Utils.isWeekend(date);
   }
 
-  static isDinner(date) {
+  static isDinner(date: Date) {
     const hours = date.getHours();
     return hours >= dinnerTime.from && hours < dinnerTime.to;
   }
 
-  static hasCoffeeCupIcon(date) {
+  static hasCoffeeCupIcon(date: Date) {
     const hours = date.getHours();
     const minutes = date.getMinutes();
 
@@ -34,7 +34,7 @@ export default class Utils {
     return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration);
   }
 
-  static isValidAppointmentInterval(startDate, endDate, cellDuration) {
+  static isValidAppointmentInterval(startDate: Date, endDate: Date, cellDuration: number) {
     const edgeEndDate = new Date(endDate.getTime() - 1);
 
     if (!Utils.isValidAppointmentDate(edgeEndDate)) {
@@ -54,7 +54,7 @@ export default class Utils {
     return true;
   }
 
-  static isValidAppointmentDate(date) {
+  static isValidAppointmentDate(date: Date) {
     return !Utils.isHoliday(date) && !Utils.isDinner(date) && !Utils.isWeekend(date);
   }
 }

JSDemos/Demos/Scheduler/ContextMenuIntegration/Vue/App.vue

@@ -38,24 +38,26 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
+import DxScheduler, { DxResource, DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import DxContextMenu from 'devextreme-vue/context-menu';
 import ItemTemplate from './ItemTemplate.vue';
-import { resourcesData, data } from './data.js';
+import { resourcesData, data } from './data.ts';
 
 const views = ['day', 'month'];
 const appointmentClassName = '.dx-scheduler-appointment';
 const cellClassName = '.dx-scheduler-date-table-cell';
 const currentDate = ref(new Date(2020, 10, 25));
 const dataSource = data;
-const groups = ref<any>(undefined);
+const groups = ref<string[]>(undefined);
 const crossScrollingEnabled = ref(false);
 const disabled = ref(true);
-const contextMenuItems = ref<any[]>([]);
+const contextMenuItems = ref([]);
 const target = ref(appointmentClassName);
 const schedulerRef = ref<DxScheduler>();
 
-function onAppointmentContextMenu({ appointmentData, targetedAppointmentData }) {
+function onAppointmentContextMenu(
+  { appointmentData, targetedAppointmentData }: DxSchedulerTypes.AppointmentContextMenuEvent,
+) {
   const scheduler = schedulerRef.value!.instance!;
   const resourceItems = resourcesData.map((item) => ({
     ...item,
@@ -87,7 +89,7 @@ function onAppointmentContextMenu({ appointmentData, targetedAppointmentData })
     ...resourceItems,
   ];
 }
-function onCellContextMenu({ cellData }) {
+function onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent) {
   const scheduler = schedulerRef.value!.instance!;
   target.value = cellClassName;
   disabled.value = false;

JSDemos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue

@@ -67,11 +67,11 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
+import DxScheduler, { DxResource, DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import { DxSwitch } from 'devextreme-vue/switch';
 import { DxNumberBox } from 'devextreme-vue/number-box';
 import AppointmentTemplate from './AppointmentTemplate.vue';
-import { data, moviesData } from './data.js';
+import { data, moviesData } from './data.ts';
 
 const views = ['week', 'timelineWeek'];
 const currentDate = new Date();
@@ -80,13 +80,13 @@ const shadeUntilCurrentTime = ref(true);
 const updateInterval = ref(10);
 const dataSource = data;
 
-function onContentReady(e) {
+function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
   e.component.scrollTo(new Date());
 }
-function onAppointmentClick(e) {
+function onAppointmentClick(e: DxSchedulerTypes.AppointmentClickEvent) {
   e.cancel = true;
 }
-function onAppointmentDblClick(e) {
+function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) {
   e.cancel = true;
 }
 </script>

JSDemos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue

@@ -7,16 +7,14 @@
 
 <script setup lang="ts">
 import Query from 'devextreme/data/query';
-import { moviesData } from './data.js';
+import { DxSchedulerTypes } from 'devextreme-vue/scheduler';
+import { moviesData } from './data.ts';
 
-const props = withDefaults(defineProps<{
-  appointmentModel?: {
-    appointmentData?: any
-  }
-}>(), {
-  appointmentModel: () => ({}),
-});
-const getMovieInfo = function(data) {
+const props = defineProps<{
+  appointmentModel: DxSchedulerTypes.AppointmentTemplateData
+}>();
+
+const getMovieInfo = function(data: DxSchedulerTypes.Appointment) {
   return Query(moviesData)
     .filter(['id', data.movieId])
     .toArray()[0] || {};

JSDemos/Demos/Scheduler/CustomDragAndDrop/Vue/App.vue

@@ -42,17 +42,18 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxScheduler, { DxAppointmentDragging } from 'devextreme-vue/scheduler';
-import DxDraggable from 'devextreme-vue/draggable';
+import DxScheduler, { DxAppointmentDragging, DxSchedulerTypes } from 'devextreme-vue/scheduler';
+import DxDraggable, { DxDraggableTypes } from 'devextreme-vue/draggable';
 import DxScrollView from 'devextreme-vue/scroll-view';
-import { appointments as appointmentsData, tasks as tasksData } from './data.js';
+import { appointments as appointmentsData, tasks as tasksData, Task } from './data.ts';
 
 const draggingGroupName = ref('appointmentsGroup');
 const views = ref([{ type: 'day', intervalCount: 3 }]);
 const currentDate = ref(new Date(2021, 3, 26));
-const tasks = ref<Array<{text: string}>>(tasksData);
-const appointments = ref<Array<{text: string, startDate: Date, endDate: Date}>>(appointmentsData);
-function onAppointmentRemove({ itemData }) {
+const tasks = ref<Task[]>(tasksData);
+const appointments = ref<DxSchedulerTypes.Appointment[]>(appointmentsData);
+
+function onAppointmentRemove({ itemData }: DxSchedulerTypes.AppointmentDraggingRemoveEvent) {
   const index = appointments.value.indexOf(itemData);
 
   if (index >= 0) {
@@ -61,7 +62,7 @@ function onAppointmentRemove({ itemData }) {
     tasks.value = [...tasks.value, itemData];
   }
 }
-function onAppointmentAdd(e) {
+function onAppointmentAdd(e: DxSchedulerTypes.AppointmentDraggingAddEvent) {
   const index = tasks.value.indexOf(e.fromData);
 
   if (index >= 0) {
@@ -70,13 +71,13 @@ function onAppointmentAdd(e) {
     appointments.value = [...appointments.value, e.itemData];
   }
 }
-function onListDragStart(e) {
+function onListDragStart(e: DxDraggableTypes.DragStartEvent) {
   e.cancel = true;
 }
-function onItemDragStart(e) {
+function onItemDragStart(e: DxDraggableTypes.DragStartEvent) {
   e.itemData = e.fromData;
 }
-function onItemDragEnd(e) {
+function onItemDragEnd(e: DxDraggableTypes.DragEndEvent) {
   if (e.toData) {
     e.cancel = true;
   }

JSDemos/Demos/Scheduler/CustomDragAndDrop/Vue/data.js → JSDemos/Demos/Scheduler/CustomDragAndDrop/Vue/data.ts

@@ -1,4 +1,8 @@
-export const tasks = [
+export interface Task {
+  text: string;
+}
+
+export const tasks: Task[] = [
   {
     text: 'New Brochures',
   }, {

JSDemos/Demos/Scheduler/CustomTemplates/Vue/App.vue

@@ -51,26 +51,26 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
+import DxScheduler, { DxResource, DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import Query from 'devextreme/data/query';
 import AppointmentTemplate from './AppointmentTemplate.vue';
 import AppointmentTooltipTemplate from './AppointmentTooltipTemplate.vue';
-import { data, moviesData, theatreData } from './data.js';
+import { data, moviesData, theatreData } from './data.ts';
 
 const views = ['day', 'week', 'timelineDay'];
 const groups = ['theatreId'];
-const scheduler = ref(null);
+const scheduler = ref<DxScheduler['instance']>(null);
 const currentDate = new Date(2021, 3, 27);
 const dataSource = data;
 const editing = { allowAdding: false };
 
-function onContentReady(e) {
+function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
   scheduler.value = e.component;
 }
-function onAppointmentFormOpening(e) {
+function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEvent) {
   const { form } = e;
   let movieInfo = getMovieById(e.appointmentData.movieId) || {};
-  let { startDate } = e.appointmentData;
+  let startDate = e.appointmentData.startDate as Date;
 
   form.option('items', [{
     label: {
@@ -106,7 +106,7 @@ function onAppointmentFormOpening(e) {
       width: '100%',
       type: 'datetime',
       onValueChanged(args) {
-        startDate = args.value;
+        startDate = args.value as Date;
         form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
       },
     },