Icon not displaying in react schedule component in toolbar

[Ab Y]

trying to add an icon in react schedule component in header tool bar.Have spent more than 5 hrs still it is not displayed. i have add cdn package etcs and read docs
i am doing on schedule component on actionbegin prop
Do i have to add class with unicode in it.if so how??

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-medium e-cut',

      };

      args.items.push(userIconItem);

    }

  }

[Satheesh Kumar Balasubramanian]

Hi Aby,

You can display icon on react scheduler component in toolbar using the highlighted code snippets.

https://stackblitz.com/edit/react-schedule-toolbar-display-icon?file=index.js

https://ej2.syncfusion.com/react/documentation/appearance/icons

[index.js]:

const HeaderBar = () => {

  useEffect(() => {

    updateSampleSection();

  }, []);

  let scheduleObj = useRef(null);

  let profilePopup;

  const data = extend([], dataSource.employeeEventData, null, true);

  const onActionBegin = (args) => {

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

      let userIconItem = {

        align: 'Right',

        prefixIcon: 'e-icons e-medium e-cut,

        text: 'Cut',

      };

      args.items.push(userIconItem);

    }

  };

  const onActionComplete = (args) => {};

  const onEventRendered = (args) => {

    applyCategoryColor(args, scheduleObj.current.currentView);

  };

  const onChange = (args) => {

    profilePopup.hide();

    scheduleObj.current.showHeaderBar = args.checked;

    scheduleObj.current.dataBind();

  };

  return (

    <div className="schedule-control-section">

      <div className="col-lg-9 control-section">

        <div className="control-wrapper">

          <ScheduleComponent

            cssClass="schedule-header-bar"

            width="100%"

            height="650px"

            id="schedule"

            ref={scheduleObj}

            selectedDate={new Date(2021, 1, 15)}

            eventSettings={{ dataSource: data }}

            actionBegin={onActionBegin}

            actionComplete={onActionComplete}

            eventRendered={onEventRendered}

          >

            <ViewsDirective>

              <ViewDirective option="Month" />

            </ViewsDirective>

            <Inject services={[Month, Resize, DragAndDrop]} />

          </ScheduleComponent>

        </div>

      </div>

      <div className="col-lg-3 property-section">

        <PropertyPane title="Properties">

          <table

            id="property"

            title="Properties"

            className="property-panel-table"

            style={{ width: '100%' }}

          >

            <tbody>

              <tr style={{ height: '50px' }}>

                <td style={{ width: '90%' }}>

                  <div className="headerbar">

                    <CheckBoxComponent

                      id="headerbar"

                      checked={true}

                      label="Show/Hide Header bar"

                      change={onChange}

                    ></CheckBoxComponent>

                  </div>

                </td>

              </tr>

            </tbody>

          </table>

        </PropertyPane>

      </div>

    </div>

  );

};

export default HeaderBar;

Regards,

Satheesh Kumar B

[Ab Y]

Apologies for confusion caused.The code you provided is displaying icon on header tool bar. But 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

l

//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>

<ViewDirective option="Day" />

<ViewDirective option="TimelineWeek" />

<ViewDirective option="TimelineMonth" />

ViewsDirective>

<ResourcesDirective>

<ResourceDirective

field="ResourceID"

title="Resource Name"

name="Owners"

allowMultiple={true}

dataSource={ownerData}

textField="OwnerText"

idField="Id"

colorField="OwnerColor"

>ResourceDirective>

ResourcesDirective>

<Inject services={[Day, TimelineViews, TimelineMonth]} />

ScheduleComponent>

<button className="btn btn-primary mb-3" onClick={openModal}>

Add User

button>

{showModal && (

<>

<div

className="modal d-block"

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

>

<div style={{ backgroundColor: "white", height: "20%" }}>

{" "}

<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>

<table className="table table-bordered">

<thead className="thead-dark">

<tr>

<th>Idth>

<th>Nameth>

<th>Colorth>

tr>

thead>

<tbody>

{ownerData.map((owner) => (

<tr key={owner.Id}>

<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)" }}

>

<div className="modal-dialog">

<div className="modal-content">

<div className="modal-header">

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

<button

type="button"

className="close"

onClick={closeModal2}

>

<span aria-hidden="true">×span>

button>

div>

<div className="modal-body">

<div className="form-group">

<label htmlFor="ownerName">Owner Namelabel>

<input

type="text"

className="form-control"

id="ownerName"

value={newOwnerName}

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

/>

div>

div>

<div className="modal-footer">

<button

type="button"

className="btn btn-secondary"

onClick={closeModal2}

>

Close

button>

<button

type="button"

className="btn btn-primary"

onClick={handleAddOwner}

>

Add

button>

div>

div>

div>

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]

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.css

https://ej2.syncfusion.com/react/demos/#/material3/schedule/resource-grouping

https://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 (

      <div className="template-wrap">

        <div className={'airline-image ' + getAirlineImage(props)}></div>

        <div className="airline-details">

          <div className="airline-name">{getAirlineName(props)}</div>

          <div className="airline-model">

            {' '}

            Model no: {getAirlineModel(props)}

          </div>

          <div className="airline-seats">

            {' '}

            No.of seats: {getAirlineSeats(props)}

          </div>

        </div>

      </div>

    );

  };

  return (

    <div className="schedule-control-section">

      <div className="col-lg-12 control-section">

        <div className="control-wrapper">

          <div className="schedule-demo-heading">

            Flight timings between Barcelona and Los Angeles

          </div>

          <ScheduleComponent

            cssClass="schedule-group"

            width="100%"

            height="650px"

            currentView="TimelineWeek"

            selectedDate={new Date(2021, 3, 6)}

            eventSettings={{

              dataSource: generateEvents(),

              fields: {

                subject: { title: 'Travel Summary', name: 'Subject' },

                location: { title: 'Source', name: 'Location' },

                description: { title: 'Comments', name: 'Description' },

                startTime: { title: 'Departure Time', name: 'StartTime' },

                endTime: { title: 'Arrival Time', name: 'EndTime' },

              },

            }}

            group={{ resources: ['Airlines'] }}

            resourceHeaderTemplate={resourceHeaderTemplate}

          >

            <ResourcesDirective>

              <ResourceDirective

                field="AirlineId"

                title="Airline Name"

                name="Airlines"

                allowMultiple={true}

                dataSource={resourceData}

                textField="AirlineName"

                idField="AirlineId"

                colorField="AirlineColor"

              />

            </ResourcesDirective>

            <ViewsDirective>

              <ViewDirective option="Day" />

              <ViewDirective option="TimelineWeek" />

              <ViewDirective option="TimelineMonth" />

            </ViewsDirective>

            <Inject services={[Day, TimelineViews, TimelineMonth]} />

          </ScheduleComponent>

        </div>

      </div>

    </div>

  );

};

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