Scheduler Date value Not finite error in iPad Browsers

[Tanuj Pancholi]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using

• React Scheduler

Current Behaviour

scheduler is loading perfectly in desktop browsers and android phones but when scheduler is viewed from iPad browsers like chrome, then its not loading and giving an error of date value is not finite

Expected Behaviour

scheduler should work in iPad browsers

Steps to Reproduce

View the scheduler component in iPad browsers, it won't work

Screenshots

Code

 import React, { useEffect, useState } from "react";
 import {v4 as uuidv4} from 'uuid';
  import Paper from "@material-ui/core/Paper";
  import {
    ViewState,
    EditingState,
    IntegratedEditing,
  } from "@devexpress/dx-react-scheduler";
  import {
    Scheduler,
    Appointments,
    AppointmentForm,
    AppointmentTooltip,
    WeekView,
    ConfirmationDialog,
    DayView,
    MonthView,
    Toolbar,
    DateNavigator,
    TodayButton,
    ViewSwitcher,
    CurrentTimeIndicator,
  } from "@devexpress/dx-react-scheduler-material-ui";
  import AppointmentsSchedule from "./AppointmentsSchedule";
  import PreLoader from "../PreLoader";
  import { alpha as fade } from "@material-ui/core";
  import { makeStyles } from "@material-ui/core/styles";

  const currentDateVal = new Date(Date.now()).toLocaleString().split(",")[0];

  const Appointment = ({children,style,isShaded,...restProps})=>{
      const classes = useStyles();
      return <Appointments.Appointment className={isShaded ? classes.shadedAppointment:classes.appointment}
      {...restProps}
    >
      {children}
    </Appointments.Appointment>
  }


  const useStyles = makeStyles((theme) => ({
    todayCell: {
      backgroundColor: fade(theme.palette.primary.main, 0.1),
      "&:hover": {
        backgroundColor: fade(theme.palette.primary.main, 0.14),
      },
      "&:focus": {
        backgroundColor: fade(theme.palette.primary.main, 0.16),
      },
    },
    weekendCell: {
      backgroundColor: fade(theme.palette.action.disabledBackground, 0.04),
      "&:hover": {
        backgroundColor: fade(theme.palette.action.disabledBackground, 0.04),
      },
      "&:focus": {
        backgroundColor: fade(theme.palette.action.disabledBackground, 0.04),
      },
    },
    today: {
      backgroundColor: fade(theme.palette.primary.main, 0.16),
    },
    weekend: {
      backgroundColor: fade(theme.palette.action.disabledBackground, 0.06),
    },
    appointment:{
      backgroundColor: "#1ba94c",
      "&:hover":{
        backgroundColor: "#228f46",
      } 
    },
    shadedAppointment:{
      backgroundColor: "#669174",
      "&:hover":{
        backgroundColor: "#228f46",
      }
    },

  }));
  const TimeTableCell = (props) => {
    const classes = useStyles();
    const { startDate } = props;
    const date = new Date(startDate);

    if (date.getDate() === new Date().getDate()) {
      return <WeekView.TimeTableCell {...props} className={classes.todayCell} />;
    }
    if (date.getDay() === 0 || date.getDay() === 6) {
      return (
        <WeekView.TimeTableCell {...props} className={classes.weekendCell} />
      );
    }
    return <WeekView.TimeTableCell {...props} />;
  };
  const DayScaleCell = (props) => {
    const classes = useStyles();
    const { startDate, today } = props;

    if (today) {
      return <WeekView.DayScaleCell {...props} className={classes.today} />;
    }
    if (startDate.getDay() === 0 || startDate.getDay() === 6) {
      return <WeekView.DayScaleCell {...props} className={classes.weekend} />;
    }
    return <WeekView.DayScaleCell {...props} />;
  };


  const CalendarFunc = ({userID}) => {
    const { data, setdata ,handleAddAppointment,handleChangeAppointment,handleDeleteAppointment} = AppointmentsSchedule(userID);

    const [isloading, setIsLoading] = useState(true);
    const [currentDate, setCurrentDate] = useState(currentDateVal);

    useEffect(() => {
      if (data !== null) { 
        setIsLoading(false);
      }
    }, [data]);



    const commitChanges = ({ added, changed, deleted }) => {
      let dataNew = data;
      if (added) { 
        const startingAddedId = uuidv4(JSON.stringify(added));
        dataNew = [...dataNew, {  id: startingAddedId,...added }];
      }
      if (changed) {
        dataNew = dataNew.map((appointment) =>
          changed[appointment.id]
            ? { ...appointment, ...changed[appointment.id] }
            : appointment 
        );
        let oldVal = {};
        for (let key1 in changed){
          
          
          oldVal = data.filter((appointment)=>appointment.id===key1)
          
          
        }
      }
      if (deleted !== undefined) {
        let meetDeleted = dataNew.filter((appointment)=>appointment.id=== deleted)
        dataNew = dataNew.filter((appointment) => appointment.id !== deleted); 
      }
      setdata(dataNew);
      
    };

    return (
      <>
        {isloading ? (
          <>
            <PreLoader />
          </>
        ) : (
          <Paper>
            <Scheduler data={data} 
            height={555}
            >
              <ViewState currentDate={currentDate} />
              <EditingState
                onCommitChanges={commitChanges}
                
              />
              <IntegratedEditing />
              <ViewState
                
                defaultCurrentDate={currentDate}
                defaultCurrentViewName="Week"
              />
              <DayView startDayHour={8} endDayHour={21} />
              <WeekView
                startDayHour={8}
                endDayHour={21}
                timeTableCellComponent={TimeTableCell}
                dayScaleCellComponent={DayScaleCell}
              />
              <MonthView />
              <Toolbar />
              <DateNavigator />
              <TodayButton />
              <ViewSwitcher />
              <ConfirmationDialog />
              <Appointments 
              
              appointmentComponent={Appointment}
               />
              <AppointmentTooltip showOpenButton showCloseButton />
              <AppointmentForm
                
                
              />
              <CurrentTimeIndicator 
                shadePreviousAppointments={true}
                shadePreviousCells={true}
              />
            </Scheduler>
          </Paper>
        )}
      </>
    );
  };

  export default CalendarFunc;

Environment

• devextreme-reactive: 2.7.6
• react: 17.0.2
• browser: chrome for iPad
• material-ui: 4.12.3

[github-actions]

Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.