small colored symbols?

[R.alf]

Good day,

we would like to switch our planning boards from another product to the Bryntum Scheduler.
An important feature was the display of colored small symbols at the beginning and / or end of the bars. This allows the user to see some important information at a glance. A yellow triangle at the end means, for example, that there are hints and he has to look at the tooltip, a red cross at the beginning means that processing cannot yet begin, etc.
Can this be solved with the Bryntum Scheduler? I am looking at the examples but have not found something like this.

Ralf

[mats]

Better to ask in the Scheduler forums, moved the thread there.

Yes it's easy, please see https://www.bryntum.com/examples/scheduler/customeventstyling/

eventRenderer({ eventRecord, resourceRecord, renderData }) {
        let startEndMarkers = '';

    // Add a custom CSS classes to the template element data by setting a property name
    renderData.cls.milestone          = eventRecord.isMilestone;
    renderData.cls.normalEvent        = !eventRecord.isMilestone;
    renderData.cls[resourceRecord.id] = 1;

    if (eventRecord.startInfo) {
        startEndMarkers = `<i class="b-start-marker ${eventRecord.startInfoIcon}" data-btip="${eventRecord.startInfo}"></i>`;
    }
    if (eventRecord.endInfo) {
        startEndMarkers += `<i class="b-end-marker ${eventRecord.endInfoIcon}" data-btip="${eventRecord.endInfo}"></i>`;
    }

    return startEndMarkers + StringHelper.encodeHtml(eventRecord.name);
}

Data:

{
                "id"            : "e22",
                "resourceId"    : "r2",
                "name"          : "Attend software conference",
                "startDate"     : "2017-06-03",
                "endDate"       : "2017-06-08",
                "endInfo"       : "Save collected business cards",
                "endInfoIcon"   : "b-fa b-fa-square",
                "startInfo"     : "Bring suitcase with money",
                "startInfoIcon" : "b-fa b-fa-info-circle"
            },