I am using Syncfusion React.
When I add the resourceHeaderTemplate for styling my resource headers, I encounter an issue. Specifically, when I double-click on a cell, I do not receive all the expected props, such as startTime, groupIndex, etc.
However, if I remove the resourceHeaderTemplate, everything works perfectly.
Here is my code for the resourceHeaderTemplate:
const resourceHeaderTemplate = (props: any) => {
// Find the groomer data
const groomer = groomerData.find((g: any) => g.id === props.resourceData.id);
// Get the profile image (fetch if necessary)
const profilePic = groomer?.profilePic
? `data:image/png;base64,${groomer.profilePic}`
: ""; // Fallback avatar
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
backgroundColor: groomer?.calendar_color || "#f0f0f0",
padding: "2px",
borderRadius: "2px",
width: "100%",
}}
>
{/* Avatar */}
<CustomAvatar name={groomer.text} size={"44"} src={profilePic} />
{/* Name */}
<span
style={{
fontSize: "15px",
fontWeight: "500",
color: getContrastTextColor(groomer?.calendar_color || "#f0f0f0")
}}
>
{props.resourceData.text}
</span>
</div>
);
};
