How to Group and Color-Code Appointments using Blazor Scheduler?

This article explains how to group your appointments by worker and color-code them by type in a timeline view using Syncfusion's Scheduler component. To achieve this, you can utilize the EventRendered event. This event is triggered each time an appointment is rendered, allowing for customization based on the appointment's properties.

<SfSchedule TValue="AppointmentData" Height="550px" @bind-SelectedDate="@CurrentDate">
    <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents>
    <ScheduleGroup Resources="@Resources"></ScheduleGroup>
    <ScheduleResources>
        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@WorkersData" Field="WorkerId" Title="Owner" Name="Workers" TextField="WorkerText" IdField="Id" AllowMultiple="true" ColorField="TypeColor"></ScheduleResource>
    </ScheduleResources>
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.TimelineDay"></ScheduleView>
        <ScheduleView Option="View.TimelineWeek"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

public void OnEventRendered(EventRenderedArgs<AppointmentData> args)
{
    string color = GetTypeColor(args.Data.TypeId);
    Dictionary<string, object> attributes = new Dictionary<string, object>();
    attributes.Add("style", $"background-color: {color}");
    args.Attributes = attributes;
}
public string GetTypeColor(int typeId)
{
    string color = "";
    foreach (var item in TypeData)
    {
        if (item.Id == typeId)
        {
            color = item.TypeColor;
        }
    }
    return color;
}