Warning: Failed prop type: Invalid prop `appointmentData.startDate` of type `String` supplied to `Layout`, expected instance of `Date`.
jhunexjun opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Scheduler
Current Behaviour
Warning: Failed prop type: Invalid prop `appointmentData.startDate` of type `String` supplied to `Layout`, expected instance of `Date`.
at Layout (http://localhost:3000/static/js/vendors~main.chunk.js:5663:24)
at TemplateConnectorBase (http://localhost:3000/static/js/vendors~main.chunk.js:1198:24)
at TemplatePlaceholderBase (http://localhost:3000/static/js/vendors~main.chunk.js:830:43)
at BasicLayoutPlaceholder
at div
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Layout (http://localhost:3000/static/js/vendors~main.chunk.js:5492:26)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:56501:87)
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:149995:30)
at Slide (http://localhost:3000/static/js/vendors~main.chunk.js:60338:81)
at FocusTrap (http://localhost:3000/static/js/vendors~main.chunk.js:20122:5)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Portal (http://localhost:3000/static/js/vendors~main.chunk.js:24772:5)
at ModalUnstyled (http://localhost:3000/static/js/vendors~main.chunk.js:23039:7)
at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:54338:86)
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Drawer (http://localhost:3000/static/js/vendors~main.chunk.js:42711:87)
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Overlay (http://localhost:3000/static/js/vendors~main.chunk.js:6107:24)
at TemplateConnectorBase (http://localhost:3000/static/js/vendors~main.chunk.js:1198:24)
at TemplatePlaceholderBase (http://localhost:3000/static/js/vendors~main.chunk.js:830:43)
at div
at ContainerBase (http://localhost:3000/static/js/vendors~main.chunk.js:2477:23)
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Root (http://localhost:3000/static/js/vendors~main.chunk.js:2502:21)
at TemplatePlaceholderBase (http://localhost:3000/static/js/vendors~main.chunk.js:830:43)
at PluginHostBase (http://localhost:3000/static/js/vendors~main.chunk.js:913:24)
at SchedulerBase (http://localhost:3000/static/js/vendors~main.chunk.js:9057:17)
at Scheduler (http://localhost:3000/static/js/vendors~main.chunk.js:2523:23)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:56501:87)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:45862:91)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:45862:91)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:16574:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:45862:91)
at Schedule2 (http://localhost:3000/static/js/main.chunk.js:432:93)
at RenderedRoute (http://localhost:3000/static/js/vendors~main.chunk.js:148450:5)
at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:148872:5)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:148810:15)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:147157:5)
console.<computed> @ index.js:1
Expected Behaviour
Should be no error.
Steps to Reproduce
import { useState, useEffect } from 'react';
import Paper from '@mui/material/Paper';
import { ViewState, EditingState, IntegratedEditing } from '@devexpress/dx-react-scheduler';
import {
Scheduler,
DayView,
WeekView,
Appointments,
AppointmentForm,
AppointmentTooltip,
ConfirmationDialog,
Toolbar,
ViewSwitcher
} from '@devexpress/dx-react-scheduler-material-ui';
import '@fontsource/roboto/300.css';
import { Grid } from '@mui/material';
import Item from '@mui/material/Grid'; // Grid version 1
export default function Schedule2() {
let initSchedulerData = [
{ id: 1, location: 'Room 1', startDate: '2022-11-29T09:45', endDate: '2022-11-29T11:00', title: 'Meeting' },
{ id: 2, location: 'Room 1', startDate: '2022-11-30T12:00', endDate: '2022-11-30T13:30', title: 'Go to a gym' },
];
let [currentDate, setCurrentDate] = useState(new Date());
let [schedulerData, setScheduleData] = useState(initSchedulerData);
function commitChanges({added, changed, deleted}) {
// console.log(schedulerData.length);
if (added) {
const startingAddedId = schedulerData.length > 0 ? schedulerData[schedulerData.length - 1].id + 1 : 0;
schedulerData = [...schedulerData, { id: startingAddedId, ...added }];
}
if (changed) {
schedulerData = schedulerData.map(appointment => (
changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment
));
}
if (deleted !== undefined) {
console.log("deleted: ", deleted);
}
setScheduleData(schedulerData);
}
return (
<Grid container spacing={0}>
<Grid item xs={2}>
<Item></Item>
</Grid>
<Grid item xs={8}>
<Item>
<Paper>
<Scheduler data={schedulerData} height={660} >
<ViewState currentDate={currentDate} />
<EditingState onCommitChanges={commitChanges} />
<IntegratedEditing />
<WeekView startDayHour={6} endDayHour={23} />
<ConfirmationDialog />
<Appointments />
<AppointmentTooltip showOpenButton showDeleteButton />
<AppointmentForm />
</Scheduler>
</Paper>
</Item>
</Grid>
<Grid item xs={2}>
<Item></Item>
</Grid>
</Grid>
);
}
Environment
"dependencies": {
"@devexpress/dx-react-core": "3.0.4",
"@devexpress/dx-react-scheduler": "3.0.4",
"@devexpress/dx-react-scheduler-material-ui": "3.0.4",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/x-date-pickers": "^5.0.0-alpha.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "^4.0.3",
"styled-components": "^5.3.6",
"web-vitals": "^2.1.4"
},
Hi @jhunexjun,
I didn't manage to reproduce the issue. Could you please modify this example to illustrate it?
To reproduce from your example
- Copy the url in the browser panel. (https://3ppjgd.csb.app/) I'm not sure if that's random or what.
- Open it in a new tab or window.
- Open the Inspect Element (DevTool) from that tab or window.
- Edit the "Meeting" to anything like "Meeting 2"
- Save it. You'll see the error in the Console tab of the DevTool.
@jhunexjun Thank you for the detailed description. I reproduced the issue. We will fix it as soon as possible.