RadzenScheduler RadzenYearView Render Callback

Radzen.Blazor Components
1

I might have missed something, but I can’t seem to function/callback to change the appearance of the RadzenYearView appointments. It looks like the slot itself can be changed via SlotRender, but not the day circle itself? The AppointmentRender isn’t called, presumably because it’s represents the day not the actual appointment.

It’d be useful to be able to change this, and allow for custom tooltips like we can for the other views.

2

Hi @Peter_Godwin,

Indeed the AppointmentRender event isn't called in year view as events are not rendered. A css class is applied to the slot to specify that it has events. So in effect there are no appointments you can customize. You can change the styling of the .rz-has-appointments class that is applied. You can also use the SlotRender event to apply custom attributes to the slot if args.Appointments is not null and has any items.

3

Thanks @korchev.

The idea of using the SlotRender as a workaround is sound.

I set the --rz-scheduler-event-background-color variable in the SlotRender callback to change the “circle” colour.

Eg

void OnSlotRender(SchedulerSlotRenderEventArgs args)

{

    // Highlight today in month view

    if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)

    {

        args.Attributes["style"] = "--rz-scheduler-event-background-color: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";

    }

}

I’ll have a play and see if I can use a similar approach for a tool tip.

EDIT: Would it be possible to have SlotMouseEnter and SlotMouseLeave events?

RadzenScheduler and OnAppointmentRender for Year view
4

It is possible, but it would require a fairly substantial change to how RadzenScheduler renders slots, and we’d prefer to avoid that if we can. Here’s why.

MouseEnter/MouseLeave scenarios typically need an ElementReference in the event args (for example, to position/show a tooltip). That requires capturing a reference on the element, e.g.:

<div class="rz-slot"
     @ref="element" <!-- reference capture -->
     @onmouseenter="OnMouseEnter"
     @onmouseleave="OnMouseLeave">
</div>

In the current implementation, slots are rendered in a simple for loop in YearView.razor (see the rendering here: radzen-blazor/Radzen.Blazor/Rendering/YearView.razor at master · radzenhq/radzen-blazor · GitHub). In this setup, using @ref per-slot isn’t workable in a way that lets us reliably capture and forward an ElementReference for each slot.

To support these events properly, we’d need to introduce a dedicated slot component instead of emitting plain <div> elements. The downside is that this would add performance and memory overhead: each slot would become its own Blazor component with its own lifecycle and allocations, just to handle mouseenter/mouseleave and pass an ElementReference upward.

As a workaround I can suggest to use the SlotRender event and the html title attribute that should display normally on hover to tell that there are appointments in this slot.

5

No worries. Thanks for the feedback and detailed explanation.