Resource Color in grouped timeline view

[Alexander Kuhlmann]

Hey there, 

I have appointments with two resources:
Category(only one per appointment) and Owner(multiple per appointment)
The Category resource defines a Color and the scheduler is configured to use this as Color for the appointments.
In the normal view this works fine, even in the timelineview if no grouping is active.
but if I activate grouping by the owner in the timeline view, then all shown events became the default color and the defines color by the category resource is ignored.

 

<SfSchedule TValue="SAppointment" Timezone="Europe/Berlin" EnableAutoRowHeight="true" @ref="Scheduler" Height="calc(100vh - 4.6rem)">

    <ScheduleEventSettings DataSource="Appointments" ResourceColorField="Category" SpannedEventPlacement="SpannedEventPlacement.TimeSlot"></ScheduleEventSettings>

    <ScheduleEvents TValue="SAppointment" Navigating="OnNavigating" Created="InitialLoad" Resized="Resized"></ScheduleEvents>

    <ScheduleResources>

        <ScheduleResource Name="Category" TItem="SCategory" TValue="int" DataSource="@Categories" Field="CategoryID" Title="Kategorie" TextField="Name" IdField="Id" ColorField="BGColor"></ScheduleResource>

        <ScheduleResource Name="Owner" TItem="SOwner" TValue="int[]" DataSource="@Owners" Field="OwnerIds" Title="Beteiligte" TextField="Name" IdField="Id" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

    <ScheduleGroup AllowGroupEdit="true" Resources="@GroupingResources"></ScheduleGroup>

    <ScheduleViews>

        <ScheduleView Option="View.Day"></ScheduleView>

        <ScheduleView Option="View.Week"></ScheduleView>

        <ScheduleView Option="View.Month"></ScheduleView>

        <ScheduleView Option="View.TimelineDay"></ScheduleView>

        <ScheduleView Option="View.TimelineWeek"></ScheduleView>

        <ScheduleView Option="View.TimelineMonth"></ScheduleView>

    </ScheduleViews>

</SfSchedule>

[Vijayakumar Rajasekar]

Hi Alexander Kuhlmann,

 

Thank you for reaching out to us with your query regarding resource colors in the grouped timeline view of the Scheduler component.

 

We understand the issue you're experiencing: the appointment colors display correctly in normal and timeline views without grouping, but when you activate grouping by Owner in the timeline view, the appointments revert to the default color instead of using the Category resource color.

 

Here's what's happening:

 

The behavior you're observing is due to how the ResourceColorField property works with grouped resources in the Scheduler. When grouping is active, the Scheduler applies colors based on which resources are included in the grouping configuration.

 

In your configuration, you have:

 

<ScheduleEventSettings ResourceColorField="Category" ... />

 

However, when you group by Owner, the Category resource needs to be included in your ScheduleGroup resources for its colors to be applied.

 

Solution:

 

To maintain the Category colors while grouping by Owner, please update your GroupingResources array to include both resources:

 

public string[] GroupingResources { get; set; } = { "Category", "Owner" };

 

This will group your appointments by both Category and Owner, preserving the color scheme defined by your Category resource.

 

Alternative Approach:

 

If you prefer to group only by Owner but still want custom colors, you can add a ColorField property to your Owner resource:

 

<ScheduleResource Name="Owner"

                  TItem="SOwner"

                  TValue="int[]"

                  DataSource="@Owners"

                  Field="OwnerIds"

                  Title="Beteiligte"

                  TextField="Name"

                  IdField="Id"

                  ColorField="OwnerColor"  <!-- Add this -->

                  AllowMultiple="true">

</ScheduleResource>

 

Key Point:

 

The resource specified in ResourceColorField must be present in the grouped resources array for its colors to be applied. If it's not included in the grouping, the Scheduler will use the color from the grouped resource instead, or fall back to the default color if no ColorField is defined.

Please find the sample for your reference: https://blazorplayground.syncfusion.com/rNVxNxCxhCMhKeCG

 

We hope this resolves the issue you're experiencing. Please let us know if you need further clarification or assistance with implementing this solution. We're here to help!

Regards,

Vijayakumar R

[Alexander Kuhlmann]

Hi  Vijayakumar R,

thank you for your answer.

If I add the category to the GroupingResources, this will add an extra row for each category, this would blow up my view very much and is not what I want. I need to have a row for each owner and inside this row all appointments for this owner, but each appointment needs to be colored corresponding to its individual category.

Is there any way to achieve this? If this is not possible with features of the component maybe I can set the color dynamically on my own?

Beat,

Alex

[Vijayakumar Rajasekar]

Hi Alexander Kuhlmann,

 

Thank you for clarifying your requirement. We understand that adding Category to the GroupingResources creates additional hierarchical rows, which is not what you need for your use case.

 

Your Requirement:

You need to group the Scheduler by Owner only (single-level grouping) while having each appointment colored according to its individual Category resource - without creating extra Category rows in the view.

 

this can be achieved by dynamically setting the appointment colors using the EventRendered event. This approach allows you to:

 

• Maintain single-level grouping by Owner only
• Apply Category-based colors to individual appointments programmatically
• Avoid the extra rows that hierarchical grouping would create

 

How It Works:

 

The EventRendered event fires before each appointment is rendered in the Scheduler. In this event handler, you can:

 

• Access the appointment data (including Category/Room information)
• Look up the corresponding color from your resource data
• Apply the color dynamically using the args.Attributes collection

 

Implementation:

 

public void OnEventRendered(EventRenderedArgs<AppointmentData> args)

{

    if (args?.Data == null) return; // Safety check

 

    // If RoomId is 0 (when creating appointments via quick popup),

    // automatically assign it from Owner's GroupId

    if (args.Data.RoomId == 0 && args.Data.OwnerId > 0)

    {

        var owner = OwnersData.FirstOrDefault(o => o.Id == args.Data.OwnerId);

        if (owner != null)

        {

            args.Data.RoomId = owner.OwnerGroupId;

        }

    }

 

    // Get the Room/Category color

    int categoryId = args.Data.RoomId;

    var room = RoomData.FirstOrDefault(c => c.Id == categoryId);

 

    if (room != null)

    {

        // Initialize Attributes dictionary if null

        args.Attributes ??= new Dictionary<string, object>();

       

        // Apply the background color

        args.Attributes["style"] = $"background-color: {room.RoomColor};";

    }

}

 

We have prepared a complete working sample demonstrating this solution in the Blazor Playground:

 

https://blazorplayground.syncfusion.com/rZrdNHswiQWiNZeo

 

This approach gives you the flexibility to customize the appointment colors based on any logic you need, while maintaining the clean single-level grouping structure you require.

 

Please review the sample and let us know if this meets your requirements or if you need any further customization.

Regards,

Vijayakumar R