Showing icon along with my resource data

Question

I wanna show an icon/avatar in my recource along with my resource name or text property of my data.

here is my data:

let initialOwnerData = [

{ OwnerText: "Nancy", Id: 1, OwnerColor: "#ffaa00" },

{ OwnerText: "Steven" , Id: 2, OwnerColor: "#f8a398" },

{ OwnerText: "Michael", Id: 3, OwnerColor: "#7499e1" },

{ OwnerText: "Lucy", Id: 4, OwnerColor: "royalblue" },

];

along with owner text i want to show an icon/avatar/img for each value after the ownerText

//here is complete code since uploading file says its not supported.

import * as React from "react";

import * as ReactDOM from "react-dom";

import ReactDOMServer from 'react-dom/server';

import "../../node_modules/@syncfusion/ej2-icons/styles/material.css";

import img from "../assets/image.png"

import * as Func from "./datasourceUser";

import "../../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";

import {

Week,

Month,

TimelineViews,

TimelineMonth,

Agenda,

ScheduleComponent,

ViewsDirective,

ViewDirective,

ResourcesDirective,

ResourceDirective,

Inject,

EventSettingsModel,

Day,

PopupOpenEventArgs,

} from "@syncfusion/ej2-react-schedule";

import { DepartmentCalendar } from "./DeptSchedular";

import { useEffect, useState } from "react";

interface TargetModalProps {

getUserSchedule: (userSchedule: any, owner?: any) => void;

}

interface OwnerData {

OwnerText: string;

Id: number;

OwnerColor: string;

}

export const Calendar2: React.FC<TargetModalProps> = ({ getUserSchedule }) => {

let initialOwnerData = [

{ OwnerText: "Nancy", Id: 1, OwnerColor: "#ffaa00" },

{ OwnerText: "Steven", Id: 2, OwnerColor: "#f8a398" },

{ OwnerText: "Michael", Id: 3, OwnerColor: "#7499e1" },

{ OwnerText: "Lucy", Id: 4, OwnerColor: "royalblue" },

];

const [events, setEvents] = React.useState(Func.resourceData);

const [showModal, setShowModal] = useState(false);

const [showNestedModal, setShowNestedModal] = useState(false);

const [newOwnerName, setNewOwnerName] = useState("");

const [ownerData, setOwnerData] = useState(initialOwnerData);

const openModal = () => {

setShowModal(true);

};

const openModal2 = () => {

setShowNestedModal(true);

};

const closeModal = () => {

setShowModal(false);

setNewOwnerName("");

};

const closeModal2 = () => {

setShowNestedModal(false);

setNewOwnerName("");

};

const handleAddOwner = () => {

console.log("working");

const nextId = ownerData.length + 1;

const randomColor = "#" + ((Math.random() * 0xffffff) << 0).toString(16);

const newOwner: OwnerData = {

OwnerText: newOwnerName,

Id: nextId,

OwnerColor: randomColor,

};

console.log(newOwner);

setOwnerData([...ownerData, newOwner]);

console.log(initialOwnerData, ownerData);

closeModal2();

};

const addNewSchedule = (scheduleData: any) => {

const { Id, Subject, StartTime, EndTime, ResourceID, Department } =

scheduleData;

const newSchedule = {

Id: events.length + 1,

Subject,

StartTime,

EndTime,

ResourceID,

Department,

};

console.log(newSchedule);

const isDuplicateSubject = events.some(

(event) => event.Subject === newSchedule.Subject

);

if (!isDuplicateSubject) {

const updatedEvents = [...events, newSchedule];

// setEvents(updatedEvents);

console.log(events);

} else {

console.log("Subject value is duplicated. Not updating events array.");

}

// const updatedEvents = [...events, newSchedule];

// setEvents(updatedEvents);

// console.log(events);

};

const onActionBegin=(args:any)=> {

// Create a toolbar instance with the given configuration

// Render the toolbar within the specified container element

console.log(args)

// Event will be triggered for every toolbar click

if (args.requestType === 'toolbarItemRendering') {

const userIconItem = {

align: 'Right',

prefixIcon: 'e-icons e-day avatar-icon',

};

args.items.push(userIconItem);

}

const handleEventRendered = (args: any) => {

const element = args.element.querySelector('.e-resource-text');

// Check if the element exists

if (element) {

// Create an avatar icon HTML string

const avatarIconHTML = '';

// Insert the avatar icon HTML string after the existing content

element.insertAdjacentHTML('afterend', avatarIconHTML);

}

const scheduleData = args.data;

const r = scheduleData.ResourceID;

const owner = ownerData.find((owner) => owner.Id === r);

getUserSchedule(scheduleData, owner);

};

const eventSettings: EventSettingsModel = { dataSource: Func.resourceData };

const group = { resources: ["Owners"] };

return (

<>

<ScheduleComponent

eventRendered={handleEventRendered}

width="100%"

height="550px"

currentView="TimelineWeek"

selectedDate={new Date(2023, 6, 1)}

eventSettings={eventSettings}

group={group}

popupOpen={Func.handlePopupOpen}

actionBegin={onActionBegin}

>

ViewsDirective>

<ResourceDirective

field="ResourceID"

title="Resource Name"

name="Owners"

allowMultiple={true}

dataSource={ownerData}

textField="OwnerText"

idField="Id"

colorField="OwnerColor"

>ResourceDirective>

ResourcesDirective>

ScheduleComponent>

Add User

button>

{showModal && (

<>

<div

className="modal d-block"

style={{ backgroundColor: "rgba(0,0,0,0.5)", textAlign: "center" }}

>

{" "}

<button

className="btn btn-primary mb-3"

onClick={openModal2}

style={{ marginTop: "40px" }}

>

Add User

button>

<button

className="btn btn-primary mb-3"

onClick={closeModal}

style={{ marginTop: "40px", marginLeft: "5px" }}

>

Close

button>

div>

<tr>

<th>Nameth>

<th>Colorth>

tr>

thead>

<tbody>

{ownerData.map((owner) => (

<td>{owner.Id}td>

<td>{owner.OwnerText}td>

<td>

<div

className="rounded-circle"

style={{

width: "20px",

height: "20px",

backgroundColor: owner.OwnerColor,

display: "inline-block",

marginRight: "10px",

}}

>div>

{owner.OwnerColor}

td>

tr>

))}

tbody>

table>

div>

{showNestedModal && (

<div

className="modal d-block"

style={{ backgroundColor: "rgba(0,0,0,0.5)" }}

>

<h5 className="modal-title">Add Ownerh5>

<button

type="button"

className="close"

onClick={closeModal2}

>

button>

div>

<label htmlFor="ownerName">Owner Namelabel>

<input

type="text"

className="form-control"

id="ownerName"

value={newOwnerName}

onChange={(e) => setNewOwnerName(e.target.value)}

/>

div>

<button

type="button"

className="btn btn-secondary"

onClick={closeModal2}

>

Close

button>

<button

type="button"

className="btn btn-primary"

onClick={handleAddOwner}

>

Add

button>

div>

)}

);

};

plz also advice me for some mistakes in code. i know there is additional unusable code here as well.THanks for

helping

Satheesh Kumar Balasubramanian · Answer

Hi Aby,You can use resourceHeaderTemplate to achieve your requirement. We have prepared a sample to add images in resources using the highlighted code snippets.https://stackblitz.com/edit/react-schedule-resource-image-customization?file=index.js,index.csshttps://ej2.syncfusion.com/react/demos/#/material3/schedule/resource-groupinghttps://ej2.syncfusion.com/react/documentation/schedule/resources#simple-resource-header-customization[index.js]:const Group = () => { const resourceData = [ { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' }, { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' }, { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }, ]; const getAirlineImage = (value) => { let airlineName = getAirlineName(value); return airlineName.replace(' ', '-').toLowerCase(); }; const getAirlineName = (value) => { return value.resourceData ? value.resourceData[value.resource.textField] : value.resourceName; }; const getAirlineModel = (value) => { let airlineName = getAirlineName(value); return airlineName === 'Airways 1' ? 'CRJ 700' : airlineName === 'Airways 2' ? 'Airbus A330' : 'ATR 72-600'; }; const getAirlineSeats = (value) => { let airlineName = getAirlineName(value); return airlineName === 'Airways 1' ? 50 : airlineName === 'Airways 2' ? 75 : 100; }; const resourceHeaderTemplate = (props) => { return (

{getAirlineName(props)}

{' '} Model no: {getAirlineModel(props)}

{' '} No.of seats: {getAirlineSeats(props)}

); }; return (

Flight timings between Barcelona and Los Angeles

);};export default Group;[index.css]:.schedule-group.e-schedule .template-wrap .airline-image { width: 30px; margin-top: 15px; background-repeat: no-repeat;}.schedule-group.e-schedule .template-wrap .airline-image.airways-1 { background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/airways-1.svg');}.schedule-group.e-schedule .template-wrap .airline-image.airways-2 { background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/airways-2.svg');}.schedule-group.e-schedule .template-wrap .airline-image.airways-3 { background-image: url('https://ej2.syncfusion.com/react/demos/src/schedule/images/airways-3.svg');}Regards,Satheesh Kumar B