hi Everyone
I am new to Radzen and starting off with the Scheduler component. 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
And nothing happens, no error is thrown. Nothing
I replaced the blazor @ sign with # as it wont let me post it otherwise
Please advice. Thank you
Ehi
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
Main Scheduler page is
#inject DialogService DialogService#layout LayoutAccounts
#rendermode InteractiveServer
Day, week and month views
<RadzenExample ComponentName="Scheduler" Example="SchedulerConfig" AdditionalSourceCodePages=#(new { "Appointment.cs", "AddAppointmentPage.razor", "EditAppointmentPage.razor" })>
Add Appoingment component is
#inject DialogService DialogService
#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
<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 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), 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 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 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();
}
}
}