how can i provide minimun fixedwidth for date so that i can mention another values with date also like count for that date etc

[premiumash25Aug]

        <DateHeader unit="any" labelFormat= "MMMM" intervalRenderer={intervalRenderer} headerData={{ isMonth: true, currenDate: new Date()

i am using above to get count but i am unable to change size of that componenet as its overflowing const intervalRenderer = ({ intervalContext, getIntervalProps, data, ...rest }) => { const { interval } = intervalContext; const { startTime, endTime } = interval; const count = bookedCountPerDay(startTime);

return (
  <div
    {...getIntervalProps()}
    className={`rct-dateHeader ${data.isMonth ? "rct-dateHeader-primary" : ""

      }`}

    onClick={() => {
      return false;
    }}
  >
    <span
      style={{
        position: data.isMonth ? "sticky" : "static",
        marginRight: data.isMonth ? "auto" : "inherit",
        left: 10,
        padding: "0 5px",
        fontWeight: "bold",
        width: "100%",
        height: "100%",
        display: "flex",

        color: data.isMonth ? "white" : "black",
      }}
    >
      {count} "This is count"
    </span>
  </div>
);

};

[premiumash25Aug]

resolved via css but item renderer put <DateHeader height={100} intervalRenderer={intervalRenderer} unit="day" labelFormat="DD" headerData={{ currentUnit: currentUnit, visibleTimeStart: visibleTimeStart, visibleTimeEnd: visibleTimeEnd }} /> const intervalRenderer = useIntervalRendererMemo( ({ getIntervalProps, intervalContext, data }) => { const { interval } = intervalContext; const { startTime } = interval; let countItem = cardCountList.find(item => item.date === moment(startTime).format("YYYY-MM-DD")); if (!countItem) { return; } else { const containerStyle = { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", }; const intervalStyle = { backgroundColor: countItem ? "aqua" : "black", };

    return (
      <div {...getIntervalProps()} style={intervalStyle} id={countItem ? "countItem" : "noCountItem"} className="booking-card" >
        <div style={containerStyle}>
          <div style={{ marginRight: "auto" }}>
            <strong>{moment(startTime).format("ddd D-MMM")}</strong>
            <label style={{ display: "block" }}>
              Booked : {countItem ? countItem.count : 0}
            </label>
            <label style={{ display: "block" }}>
              Wait List : 0
            </label>
          </div>
        </div>
      </div>
    );
  }
},
[cardCountList]

); but it puts extra memory pressure on ui