I am using Blazor .NET 8, and starting off with the Scheduler component for Radzen. Which I currently have loading and working on my page. However when I click on the calendar or edit. No popup appears. I added 2 break points on the await DialogService.OpenAsync and Edit also
var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });And nothing happens, no error is thrown. Nothing
My code is below.
I added in my program.cs
builder.Services.AddRadzenComponents();builder.Services.AddScoped();the main page and dependant component are just extracts from the GitHub example, which works locally for me. But implementing in my own project is the problem
In my layoutpage I added
<RadzenDialog />Main Scheduler page is
@inject DialogService DialogService@layout LayoutAccounts@rendermode InteractiveServerDay, week and month views<RadzenExample ComponentName="Scheduler" Example="SchedulerConfig" AdditionalSourceCodePages=@(new { "Appointment.cs", "AddAppointmentPage.razor", "EditAppointmentPage.razor" })>Add Appointment component is
@inject DialogService DialogService<RadzenTemplateForm TItem="Appointment" Data="@model" Submit=@OnSubmit><RadzenStack Gap="1rem"><RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"><RadzenLabel Text="Title" Style="width: 4rem;" /><RadzenTextBox @bind-Value="@model.Text" Name="Text" Style="width: 12rem;" /><RadzenRequiredValidator Component="Text" Text="Title is required" /></RadzenStack><RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"><RadzenLabel Text="Start" Style="width: 4rem;" /><RadzenDatePicker @bind-Value="@model.Start" Name="Start" ShowTime="true" Style="width: 12rem;" /><RadzenRequiredValidator Component="Start" Text="Start is required" /></RadzenStack><RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap"><RadzenLabel Text="End" Style="width: 4rem;" /><RadzenDatePicker Name="End" @bind-Value="@model.End" ShowTime="true" Style="width: 12rem;" /><RadzenRequiredValidator Component="End" Text="End is required" /></RadzenStack><RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.End"><RadzenButton ButtonType="Radzen.ButtonType.Submit" Text="Save" /></RadzenStack></RadzenStack></RadzenTemplateForm>@code { [Parameter] public DateTime Start { get; set; }[Parameter]public DateTime End { get; set; }Appointment model = new Appointment();protected override void OnParametersSet(){ model.Start = Start; model.End = End;}void OnSubmit(Appointment model){ DialogService.Close(model);}}And SchedulerConfig is
@inject DialogService DialogService<RadzenStack Orientation="Radzen.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=@showHeaderTextProperty="Text" SelectedIndex="2"SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender DaySelect="@OnDaySelect"AppointmentMove=@OnAppointmentMove><EventConsole @ref=@console />@code {RadzenScheduler scheduler;EventConsole console;Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();bool showHeader = true;public class Appointment{ public DateTime Start { get; set; } public DateTime End { get; set; } public string Text { get; set; }}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), End = DateTime.Today.AddHours(13), 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.AddDays(1), End = DateTime.Today.AddDays(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") { try { Appointment data = new 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(); } } catch(Exception err) {}}}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 }; try { 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; } } catch (Exception ex) { Console.WriteLine($"DialogService.OpenAsync threw an exception: {ex.Message}"); }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(); }}}