Radzen Scheduler - Formatting for Consecutive Two-Day Appointments

Radzen.Blazor Components
1

In the Radzen Blazor Scheduler component, I'm getting some odd formatting when I have overnight appointments for multiple days in a row. In the attached screenshot, I have an 8:00PM to 8:00AM appointment everyday for a couple of weeks. The schedule can fit two lines of appointments on each day. The first appointment starts on the first line of the first day and overlaps into the first line of the second day. The second appointment starts on the second line of the second day and overlaps into the second line of the third day. This is all as expected. What's strange is that the third appointment starts on the second line as well, instead of switching back to the first line. Instead of using the blank space, it's displaying on top of the previous appointment.

At the start of each week, the first line is used again, but then appointments go back to displaying on top of each other on the second line and leaving blank space on the first line. Is there a way to make them alternate back and forth and utilize the blank space better? Thanks for any help!

Overnight Scheduler
Overnight Scheduler1524×974 47.7 KB

2

Hi @mtbandy,

Can you show us some sample code? We need to reproduce this and see if we can do anything to improve the layout algorithm.

3

Sure! Here's a simplified version of my code that shows the same effect. I only included the appointments from December 31 to January 9 because that's enough to see one week of the overlapping effect. Thanks for looking into this!

<RadzenScheduler style="height: 550px; margin-bottom: 20px; min-width: 500px" Data="@appointments" TItem="Appointment" StartProperty="AppointmentStartDate" EndProperty="AppointmentEndDate" TextProperty="TimeRange" SelectedIndex="2">
    <RadzenDayView />
    <RadzenWeekView />
    <RadzenMonthView />
</RadzenScheduler>

@code {
    IList<Appointment> appointments = new List<Appointment>
        {
        new Appointment { AppointmentStartDate = new DateTime(2020,12,31,20,0,0), AppointmentEndDate = new DateTime(2021,1,1,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,1,20,0,0), AppointmentEndDate = new DateTime(2021,1,2,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,2,20,0,0), AppointmentEndDate = new DateTime(2021,1,3,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,3,20,0,0), AppointmentEndDate = new DateTime(2021,1,4,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,4,20,0,0), AppointmentEndDate = new DateTime(2021,1,5,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,5,20,0,0), AppointmentEndDate = new DateTime(2021,1,6,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,6,20,0,0), AppointmentEndDate = new DateTime(2021,1,7,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,7,20,0,0), AppointmentEndDate = new DateTime(2021,1,8,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,8,20,0,0), AppointmentEndDate = new DateTime(2021,1,9,8,0,0)},
        new Appointment { AppointmentStartDate = new DateTime(2021,1,9,20,0,0), AppointmentEndDate = new DateTime(2021,1,10,8,0,0)},
        };
}
4

Thanks! We will investigate how to fix this problem.

5

I am experimenting with a new layout algorithm which kind of works.

image
image1368×1562 146 KB

Is this better? Seems to be what other online calendars do (tested with Google Calendar).

2 Likes
6

Yes, that looks great! That's what I was hoping it would do!