Skip to content

Scheduler: fix ts issues in demos in strict mode #32101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmlvr merged 14 commits into from
Jan 8, 2026
Merged

Scheduler: fix ts issues in demos in strict mode #32101

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
760ef6a
fix ts react scheduler demos
dmlvr Jan 7, 2026
2061f33
merge 26_1
dmlvr Jan 7, 2026
29a51e4
generate reactjs demos
dmlvr Jan 7, 2026
7ee73fa
Merge branch '26_1' into fix_ts_26_1_scheduler_react
EugeniyKiyashko Jan 7, 2026
5320b66
fix scheduler
dmlvr Jan 7, 2026
ad42b53
add reactjs demos for scheduler
dmlvr Jan 7, 2026
5c56ae1
Merge branch 'fix_ts_26_1_scheduler_react' of github.com:dmlvr/DevExt…
dmlvr Jan 7, 2026
1f6dbc6
move 'type' keyword outside the curly braces
dmlvr Jan 7, 2026
7d7411f
update tsconfig.react-check
dmlvr Jan 7, 2026
5561ee0
fix by Copilot review
dmlvr Jan 7, 2026
0cfaa06
fix by rewiev
dmlvr Jan 8, 2026
db6fce9
fix lint and convert to js
dmlvr Jan 8, 2026
5862b90
some additional fixes by copilot review
dmlvr Jan 8, 2026
d93462b
some fix Vue demo
dmlvr Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Employee } from './data';
import { type Employee } from './data';

interface EmployeeCardProps {
employee: Employee;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import EmployeeCard from './EmployeeCard.tsx';
import { Employee } from './data';
import { type Employee } from './data';

interface EmployeeGalleryProps {
employees: Employee[];
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react';
import Scheduler from 'devextreme-react/scheduler';
import type { SchedulerTypes } from 'devextreme-react/scheduler';
import type { FormRef } from 'devextreme-react/form';
import type { dxElementWrapper } from 'devextreme/core/renderer';
import notify from 'devextreme/ui/notify';
import { data, holidays } from './data.ts';
import Utils from './utils.ts';
Expand Down Expand Up @@ -75,7 +76,7 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
}
};

const setComponentAria = (element) => {
const setComponentAria = (element: dxElementWrapper) => {
Copy link
Contributor

@pharret31 pharret31 Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the DxElement would be a better option here

Copy link
Contributor Author

@dmlvr dmlvr Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I'm trying to use DxElement the error persists
image
Property 'attr' does not exist on type 'HTMLElement'.

I found other way, take a look, please

const prevAria = element?.attr('aria-label') || '';
const description = ariaDescription();
const nextAria = `${prevAria}${description ? ` ${description}` : ''}`;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const TimeCell = (props: TimeCellProps) => {
const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date);

return (
<div className={isDinner ? 'dinner' : null}>
<div className={isDinner ? 'dinner' : undefined}>
{text}
{hasCoffeeCupIcon && <div className='cafe' />}
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default class Utils {
}

static isValidAppointment(component: SchedulerTypes.AppointmentAddingEvent['component'], appointmentData: SchedulerTypes.AppointmentAddingEvent['appointmentData']) {
const startDate = new Date(appointmentData.startDate);
const endDate = new Date(appointmentData.endDate);
const cellDuration = component.option('cellDuration');
const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date();
const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date();
const cellDuration = Number(component.option('cellDuration'));
return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration);
}

Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const appointmentClassName = '.dx-scheduler-appointment';
const cellClassName = '.dx-scheduler-date-table-cell';

const onContextMenuItemClick = (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
e.itemData.onItemClick?.(e);
e.itemData?.onItemClick?.(e);
};

const App = () => {
Expand All @@ -35,7 +35,7 @@ const App = () => {
...item,
onItemClick: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => scheduler?.updateAppointment(appointmentData, {
...appointmentData,
...{ roomId: [e.itemData.id] },
...{ roomId: [e.itemData?.id] },
}),
}));

Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Scheduler/Editing/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const showToast = (event: string, value: string, type: string) => {
};

const showAddedToast = (e: SchedulerTypes.AppointmentAddedEvent) => {
showToast('Added', e.appointmentData.text, 'success');
showToast('Added', e.appointmentData.text ?? '', 'success');
};

const showUpdatedToast = (e: SchedulerTypes.AppointmentUpdatedEvent) => {
showToast('Updated', e.appointmentData.text, 'info');
showToast('Updated', e.appointmentData.text ?? '', 'info');
};

const showDeletedToast = (e: SchedulerTypes.AppointmentDeletedEvent) => {
showToast('Deleted', e.appointmentData.text, 'warning');
showToast('Deleted', e.appointmentData.text ?? '', 'warning');
};

const App = () => {
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import 'whatwg-fetch';
import React from 'react';

import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
import type { LoadOptions } from 'devextreme/data';

import { CustomStore } from 'devextreme-react/common/data';

const getData = async (_, requestOptions) => {
const getData = async (_: LoadOptions, requestOptions: RequestInit & { showDeleted: boolean }) => {
const GOOGLE_CALENDAR_URL = 'https://www.googleapis.com/calendar/v3/calendars/';
const CALENDAR_ID = 'f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com';
const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k';
Expand Down
15 changes: 8 additions & 7 deletions apps/demos/Demos/Scheduler/Templates/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import MovieInfoContainer from './MovieInfoContainer.tsx';
import {
data, moviesData, theatreData, type MovieResource,
} from './data.ts';
import type { ToolbarItem } from 'devextreme/ui/popup';

type dxForm = NonNullable<FormTypes.InitializedEvent['component']>;

Expand All @@ -42,7 +43,7 @@ const App = () => {

const onPopupOptionChanged = useCallback((e: PopupTypes.OptionChangedEvent) => {
if (e.fullName === 'toolbarItems' && e.value) {
e.value.forEach((item, index: number) => {
e.value.forEach((item: ToolbarItem & { shortcut?: string }, index: number) => {
if (item.shortcut === 'done' || item.shortcut === 'cancel') {
e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
}
Expand All @@ -57,22 +58,22 @@ const App = () => {

const updateEndDate = useCallback((movie: MovieResource): void => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const formData = form?.option('formData');
const { startDate } = formData;

if (startDate) {
const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
form.updateData('endDate', newEndDate);
form?.updateData('endDate', newEndDate);
}
}, []);

const onFormInitialized = useCallback((e: FormTypes.InitializedEvent) => {
const form = e.component;
formInstanceRef.current = form;
form && (formInstanceRef.current = form);

form.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => {
form?.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => {
if (fieldEvent.dataField === 'startDate') {
const currentFormData = form.option('formData');
const currentFormData = form?.option('formData');
const movie = getMovieById(currentFormData.movieId);

if (movie) {
Expand All @@ -87,7 +88,7 @@ const App = () => {
const movie = getMovieById(e.value);

if (movie) {
form.updateData('director', movie.director);
form?.updateData('director', movie.director);
updateEndDate(movie);
}
}, [updateEndDate]);
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const MovieInfoContainer: React.FC<MovieInfoContainerProps> = ({ formInstanceRef

useEffect(() => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const formData = form?.option('formData');

const currentMovie = getMovieById(formData.movieId);
setMovie(currentMovie);
Expand All @@ -30,10 +30,10 @@ const MovieInfoContainer: React.FC<MovieInfoContainerProps> = ({ formInstanceRef
}
};

form.on('fieldDataChanged', handleFieldDataChanged);
form?.on('fieldDataChanged', handleFieldDataChanged);

return () => {
form.off('fieldDataChanged', handleFieldDataChanged);
form?.off('fieldDataChanged', handleFieldDataChanged);
};
}, [formInstanceRef]);

Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Scheduler/Toolbar/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const App = () => {
}

const currentDate = scheduler.option('currentDate');
const cellDuration = scheduler.option('cellDuration');
const cellDuration = Number(scheduler.option('cellDuration'));
const cellDurationMs = cellDuration * MS_IN_HOUR;
const currentTime = new Date(currentDate as Date).getTime();
const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Scheduler/Toolbar/React/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const data: Appointment[] = [
endDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(21)),
},
];
export const schedulerDataSource = new DataSource(data);
export const schedulerDataSource = new DataSource(data) as unknown as DataSource<SchedulerTypes.Appointment>;
Copy link
Contributor

@pharret31 pharret31 Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to type that without 'as unknown'?

Copy link
Contributor Author

@dmlvr dmlvr Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I researched other demos and found way to use data instead of dataSource, like this https://github.com/DevExpress/DevExtreme/blob/577ad2c1d9e95357851643cbcfcae8bda262d223/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx


export const assignees: Assignee[] = [
{
Expand Down
34 changes: 30 additions & 4 deletions apps/demos/tsconfig.react-check.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,36 @@
"Demos/FloatingActionButton/**/React/**/*.tsx",
"Demos/Gantt/**/React/**/*.ts",
"Demos/Gantt/**/React/**/*.tsx",
"Demos/Pagination/**/React/**/*.ts",
"Demos/Pagination/**/React/**/*.tsx",
"Demos/Scheduler/**/React/**/*.ts",
"Demos/Scheduler/**/React/**/*.tsx",
"Demos/HtmlEditor/**/React/**/*.ts",
"Demos/HtmlEditor/**/React/**/*.tsx",
"Demos/Localization/**/React/**/*.ts",
"Demos/Localization/**/React/**/*.tsx",
"Demos/Map/**/React/**/*.ts",
"Demos/Map/**/React/**/*.tsx",
"Demos/NumberBox/**/React/**/*.ts",
"Demos/NumberBox/**/React/**/*.tsx",
"Demos/Popup/**/React/**/*.ts",
"Demos/Popup/**/React/**/*.tsx",
"Demos/RadioGroup/**/React/**/*.ts",
"Demos/RadioGroup/**/React/**/*.tsx",
"Demos/RangeSlider/**/React/**/*.ts",
"Demos/RangeSlider/**/React/**/*.tsx",
"Demos/SelectBox/**/React/**/*.ts",
"Demos/SelectBox/**/React/**/*.tsx",
"Demos/Slider/**/React/**/*.ts",
"Demos/Slider/**/React/**/*.tsx",
"Demos/SpeechToText/**/React/**/*.ts",
"Demos/SpeechToText/**/React/**/*.tsx",
"Demos/Stepper/**/React/**/*.ts",
"Demos/Stepper/**/React/**/*.tsx",
"Demos/TagBox/**/React/**/*.ts",
"Demos/TagBox/**/React/**/*.tsx",
"Demos/TextArea/**/React/**/*.ts",
"Demos/TextArea/**/React/**/*.tsx",
"Demos/Toast/**/React/**/*.ts",
"Demos/Toast/**/React/**/*.tsx",
"Demos/Validation/**/React/**/*.ts",
"Demos/Validation/**/React/**/*.tsx",
"Demos/VectorMap/**/React/**/*.ts",
"Demos/VectorMap/**/React/**/*.tsx",
"Demos/Localization/**/React/**/*.ts",
Expand Down
Loading