Warning: Failed prop type: Invalid prop `appointmentData.startDate` of type `String` supplied to `Layout`, expected instance of `Date`.

[jhunexjun]

Is there an existing issue for this?

• [X] 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" },

[Krijovnick]

Hi @jhunexjun,

I didn't manage to reproduce the issue. Could you please modify this example to illustrate it?

[jhunexjun]

To reproduce from your example

1. Copy the url in the browser panel. (https://3ppjgd.csb.app/) I'm not sure if that's random or what.
2. Open it in a new tab or window.
3. Open the Inspect Element (DevTool) from that tab or window.
4. Edit the "Meeting" to anything like "Meeting 2"
5. Save it. You'll see the error in the Console tab of the DevTool.

[Krijovnick]

@jhunexjun Thank you for the detailed description. I reproduced the issue. We will fix it as soon as possible.