starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Scheduler | MaxAppointmentsInSlot overflow #1540

New Issue
Closed
opened 2026-01-29 17:55:07 +00:00 by claunia · 14 comments
claunia commented 2026-01-29 17:55:07 +00:00
Owner
Copy Link

Originally created by @w3ori on GitHub (Dec 19, 2024).

Describe the bug
Events overflows in a day.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://blazor.radzen.com/scheduler?theme=material'
  2. Click on EditSource
  3. Add <RadzenMonthView MaxAppointmentsInSlot="5" />
  4. Click on Run
  5. Add more than 5 events on a day

Expected behavior
Make day cells bigger to fit elements defined in MaxAppointmentsInSlot.

Screenshots
image

Desktop (please complete the following information):

  • OS: Win11
  • Browser chrome
  • Version 5.7
Originally created by @w3ori on GitHub (Dec 19, 2024). **Describe the bug** Events overflows in a day. **To Reproduce** Steps to reproduce the behavior: 1. Go to 'https://blazor.radzen.com/scheduler?theme=material' 2. Click on EditSource 3. Add `<RadzenMonthView MaxAppointmentsInSlot="5" />` 4. Click on Run 5. Add more than 5 events on a day **Expected behavior** Make day cells bigger to fit elements defined in `MaxAppointmentsInSlot`. **Screenshots** ![image](https://github.com/user-attachments/assets/6b26e428-d9e2-4b65-aefb-8ea4e0a876f9) **Desktop (please complete the following information):** - OS: Win11 - Browser chrome - Version 5.7
claunia commented 2026-01-29 17:55:08 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 19, 2024):

Indeed the height isn't expanded at the moment. Even if it were expanded the last row wouldn't be entirely visible. We will investigate for possible ways to improve that.

There is a workaround though:

<style>
    .rz-month-view .rz-view-content {
        overflow: auto;
    }
    .rz-month-view .rz-week {
       height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */
    }
</style>
@akorchev commented on GitHub (Dec 19, 2024): Indeed the height isn't expanded at the moment. Even if it were expanded the last row wouldn't be entirely visible. We will investigate for possible ways to improve that. There is a workaround though: ```css <style> .rz-month-view .rz-view-content { overflow: auto; } .rz-month-view .rz-week { height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */ } </style> ```
claunia commented 2026-01-29 17:55:08 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 19, 2024):

Is it possible to expand automatically by the MaxAppointmentsInSlot variable?

@w3ori commented on GitHub (Dec 19, 2024): Is it possible to expand automatically by the MaxAppointmentsInSlot variable?
claunia commented 2026-01-29 17:55:08 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 20, 2024):

Indeed the height isn't expanded at the moment. Even if it were expanded the last row wouldn't be entirely visible. We will investigate for possible ways to improve that.

There is a workaround though:

<style>
    .rz-month-view .rz-view-content {
        overflow: auto;
    }
    .rz-month-view .rz-week {
       height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */
    }
</style>

I tried it, but this workaround is not working. 😞
image

@w3ori commented on GitHub (Dec 20, 2024): > Indeed the height isn't expanded at the moment. Even if it were expanded the last row wouldn't be entirely visible. We will investigate for possible ways to improve that. > > There is a workaround though: > > ```css > <style> > .rz-month-view .rz-view-content { > overflow: auto; > } > .rz-month-view .rz-week { > height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */ > } > </style> > ``` I tried it, but this workaround is not working. 😞 ![image](https://github.com/user-attachments/assets/6d34843f-d287-4c8f-a566-c06f5e219fa8)
claunia commented 2026-01-29 17:55:08 +00:00
Author
Owner
Copy Link

@paulo-rico commented on GitHub (Dec 23, 2024):

Hi @w3ori, @akorchev

Currently working on a Pull Request for this one.

This is an outline of the PR

New property - RenderMode

In static mode (default), the Scheduler will render as it does currently, with a set height for the control, and the content is scaled to fit within that (no breaking changes).

In dynamic mode, the Scheduler will have a dynamic size set by the specified SlotHeight parameter of each ScheduleView.

At the stage where the slot sizes can be set explicitly. Now working on ensuring the appointments render correctly.

Paul

@paulo-rico commented on GitHub (Dec 23, 2024): Hi @w3ori, @akorchev Currently working on a Pull Request for this one. This is an outline of the PR New property - `RenderMode` In static mode (default), the `Scheduler` will render as it does currently, with a set height for the control, and the content is scaled to fit within that (no breaking changes). In dynamic mode, the `Scheduler` will have a dynamic size set by the specified `SlotHeight` parameter of each `ScheduleView`. At the stage where the slot sizes can be set explicitly. Now working on ensuring the appointments render correctly. Paul
claunia commented 2026-01-29 17:55:08 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 23, 2024):

@paulo-rico I am not sure this would solve this problem at all. Not to mention it is quite a big of a change. Please let's not do that. I don't think I would accept such a pull request. There is a workaround (not sure why I didn't work for @w3ori but it should do exactly what he wants).

@akorchev commented on GitHub (Dec 23, 2024): @paulo-rico I am not sure this would solve this problem at all. Not to mention it is quite a big of a change. Please let's not do that. I don't think I would accept such a pull request. There is a workaround (not sure why I didn't work for @w3ori but it should do exactly what he wants).
claunia commented 2026-01-29 17:55:09 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 23, 2024):

@paulo-rico I am not sure this would solve this problem at all. Not to mention it is quite a big of a change. Please let's not do that. I don't think I would accept such a pull request. There is a workaround (not sure why I didn't work for @w3ori but it should do exactly what he wants).

I tried the workaround on also on the official page and didn't work there either.

Can you provide a sample code that I can try on radzen site?

Thanks

@w3ori commented on GitHub (Dec 23, 2024): > @paulo-rico I am not sure this would solve this problem at all. Not to mention it is quite a big of a change. Please let's not do that. I don't think I would accept such a pull request. There is a workaround (not sure why I didn't work for @w3ori but it should do exactly what he wants). I tried the workaround on also on the official page and didn't work there either. Can you provide a sample code that I can try on radzen site? Thanks
claunia commented 2026-01-29 17:55:09 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 23, 2024):

Here is what I tested and it works just fine:

@inject DialogService DialogService

<style>
    .rz-month-view {
        height:0;
    }
    .rz-month-view .rz-view-content {
        overflow: auto;
       
    }
    .rz-month-view .rz-week {
       height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */
    }
</style>

<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
    TextProperty="Text" SelectedIndex="2"
    SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender
    AppointmentMove=@OnAppointmentMove >
    <RadzenDayView />
    <RadzenWeekView />
    <RadzenMonthView MaxAppointmentsInSlot="5" />
</RadzenScheduler>

<EventConsole @ref=@console />

@code {
    RadzenScheduler<Appointment> scheduler;
    EventConsole console;
    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();

    IList<Appointment> appointments = new List<Appointment>
    {
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" },
        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
         new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
    };

    void OnSlotRender(SchedulerSlotRenderEventArgs args)
    {
        // Highlight today in month view
        if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
        {
            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
        }

        // Highlight working hours (9-18)
        if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19)
        {
            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
        }
    }

    async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
    {
        console.Log($"SlotSelect: Start={args.Start} End={args.End}");

        if (args.View.Text != "Year")
        {
            Appointment data = await DialogService.OpenAsync<AddAppointmentPage>("Add Appointment",
                new Dictionary<string, object> { { "Start", args.Start }, { "End", args.End } });

            if (data != null)
            {
                appointments.Add(data);
                // Either call the Reload method or reassign the Data property of the Scheduler
                await scheduler.Reload();
            }
        }
    }

    async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
    {
        console.Log($"AppointmentSelect: Appointment={args.Data.Text}");

        var copy = new Appointment
        {
            Start = args.Data.Start,
            End = args.Data.End,
            Text = args.Data.Text
        };

        var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });

        if (data != null)
        {
            // Update the appointment
            args.Data.Start = data.Start;
            args.Data.End = data.End;
            args.Data.Text = data.Text;
        }

        await scheduler.Reload();
    }

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

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

    async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs args)
    {
        var draggedAppointment = appointments.FirstOrDefault(x => x == args.Appointment.Data);

        if (draggedAppointment != null)
        {
            draggedAppointment.Start = draggedAppointment.Start + args.TimeSpan;

            draggedAppointment.End = draggedAppointment.End + args.TimeSpan;

            await scheduler.Reload();
        }
    }
}
image
@akorchev commented on GitHub (Dec 23, 2024): Here is what I tested and it works just fine: ``` @inject DialogService DialogService <style> .rz-month-view { height:0; } .rz-month-view .rz-view-content { overflow: auto; } .rz-month-view .rz-week { height: calc(1.5rem * 5 + 2*1.5rem); /* 5 slots each 1.5rem tall + two extra rows - one for the title and one for the "+ x more" button */ } </style> <RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End" TextProperty="Text" SelectedIndex="2" SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender AppointmentMove=@OnAppointmentMove > <RadzenDayView /> <RadzenWeekView /> <RadzenMonthView MaxAppointmentsInSlot="5" /> </RadzenScheduler> <EventConsole @ref=@console /> @code { RadzenScheduler<Appointment> scheduler; EventConsole console; Dictionary<DateTime, string> events = new Dictionary<DateTime, string>(); IList<Appointment> appointments = new List<Appointment> { new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" }, new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" }, new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" }, new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call" }, new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" }, new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" }, }; void OnSlotRender(SchedulerSlotRenderEventArgs args) { // Highlight today in month view if (args.View.Text == "Month" && args.Start.Date == DateTime.Today) { args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));"; } // Highlight working hours (9-18) if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19) { args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));"; } } async Task OnSlotSelect(SchedulerSlotSelectEventArgs args) { console.Log($"SlotSelect: Start={args.Start} End={args.End}"); if (args.View.Text != "Year") { Appointment data = await DialogService.OpenAsync<AddAppointmentPage>("Add Appointment", new Dictionary<string, object> { { "Start", args.Start }, { "End", args.End } }); if (data != null) { appointments.Add(data); // Either call the Reload method or reassign the Data property of the Scheduler await scheduler.Reload(); } } } async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args) { console.Log($"AppointmentSelect: Appointment={args.Data.Text}"); var copy = new Appointment { Start = args.Data.Start, End = args.Data.End, Text = args.Data.Text }; var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } }); if (data != null) { // Update the appointment args.Data.Start = data.Start; args.Data.End = data.End; args.Data.Text = data.Text; } await scheduler.Reload(); } void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args) { // Never call StateHasChanged in AppointmentRender - would lead to infinite loop if (args.Data.Text == "Birthday") { args.Attributes["style"] = "background: red"; } } async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs args) { var draggedAppointment = appointments.FirstOrDefault(x => x == args.Appointment.Data); if (draggedAppointment != null) { draggedAppointment.Start = draggedAppointment.Start + args.TimeSpan; draggedAppointment.End = draggedAppointment.End + args.TimeSpan; await scheduler.Reload(); } } } ``` <img width="1238" alt="image" src="https://github.com/user-attachments/assets/62a392b4-6d7f-4484-b741-1f6a095bc7e3" />
claunia commented 2026-01-29 17:55:09 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 23, 2024):

@akorchev It's not working for me again.
I don't know what I'm doing wrong.

My steps:

  1. Open https://blazor.radzen.com/scheduler?theme=material
  2. Paste your code into the EDIT SOURCE panel in first Scheduler
  3. Click Run

Results:

(Both with theme material and material3)
image
image

I have tried different browsers and incognito mode.

@w3ori commented on GitHub (Dec 23, 2024): @akorchev It's not working for me again. I don't know what I'm doing wrong. ### My steps: 1. Open https://blazor.radzen.com/scheduler?theme=material 2. Paste your code into the **EDIT SOURCE** panel in first `Scheduler` 3. Click Run ### Results: (Both with theme material and material3) ![image](https://github.com/user-attachments/assets/4d3bafc5-eb02-4e14-80c7-afa1da6ad366) ![image](https://github.com/user-attachments/assets/1801bb49-fa6f-4d04-a38d-ee1765120966) I have tried different browsers and incognito mode.
claunia commented 2026-01-29 17:55:10 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 23, 2024):

It seems Google chrome needs an additional CSS rule. Try with this:

<style>
    .rz-month-view {
        height: 0;
    }
    .rz-month-view .rz-view-content {
       overflow: auto;
       display: block;  /* <- the new addition */
    }
    .rz-month-view .rz-week {
       height:  calc(1.5rem * 5 + 2*1.5rem);
    }
</style>
@akorchev commented on GitHub (Dec 23, 2024): It seems Google chrome needs an additional CSS rule. Try with this: ``` <style> .rz-month-view { height: 0; } .rz-month-view .rz-view-content { overflow: auto; display: block; /* <- the new addition */ } .rz-month-view .rz-week { height: calc(1.5rem * 5 + 2*1.5rem); } </style> ```
claunia commented 2026-01-29 17:55:10 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 23, 2024):

Thanks @akorchev !

It would be a nice feature in Scheduler.
How can You imagine to include it (for PR)?

@w3ori commented on GitHub (Dec 23, 2024): Thanks @akorchev ! It would be a nice feature in Scheduler. How can You imagine to include it (for PR)?
claunia commented 2026-01-29 17:55:10 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 23, 2024):

This is a breaking change :) Not sure we would include it. It creates a scrollbar and now it does not.

@akorchev commented on GitHub (Dec 23, 2024): This is a breaking change :) Not sure we would include it. It creates a scrollbar and now it does not.
claunia commented 2026-01-29 17:55:11 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 23, 2024):

I can accept it.
But then what is the purpose of MaxAppointmentsInSlot property?
Only when somebody wants 1 or 2 event on a day?

@w3ori commented on GitHub (Dec 23, 2024): I can accept it. But then what is the purpose of `MaxAppointmentsInSlot` property? Only when somebody wants 1 or 2 event on a day?
claunia commented 2026-01-29 17:55:11 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 23, 2024):

You can also increase the height of the scheduler so it can fit 5 events per slot. For example set height to 1100px.

image

I think the workaround I have provided is viable and doesn't require a breaking change. If you don't want to use it you can increase the height of the scheduler or use a different number for MaxAppointmentsInSlot.

@akorchev commented on GitHub (Dec 23, 2024): You can also increase the height of the scheduler so it can fit 5 events per slot. For example set height to 1100px. <img width="1727" alt="image" src="https://github.com/user-attachments/assets/b9ffa5e4-f3ce-434d-85f3-74a2f2f8f831" /> I think the workaround I have provided is viable and doesn't require a breaking change. If you don't want to use it you can increase the height of the scheduler or use a different number for MaxAppointmentsInSlot.
claunia commented 2026-01-29 17:55:11 +00:00
Author
Owner
Copy Link

@w3ori commented on GitHub (Dec 23, 2024):

I will definitely use it.

Thanks!

@w3ori commented on GitHub (Dec 23, 2024): I will definitely use it. Thanks!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1540
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?