Change Row colour for a resource in Timeline view

[Steve]

Hi team,

I am creating an app that gives us an overview of our workers (these are the resources in the scheduler) and their daily appointments.

In the model I am using for the workers, I have a Boolean field for if the worker (resource) is available for a particular date.

Is here a way to change the background colour of the entire row in schedule view based on the Boolean value in the worker model? E.g., if a worker is marked as not available, the row for that worker is displayed in red, otherwise it uses the default colour.

[Ashokkumar Karuppasamy]

Hi Steve,

You can achieve your requirements by customizing the styles to meet your needs. The attached code snippet and sample are provided for your reference. Please try the solution and let us know if you require any further assistance.

Sample: https://blazorplayground.syncfusion.com/BXBptAhWdruXIqOY

@using Syncfusion.Blazor.Schedule

 

<SfSchedule TValue="AppointmentData" CssClass="custom-schedule" Height="550px" @bind-SelectedDate="@CurrentDate">

    <ScheduleGroup Resources="@Resources"></ScheduleGroup>

    <ScheduleResources>

        <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@RoomData" Field="RoomId" Title="Room" Name="Rooms" TextField="RoomText" IdField="Id" ColorField="RoomColor" AllowMultiple="false"></ScheduleResource>

        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" GroupIDField="OwnerGroupId" ColorField="OwnerColor" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    <ScheduleViews>

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

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

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

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

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

    </ScheduleViews>

</SfSchedule>

@code {

    DateTime CurrentDate = new DateTime(2023, 6, 1);

    public string[] Resources { get; set; } = { "Rooms", "Owners" };

    public List<ResourceData> RoomData { get; set; } = new List<ResourceData>

    {

        new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" },

        new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" }

    };

    public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>

    {

        new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00" },

        new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398" },

        new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1" }

    };

    List<AppointmentData> DataSource = new List<AppointmentData>

     {

        new AppointmentData { Id = 1, Subject = "Not Available", IsBlock = true, StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1, RoomId = 1 }

    };

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public string Location { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public string Description { get; set; }

        public bool IsAllDay { get; set; }

        public string RecurrenceRule { get; set; }

        public string RecurrenceException { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

        public bool IsBlock { get; set; }

        public int OwnerId { get; set; }

        public int RoomId { get; set; }

    }

    public class ResourceData

    {

        public int Id { get; set; }

        public string RoomText { get; set; }

        public string RoomColor { get; set; }

        public string OwnerText { get; set; }

        public string OwnerColor { get; set; }

        public int OwnerGroupId { get; set; }

    }

}

 

<style>

    .custom-schedule.e-schedule .e-appointment-wrapper .e-block-appointment {

         background-color: red;

    }

</style>

 

Regards,

Ashok

[Steve]

Hi Ashok,

Thanks for your reply. I notice in the sample you have this tied to the AppointmentData model.

Does this same technique also apply to the ResourceData model which is what I originally asked about?

Regards

Steve

[Ashokkumar Karuppasamy]

Hi Steve,

We have modified the previously shared sample. You can achieve your requirement of applying color to the ResourceData model using the schedule OnRenderCell event. If you utilize this event, you can customize the row color as per your needs. The attached code snippet and demonstrated solution are provided below. Please try the solution and let us know if you need any further assistance.

Sample: https://blazorplayground.syncfusion.com/BXVzZqhRUWqfDKKs

<SfSchedule TValue="AppointmentData" @ref="ScheduleObj" CssClass="custom-schedule" Height="550px" @bind-SelectedDate="@CurrentDate">

    <ScheduleGroup Resources="@Resources"></ScheduleGroup>

    <ScheduleEvents TValue="AppointmentData" OnRenderCell="OnRenderCell"></ScheduleEvents>

    <ScheduleResources>

        <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@RoomData" Field="RoomId" Title="Room" Name="Rooms" TextField="RoomText" IdField="Id" ColorField="RoomColor" AllowMultiple="false"></ScheduleResource>

        <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" GroupIDField="OwnerGroupId" ColorField="OwnerColor" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    <ScheduleViews>

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

    </ScheduleViews>

</SfSchedule>

@code {

    DateTime CurrentDate = new DateTime(2023, 6, 1);

    SfSchedule<AppointmentData> ScheduleObj;

    public string[] Resources { get; set; } = { "Rooms", "Owners" };

    public string[] CustomClass = { "resource-custom-class" };

    public List<ResourceData> RoomData { get; set; } = new List<ResourceData>

    {

        new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" },

        new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" }

    };

    public void OnRenderCell(RenderCellEventArgs args)

    {

        if (args.ElementType == ElementType.WorkCells)

        {

            var ResourceList = ScheduleObj.GetResourceByIndex(args.GroupIndex ?? 0);

 

            if (ResourceList != null && ResourceList.ResourceData != null)

            {

                var isAvailableProperty = ResourceList.ResourceData.GetType().GetProperty("IsAvailable");

                if (isAvailableProperty != null)

                {

                    bool isAvailable = (bool)isAvailableProperty.GetValue(ResourceList.ResourceData, null);

                    if (isAvailable)

                    {

                        args.CssClasses = new List<string>(CustomClass);

                    }

                }

            }

        }

    }

    public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>

    {

        new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00", IsAvailable= true },

        new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398", IsAvailable= false },

        new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1", IsAvailable= false }

    };

    List<AppointmentData> DataSource = new List<AppointmentData> { };

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public string Location { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public string Description { get; set; }

        public bool IsAllDay { get; set; }

        public string RecurrenceRule { get; set; }

        public string RecurrenceException { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

             public bool IsBlock { get; set; }

        public int OwnerId { get; set; }

        public int RoomId { get; set; }

    }

    public class ResourceData

    {

        public int Id { get; set; }

        public string RoomText { get; set; }

        public string RoomColor { get; set; }

        public string OwnerText { get; set; }

        public string OwnerColor { get; set; }

        public int OwnerGroupId { get; set; }

        public bool IsAvailable {get; set;}

    }

}

 

<style>

    .custom-schedule.e-schedule .e-work-cells.resource-custom-class {

      background-color: red;

    }

</style>

 

Screenshot:

Regards,

Ashok

[Hammad Khan]

Can we customize the alternate row color for Sfscheduler .net maui also.

[Vijay Ravi]

Hi Hammad khan,

Yes, We have modified the Schedule OnRenderCell event to apply the different background color for the different resource using CSS class as shown in the below shared code snippet. Refer the shared sample for your reference. Kindly try it out.

Sample link: https://blazorplayground.syncfusion.com/VtLzNxLoKmyhUePJ

[index.razor]

<SfSchedule TValue="AppointmentData" @ref="ScheduleObj" CssClass="custom-schedule" Height="550px" @bind-SelectedDate="@CurrentDate">

      <ScheduleEvents TValue="AppointmentData" OnRenderCell="OnRenderCell"></ScheduleEvents>

</SfSchedule>

 

public void OnRenderCell(RenderCellEventArgs args)

{

    if (args.ElementType == ElementType.WorkCells)

    {

        var ResourceList = ScheduleObj.GetResourceByIndex(args.GroupIndex ?? 0);

        if (ResourceList != null && ResourceList.ResourceData != null)

        {

            var ownerTextProperty = ResourceList.ResourceData.GetType().GetProperty("OwnerText");

            if (ownerTextProperty != null)

            {

                string ownerText = (string)ownerTextProperty.GetValue(ResourceList.ResourceData, null);

                if (ownerText == "Nancy")

                {

                    args.CssClasses = new List<string> { "resource-nancy" };

                }

                else if (ownerText == "Steven")

                {

                    args.CssClasses = new List<string> { "resource-steven" };

                }

                else if (ownerText == "Michael")

                {

                    args.CssClasses = new List<string> { "resource-michael" };

                }

            }

        }

    }

}

 

<style>

    .custom-schedule.e-schedule .e-work-cells.resource-nancy,

    .custom-schedule.e-schedule .e-work-cells.resource-nancy:hover {

      background-color: red; /* color for Nancy */

    }

    .custom-schedule.e-schedule .e-work-cells.resource-steven,

    .custom-schedule.e-schedule .e-work-cells.resource-steven:hover {

      background-color: blue; /* color for Steven */

    }

    .custom-schedule.e-schedule .e-work-cells.resource-michael,

    .custom-schedule.e-schedule .e-work-cells.resource-michael:hover {

      background-color: green; /* color for Michael */

    }

</style>

 

Output Screenshot:

Regards,

Vijay