Hi, i have problems with Appointments with Side-By-Side.
If the first appointment starts at 15:00 and the second at 15:15 , the slots overlap. The MinutsperSlot is 30 min.
If the appointment start at 30 it is ok.
Hi @Chris_Schmiitz,
We can't determine the cause of the problem from the screenshot alone. Could you clarify what the problem is? Also can you reproduce it in our online demo by editing it?
The Problem is that if a ivae two dates the frist starts at 15:00 the second 15:15 the slots overlapping. If the the second starts at 15:30 it's side by side. How do i get the 15:15 side-by-side? In the screenshot you see the two dates at 15:00 the 15:00 is in thebackground behind the 15:15.
Hope it is cleat now?
I am afraid that I can't tell without more without reproducing the problem. Please try editing the linked demo to match your scenario.
Try this with the demo and click on dayview SkypeCall and Vacation:
<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End" ShowHeader=@showHeader
TextProperty="Text" SelectedIndex="2"
SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender DaySelect="@OnDaySelect"
AppointmentMove=@OnAppointmentMove >
ChildContent <-- Missing < beacuse the editor
RadzenDayView MinutesPerSlot="30"/>
RadzenWeekView />
RadzenMonthView />
ChildContent
/RadzenScheduler>
...
IList appointments = new List
{
new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday" },
new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off" },
new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home" },
new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting" },
new Appointment { Start = DateTime.Today.AddHours(10).AddMinutes(15), End = DateTime.Today.AddHours(10).AddMinutes(30), Text = "Skype call" },
new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
new Appointment { Start = DateTime.Today.AddHours(10).AddMinutes(30), End = DateTime.Today.AddHours(12), Text = "Vacation" },
};
Hi @Chris_Schmiitz,
Please update your post to format your code. Here is how: FAQ - Radzen
@inject DialogService DialogService
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);height:4rem;">
<RadzenLabel Text="Show Header: " />
<RadzenSwitch @bind-Value=@showHeader />
</RadzenStack>
<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End" ShowHeader=@showHeader
TextProperty="Text" SelectedIndex="2"
SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender DaySelect="@OnDaySelect"
AppointmentMove=@OnAppointmentMove >
<ChildContent>
<RadzenDayView MinutesPerSlot="30"/>
<RadzenWeekView />
<RadzenMonthView />
</ChildContent>
</RadzenScheduler>
<EventConsole @ref=@console />
@code {
RadzenScheduler<Appointment> scheduler;
EventConsole console;
Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
bool showHeader = true;
IList<Appointment> appointments = new List<Appointment>
{
new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday" },
new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off" },
new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home" },
new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting" },
new Appointment { Start = DateTime.Today.AddHours(10).AddMinutes(15), End = DateTime.Today.AddHours(10).AddMinutes(30), Text = "Skype call" },
new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment" },
new Appointment { Start = DateTime.Today.AddHours(10).AddMinutes(30), End = DateTime.Today.AddHours(12), Text = "Vacation" },
};
void OnDaySelect(SchedulerDaySelectEventArgs args)
{
console.Log($"DaySelect: Day={args.Day} AppointmentCount={args.Appointments.Count()}");
}
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)
{
var duration = draggedAppointment.End - draggedAppointment.Start;
if (args.SlotDate.TimeOfDay == TimeSpan.Zero)
{
draggedAppointment.Start = args.SlotDate.Date.Add(draggedAppointment.Start.TimeOfDay);
}
else
{
draggedAppointment.Start = args.SlotDate;
}
draggedAppointment.End = draggedAppointment.Start.Add(duration);
await scheduler.Reload();
}
}
}
Hi @Chris_Schmiitz,
Thanks! I did some investigation and found what is causing the problem. It is the minimum height we apply to an appointment so its text is visible (otherwise it would have rendered as a thin line because it occupies less than half a slot).
The min height causes those appointments to overlap visually even though they do not overlap - the first one ends when the second one starts. I am afraid we can't fix this case however I can suggest two workarounds:
-
Set MinutesPerSlot to 15:
<RadzenDayView MinutesPerSlot="15" TimeFormat="hh:mm"/>Then things would work just fine:
-
Add a tiny bit of time to the first appointment e.g.
new Appointment { Start = DateTime.Today.AddHours(10).AddMinutes(15), End = DateTime.Today.AddHours(10) .AddMinutes(30) .AddMilliseconds(1) /* add a tiny bit of time so they overlap */, Text = "Skype call" },
