Scheduler AppointmentRender dynamic text color change

Radzen.Blazor Components
1

I have a requirement on a schedule view to allow the user to dynamically change the color of an appointment and the text in the view. I see in the demo how to set the background property in the inline style attribute, but because of the Text of the appointment is in a sub paragraph (probably from a internal RadzenText used) changing the color attribute inline to the user selected color doesn't cascade down to override the class set on the text. Is there any easy way to change the text color on the AppointmentOverride function without using CSS? (i.e. bind it to a color saved in an object).

Here's what I'm currently trying to do in code:

void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<CourseEvent> args)
        {
            if (args.Data.BackgroundColor == null)
            {
                return;
            }

            string textColor = args.Data.TextColor == null ?
                    ColorUtils.ColorToString(ColorUtils.TextColorFromRGBTextColor(args.Data.BackgroundColor).Value) :
                    args.Data.TextColor;

            // Set color for multiple colors
            if (args.Data.BackgroundColor != null && args.Data.SecondaryColor != null)
            {
                args.Attributes["style"] = string.Format("background-image: linear-gradient({0}, {1}); color: {2}",
                    args.Data.BackgroundColor, args.Data.SecondaryColor, textColor);
            } else
            {
                // set color for single background color
                args.Attributes["style"] = string.Format("background-color: {0}; color: {1}",
                    args.Data.BackgroundColor, textColor);
            }
        }

Thanks!

2

I just tested our online demo with this and it seems to work:

    void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
    {
        // Never call StateHasChanged in AppointmentRender - would lead to infinite loop

        if (args.Data.Text == "Birthday")
        {
            args.Attributes["style"] = "background: yellow; color: blue;";
        }
    }

image

Can you confirm the right style attribute is rendered? You can use your browser's developer tools to verify that.

3

Looks correct from what I see:

image
image1040×96 6.41 KB

Render:
image

Unless I'm missing something silly (which is likely)
Here's one that should be white and is still black:

image
image1059×92 4.96 KB

Render:
image

4

Turns out I was doing something dumb. I had a Template for the display:

    <Template Context="courseEvent">
        <RadzenText Text="@(courseEvent.SyllabusItem == null ? courseEvent.DisplayText : courseEvent.SyllabusItem.Name)"/>
    </Template>

Changed to:

    <Template Context="courseEvent">
        @(courseEvent.SyllabusItem == null ? courseEvent.DisplayText : courseEvent.SyllabusItem.Name)
    </Template>

And it works like a champ... thanks for pointing me in the right direction! (Hope this helps someone else eventually) :slight_smile: