insert component between weekly DIV's

[trig79]

Hey
I have the following calendar configured, it renders the timeslots when the user selects a calendar day.

However, the client has requested to have the 'timeslots appear below the week they select like so:

Is there anything within this package that could support this idea?

I was thinking perhaps react portal might be the way to go, but I'm struggling to get that to work at the moment.

any ideas welcome

thanks

[tjfred35]

You can do it with the v8 version like this:

  const [selected, setSelected] = React.useState<Date>();

  const CustomRow = (props: RowProps) => {
    return (
      <>
        <Row {...props} />
        {selected && props.weekNumber === getWeek(selected) && (
          <tr>
            <td colSpan={7}>
              <div
                style={{
                  padding: "16px 8px",
                  display: "flex",
                  justifyContent: "center",
                  margin: "4px 2px",
                  border: "1px solid blue",
                  borderRadius: "4px"
                }}
              >
                You selected me!
              </div>
            </td>
          </tr>
        )}
      </>
    );
  };

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      components={{
        Row: CustomRow
      }}
    />
  );

https://codesandbox.io/s/sandpack-project-forked-9ltwx?file=/src/App.tsx:160-1020

[trig79]

Hey, I had a play around with the new version and as you suggest it defo looks like this will work.
many thanks for taking the time to write such a comprehensive reply, I really do appreciate it.

[tjfred35]

No problem!