I have a self-scheduling calendar component using React and react-scheduler that takes a user input for the hours they’d like to start and finish work.

I’ve got the initial day to work but each subsequent day seems to just stack all tasks on {startHour} and not increment them anymore.

I tried using the task (nodes in this case) index to keep a track of the tasks and increment them by 1 hour but that resulted in not being able to reset back to {startHour} between days.

import { Scheduler } from "@aldabil/react-scheduler";
import React, { useEffect, useState } from "react";
import CalenderModeDialog from "../CalendarModeDialog/CalenderModeDialog";

interface Props {
  events: Event[];
}

interface Nodes {
  node: Node[];
}

interface Event {
  id: string;
  title: string;
  start: Date;
  end: Date;
}

interface Node {
  id: string;
  title: string;
}

function CalendarMode({ nodes }) {
  const [nodesData, setNodesData] = useState([]);
  const [startHour, setStartHour] = useState(null); // State variable for start hour selection
  const [endHour, setEndHour] = useState(null); // State variable for end hour selection

  const handleTimeSelection = (startHour, endHour) => {
    let startDateTime = new Date(`2024-05-28T${startHour}:00.000`);
    const endDateTime = new Date(`2024-05-28T${endHour}:00.000`);
    let cumulativeTime = 0;
    const updatedNodesData = nodes.map((node) => {
      console.log(cumulativeTime);
      let taskStart = new Date(startDateTime.getTime() + cumulativeTime);
      let taskEnd = new Date(taskStart.getTime() + 60 * 60 * 1000);

      if (taskEnd > endDateTime) {
        startDateTime = new Date(`2024-05-29T${startHour}:00.000`);
        cumulativeTime = 0;
        taskStart = new Date(startDateTime.getTime() + cumulativeTime);
        taskEnd = new Date(taskStart.getTime() + 60 * 60 * 1000);
      }

      cumulativeTime += 60 * 60 * 1000;

      return {
        id: node.id,
        title: node.title,
        color: node.color,
        start: taskStart,
        end: taskEnd,
      };
    });
    setNodesData(updatedNodesData);
  };

  console.log(nodesData);
  console.log(startHour);
  console.log(endHour);

  return (
    <>
      <CalenderModeDialog onTimeSelection={handleTimeSelection} />
      <Scheduler
        day={{
          startHour: 1,
          endHour: 24,
          step: 60,
          navigation: true,
        }}
        week={{
          weekDays: [0, 1, 2, 3, 4, 5, 6],
          weekStartOn: 6,
          startHour: 1,
          endHour: 24,
          step: 60,
          navigation: true,
          disableGoToDay: false,
        }}
        events={nodesData}
      />
    </>
  );
}

export default CalendarMode;