I am using the code (Shown below) which is similar to the example provided on Blazor scheduler component with daily, weekly and monthly views. Issue I am running into is I'd like the scheduler to only take a little over half the height of the screen. With each day having 4 appointments. How can I remove the "+2 more" displayed when the slot is not large enough. In essence I'd just like to make each appointment height smaller as well as lessen the distance between appointments in a slot so that all 4 can display at the same time with a smaller scheduler. The code below is an example of what I am trying to do with some css already implemented to make the appointment boxes smaller. I noticed each event was originally 1.5rem height and from top down would have "top" be a multiple of 1.5rem. I was hoping for each event to have the height be 1rem and the events in a slot have "top" be a multiple of 1rem.
@inject DialogService DialogService
<style>
.rz-event-content {
line-height:0.75rem !important;
}
.rz-event {
height:1rem !important;
}
.rz-scheduler-nav {
height: 45px;
}
.rz-view-header {
height:22px
}
</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)
{
// Highlight today in month view
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)
{
// Never call StateHasChanged in AppointmentRender - would lead to infinite loop
}
}