Blazor：调整Scheduler事件间距并移除“+2更多”提示

需求 #

• 将Scheduler高度设为500px（占屏幕一半多），每个日期插槽显示4个预约
• 彻底移除插槽空间不足时的“+N更多”提示
• 缩小单个预约高度至1rem，调整预约的top偏移为1rem倍数，减小预约间间距

当前效果 #

解决方案 #

1. CSS样式调整 #

通过自定义CSS覆盖默认样式，压缩事件高度、内边距与间距，同时隐藏“更多”提示，并确保插槽有足够空间容纳4个事件：

.rz-event-content {
    line-height: 0.75rem !important;
    padding: 0 0.25rem !important; /* 减小内边距进一步压缩空间 */
}

.rz-event {
    height: 1rem !important;
    margin-top: 0.1rem !important; /* 缩小事件间的间距 */
}

.rz-scheduler-nav {
    height: 45px;
}

.rz-view-header {
    height: 22px;
}

/* 彻底隐藏"更多"提示元素 */
.rz-scheduler-more {
    display: none !important;
}

/* 设置月份视图插槽最小高度，确保能放下4个事件+间距 */
.rz-month-view .rz-scheduler-slot {
    min-height: calc(4 * 1rem + 3 * 0.1rem) !important;
}

2. 调整事件Top偏移 #

Radzen默认按1.5rem倍数计算事件top值，需在OnAppointmentRender事件中动态转换为1rem倍数：

void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
{
    if (args.Attributes.TryGetValue("style", out var style) && style is string styleStr)
    {
        // 匹配top值（支持小数格式）
        var topMatch = System.Text.RegularExpressions.Regex.Match(styleStr, @"top:\s*(\d+\.?\d*)rem");
        if (topMatch.Success && double.TryParse(topMatch.Groups[1].Value, out var originalTopValue))
        {
            // 将原1.5rem倍数的top值转换为1rem倍数
            var newTop = originalTopValue / 1.5;
            // 替换为新的top值，保留一位小数保证精度
            var newStyle = System.Text.RegularExpressions.Regex.Replace(styleStr, @"top:\s*\d+\.?\d*rem", $"top: {newTop:F1}rem");
            args.Attributes["style"] = newStyle;
        }
    }
}

完整代码示例 #

@inject DialogService DialogService

<style>
    .rz-event-content {
        line-height: 0.75rem !important;
        padding: 0 0.25rem !important;
    }

    .rz-event {
        height: 1rem !important;
        margin-top: 0.1rem !important;
    }

    .rz-scheduler-nav {
        height: 45px;
    }

    .rz-view-header {
        height: 22px;
    }

    .rz-scheduler-more {
        display: none !important;
    }

    .rz-month-view .rz-scheduler-slot {
        min-height: calc(4 * 1rem + 3 * 0.1rem) !important;
    }
</style>

<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 500px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
    TextProperty="Text" SelectedIndex="0"
    SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender>
    <RadzenMonthView />
</RadzenScheduler>


@code {
    RadzenScheduler<Appointment> scheduler;
    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
    struct Appointment
    {
        public DateTime? Start;
        public DateTime? End;
        public string Text;
    }
    IList<Appointment> appointments = new List<Appointment>
    {
        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(1), Text = "Vacation" },
        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(1), Text = "Vacation 2"},
        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(1), Text = "Vacation 3"},
        new Appointment { Start = DateTime.Today, End = DateTime.Today, Text = "Busy 1"},
        new Appointment { Start = DateTime.Today, End = DateTime.Today, Text = "Busy 2"},
        new Appointment { Start = DateTime.Today, End = DateTime.Today, Text = "Busy 3"},
        new Appointment { Start = DateTime.Today, End = DateTime.Today, Text = "Busy 4"},
        new Appointment { Start = DateTime.Today.AddDays(-1), End = DateTime.Today.AddDays(-1), Text = "Free 1"},
        new Appointment { Start = DateTime.Today.AddDays(-1), End = DateTime.Today.AddDays(-1), Text = "Free 2"},
        new Appointment { Start = DateTime.Today.AddDays(-1), End = DateTime.Today.AddDays(-1), Text = "Free 3"},
        new Appointment { Start = DateTime.Today.AddDays(-1), End = DateTime.Today.AddDays(-1), Text = "Free 4"},
    };

    void OnSlotRender(SchedulerSlotRenderEventArgs args) 
    {
        if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
        {
            args.Attributes["style"] = "background: rgba(255,220,40,.2);";
        }
    }

    async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
    {
        
    }

    async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
    {

    }

    void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
    {
        if (args.Attributes.TryGetValue("style", out var style) && style is string styleStr)
        {
            var topMatch = System.Text.RegularExpressions.Regex.Match(styleStr, @"top:\s*(\d+\.?\d*)rem");
            if (topMatch.Success && double.TryParse(topMatch.Groups[1].Value, out var originalTopValue))
            {
                var newTop = originalTopValue / 1.5;
                var newStyle = System.Text.RegularExpressions.Regex.Replace(styleStr, @"top:\s*\d+\.?\d*rem", $"top: {newTop:F1}rem");
                args.Attributes["style"] = newStyle;
            }
        }
    }
}

期望效果 #

内容的提问来源于stack exchange，提问作者freyfrey01