[REACT] Use Icon inside of Diamond shaped Task

[yklein]

Hello,

I am trying to add an icon inside of our diamond shaped tasks to signify a couple different things but as soon as I add this code to my taskRenderer the diamonds get all messed up in the UI.

For example:

Screen Shot 2022-01-12 at 3.35.16 PM.png (14.07 KiB) Viewed 632 times

Is there any way that I can inject icons into the diamond shaped tasks?

Thanks for the help!

[alex.l]

Hi yklein,

All you need is provide iconCls in your event record record.
https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/model/EventModel#field-iconCls

CSS class specifying an icon to apply to the rendered time span element. Note: In case event is a milestone, using iconCls with dependency feature might slightly decrease performance because feature will refer to the DOM to get exact size of the element.

Take a look on this example https://bryntum.com/examples/scheduler-pro/dependencies/
Try to edit an event to have 0 duration and see an icon instead of milestone "diamond".

[yklein]

Hi Alex,

I think you misunderstood (or maybe I did). We want to keep the diamond milestone but place an icon inside of it

UPDATE - I confirmed on the demo you linked this is NOT the functionality I am talking about. I want the diamond shape to render but with an icon inside of it

[alex.l]

Ok, got it, thanks!
That's not supported. I checked our source code and it cannot be easily reached, I've created a feature request to add this functionality https://github.com/bryntum/support/issues/4018

[yklein]

Hi Alex,

I saw one of the demos in the Scheduler section had a Diamond with text in it (an Order size or something). Is this something we can easily achieve on the Gantt side? I tried to output it in my taskrenderer just like in the demo but it didn't work properly either, it added a square around the task and the inner text was positioned above the square and below the diamond from a z-index perspective so it looked terrible.

Is there anything we can do to get even a single letter inside of a diamond on the Gantt side?

[Maxim Gorkovsky]

Hello.
You can try adding a new pseudo element and style it. I added :after element with this style:

.b-gantt-task-wrap.b-milestone-wrap .b-gantt-task:not(.b-gantt-task-withicon) .b-gantt-task-content::after {
    content: "F";
    color: black;
    height: 0.707107em;
    width: 0.707107em;
    position: absolute;
}

it needs a bit more styling to it, but you can manage. Changing content property and font family to font awesome you can even try embedding an icon.