Custom UI elements for every individual day in week & day views

[usersina]

Clear and concise description of the problem

I want to add custom actions for every individual day for all calendar views.

I successfully managed to do it for the month view using the dateHeader wrapper as follows (here's a sandbox example)

month: {
  dateHeader: ({ label, isOffRange, date, onDrillDown }) => (
    <>
      <button type="button" className="rbc-button-link" onClick={onDrillDown}>
        {label}
      </button>
      <Tooltip title={"Click for action"}>
        <div onClick={() => console.log(date)} />
      </Tooltip>
    </>
  ),
},

However, the option does not exist for week and day views. The best I could do for the week view is using the header as follows

week: {
  header: ({ date }) => (
    <div className="flex h-full justify-center">
      <Tooltip title={"Add availability"} disableInteractive>
        <div
          className="mr-2 h-4 w-4 cursor-pointer rounded-sm border-2 border-solid border-zinc-500 bg-transparent"
          onClick={() => console.log("Adding availability to", date)}
        />
      </Tooltip>
      <span>{moment(date).format("DD MMM")}</span>
    </div>
  ),
},

But this is far from ideal since I have the button click navigating to the specific day view. Additionally, I cannot update the header height since it's controlled by the parent.

I did not find a way to use it for the day view so far.

Suggested solution

Maybe adding a dateHeader to both week and day components would be a good approach.

Alternative

No response

Additional context

No response

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR