Assistance with Travel Time Calculation for Calendar Events

Hi 

I’m currently working on implementing a feature to calculate and display travel time between appointments in a calendar view similar to the attached image.

I’ve written some initial code, but it feels more like a workaround than a robust solution. Here’s what I have so far:

const onEventRendered = useCallback(
  (props) => {
    const el = createRoot(props.element);
    el.render(
      <Event
        interval={timeScale.interval}
        slotCount={timeScale.slotCount}
        {...props.data}
      />
    );
  },
  [timeScale.interval, timeScale.slotCount]
);


const Event = ({ TravelStart, StartTime, EndTime, Subject }) => {
  const eventDuration = moment
    .duration(moment(EndTime).diff(StartTime))
    .hours();


  // TODO: calculation width based on travel time and interval/slot count


  return (
    <Stack
      direction={"row"}
      justifyContent={"space-between"}
      sx={{
        width: "100%",
      }}
    >
      <Box sx={{ width: 300 }}> // TODO: calculation width

        <Typography
          fontSize={10}
          textAlign={"center"}
          color={"textSecondary"}
          sx={{
            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
            height: "auto",
            width: "100%",
            position: "relative",
            top: "20%",
          }}
        >
          {TravelStart}min
        </Typography>
      </Box>


      <Stack
        sx={{
          flexGrow: 1,
          bgcolor: "info.main",
        }}
      >
          {Subject} / {eventDuration} hours
      </Stack>
    </Stack>
  );
};

The code renders travel time as part of the event component, but I am struggling with dynamically calculating the width for the travel block based on the time scale and interval/slot count. This is essential to maintain accuracy in the UI, especially when there are overlapping events.

Could you suggest a better approach or best practices to handle this type of feature? Any advice on how to align travel time blocks with the time grid would be greatly appreciated!

Thanks in advance for your help.

Best regards,