Changing event marker's label color in Gantt Chart

[desmond]

How can I add a color attribute to the GanttEventMarker class? I want to programatically change the color of each event marker label based on a marker list. In GanttEventMarker class, the CssClass attribute only changes the appearance of the dotted line, not the label.

I am not sure about how the list should look like, but this is one:

List<GanntEventMarker> Markers= new List<GanttEventMarker>() {
new GanttEventMarker() {Day=new DateTime(2023,03,05), Label="Research phase", CssClass="UseThisToChangeColor", Color="OrAddThisColorAttribute"},
​new GanttEventMarker() {Day=new DateTime(2023,04,05), Label="Another phase", CssClass="UseThisToChangeColor", Color="OrAddThisColorAttribute"}
}
 Copy

Of course, hard-coding multiple css classes can create several event marker labels with different colors:

    .e-event-markers.e-span-label {
        background-color: #f3e5f5!important; /* Set event marker label background color */
        color: #6a1b9a!important; /* Set event marker label text color */
    }
 Copy

[Ajithkumar Gopalakrishnan]

Hi Desmond,

Greetings from Syncfusion Support,

We need to clarify the behavior of the Gantt chart. The GanttEventMarker class in the Gantt chart does not have built-in Color property. Instead, we provide the CssClass property, which allows you to apply a custom CSS class to the event marker. Using this class, you can customize the line and label styles.

To customize the event marker label, you can append a class and modify as per your requirement. We have attached a code snippet and sample for reference.

<SfGantt EventMarkers="ganttEventMarkers">

    …

   

</SfGantt>

private List<GanttEventMarker> ganttEventMarkers = new List<GanttEventMarker>()

{

    new GanttEventMarker { Day = new DateTime(2021, 04, 09), Label = "Research phase", CssClass = "e-custom-event-marker" },

    …   
};

<style>

   

    .e-gantt .e-gantt-chart .e-custom-event-marker {

        width: 1px;

        border-left: 2px red dotted;

    }

 

    .e-gantt .e-gantt-chart .e-custom-event-marker .e-span-label {

        background-color: #f3e5f5 !important; /* Set event marker label background color */

        color: #6a1b9a !important; /* Set event marker label text color */

    }

 

    .e-gantt .e-gantt-chart .e-custom-event-marker .e-gantt-right-arrow {

            border-right-color: #f3e5f5;

            border-left-color: #f3e5f5 !important;

    }

</style>

Sample link: https://blazorplayground.syncfusion.com/embed/hXhyDrZnVMcLVykz?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

For more information, you may refer to the following link:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEventMarker.html#properties

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[desmond]

Thanks for the example of changing the color, but is there something other than the built-in CssClass method to customize the appearance, such as using JavaScript? Or, more directly, assume you have a list with the attributes named day, label, color and font, how can I dynamically create a css class for each list element, and then feed the event markers to the gantt by creating a list with the attributes named day, label and cssclass?

[Ajithkumar Gopalakrishnan]

Hi Desmond,

To achieve your requirement, we suggest using JavaScript interop in Blazor. When the Gantt chart is initially loaded, the Created event triggers a JavaScript interop call for customization, updating the color, font, and label. These attributes can also be dynamically updated when the button is clicked. Below, we have provided a code snippet and a sample for reference.

<SfButton @onclick="ChangeEventMarkers">Event marker change</SfButton>

<SfGantt @ref="Gantt" ID="Event">

   

    <GanttEventMarkers>

        @foreach (var marker in ganttEventMarkers)

        {

            <GanttEventMarker Day="@marker.Day" Label="@marker.Label"></GanttEventMarker>

        }

    </GanttEventMarkers>

    <GanttEvents TValue="TaskData" Created="CreatedHandler"></GanttEvents>

</SfGantt>

private List<EventMarker> ganttEventMarkers = new List<EventMarker>()

{

    new EventMarker { Day = new DateTime(2021, 04, 09), Label = "Research phase", Color = "red", Font = "Times New Roman" },

    new EventMarker { Day = new DateTime(2021, 04, 30), Label = "Design phase", Color = "red", Font = "Times New Roman" },

    new EventMarker { Day = new DateTime(2021, 05, 22), Label = "Production phase", Color = "yellow", Font = "Roboto" },

    new EventMarker { Day = new DateTime(2021, 06, 19), Label = "Sales and marketing phase", Color = "yellow", Font = "Roboto" }

};

public async Task CreatedHandler(object args)

{

    // Ensure proper JSON serialization

    var markersJson = JsonSerializer.Serialize(ganttEventMarkers);

    Console.WriteLine("Serialized JSON: " + markersJson);

    await JSRuntime.InvokeVoidAsync("updateEventMarkers", markersJson);

}

private async Task ChangeEventMarkers()

{

    var markersJson = JsonSerializer.Serialize(ganttEventMarkers);

    Console.WriteLine("Serialized JSON: " + markersJson);

    await JSRuntime.InvokeVoidAsync("updateEventMarkers", markersJson);

}

<script>

    function updateEventMarkers(markersJson) {

           

        let markers = JSON.parse(markersJson);

          

        const eventMarkers = document.querySelectorAll(".e-event-markers");

           

        eventMarkers.forEach((marker, index) => {

            if (markers[index]) {

                marker.style.borderLeftColor = markers[index].Color || "black";

                if (marker.children.length > 0) {

                    marker.children[0].style.fontFamily = markers[index].Font || "Arial";

                }

            }

        });

    }

</script>

Sample link attached as zip file.

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

Attachment: TaskbarEdit_f2d26228.zip