RadzenScheduler and OnAppointmentRender for Year view

Radzen Blazor for Visual Studio
1

Hello everybody,

First post on this great forum. Hope I have selected properly the category to write in.

I have an issue (I hope it is just a lack of knowledge) with the RadzenScheduler. It is easily reproduced at Blazor Scheduler | Free UI Components by Radzen in the playground

We just need to open Playground and activate year view, just adding

We can see birthday is an exception in the OnAppointmentRender, getting red at month view.

Question: why cannot we see that red day at year view? I want to handle a legend with different exceptions along the year, and colour the day is critical. I am just playing with the whole year view.

I have even forced birthday in red and rest in green. It works fine on Month view but swapping to Year view, everything is rendered in default blue color, ignoring code on OnAppointmentRender

Regards

2

Going deeper, I think I am confusing Day with Appointment

Month view displays several appointments in a day.

Year view displays days with appointments and days without appointments. Once selected, a list of appointments are displayed.

So, understanding that, it seems to work in a coherent way, despite there is no control to colour busy days in a controlled way (multiple appointments in a day can be handled)

My issue (not RadzenScheduler one) is that I want to control each day as a whole. Is there any chance to do so? Or creating a dummy appointment covering the whole day? Or getting control of colouring a day in the year view?

3

Hi @arkoala,

You can check my replies in this thread: RadzenScheduler RadzenYearView Render Callback - #3 by Peter_Godwin

4

Indeed, I started with Slots, then moved to Appointments, and it is clear I was wrong.

Working fine with



void OnSlotRender(SchedulerSlotRenderEventArgs args)
{        
    var day = calendar.FirstOrDefault(d => d.Day.Date == args.Start.Date);

    if (day != null) args.Attributes["style"] = $"--rz-scheduler-event-background-color: {GetColor(day.Exception)};";
}

Now, regarding OnSlotSelect, is there a way to override the original dialog displaying the appointments in a slot?

I have my own Dialog, working apparently ok so far, but once the dialog is closed, the default one appears

async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
{       
    Calendar_DTO copy = new Calendar_DTO { Day = args.Start.Date };
    if (args.Appointments.Count() == 0)
    {
        copy.Exception = 0;
        copy.Description = string.Empty;
    }
    else
    {
        var app = args.Appointments.First();   
        
        copy.Exception = ((Calendar_DTO)app.Data).Exception;
        copy.Description = ((Calendar_DTO)app.Data).Description;
    }        

    var data = await DialogService.OpenAsync<Dialogs.CalendarDialog>("Edit day", new Dictionary<string, object> { 
            { "Day", copy },
            { "Exceptions", calendarExceptions }
    });

    if (data != null) calendar.Add(data);  

    await scheduler.Reload();
}

Example excludes Year view, but if we enable it, both dialogs appear also, one after the other

5

There is a PreventDefault method in SchedulerSlotSelectEventArgs:

args.PreventDefault();
1 Like
6

Hi there,

I think this can be fixed to add a css class for a particular view with percentage wise class view.

private void OnSlotRender(SchedulerSlotRenderEventArgs args) { if (args.View.Text == YearText) { List<string> cssClass = []; if(someCondition like birthday) { cssClass.Add("birthday"); } if (cssClass.Count > 0) { args.Attributes["class"] = string.Join(" ", cssClass); } } }

css

you can modify the birthday class as you want

.birthday
{
--rz-scheduler-event-background-color: var(--rz-warning-light);
}
.leave 
{
--rz-scheduler-event-background-color: var(--rz-success-light);
}

Hope this will work in your case.

in case if you have multiple scenario to add multiple css classes for that you need to write code for

how much space can a class background will take

.birthday.leave .rz-has-appointments {
background: linear-gradient( to bottom, #FFA6A6 0%, #FFA6A6 50%, var(--rz-warning-light) 50%, var(--rz-success-light) 100% );
}