Basically I’m trying to color alternating rows with a light shade for clarity in the year view of the Scheduler, but I can’t seem to find a solution.
Thanks!
Hi @TrikiCode
Give this a try. It is a copy of the example on the RadzenScheduler example page with a slight modification. Note the OnSlotRender section.
@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);">
<RadzenLabel Text="Schedule Start Month:" />
<RadzenSelectBar @bind-Value="@startMonth" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Month)).Cast<Month>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-xl-flex" />
</RadzenStack>
<RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 768px;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
TextProperty="Text" SelectedIndex="1"
SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender MonthSelect=@OnMonthSelect>
<RadzenMonthView />
<RadzenYearPlannerView StartMonth="@startMonth" />
<RadzenYearTimelineView StartMonth="@startMonth" />
<RadzenYearView StartMonth="@startMonth" />
</RadzenScheduler>
<EventConsole @ref=@console />
@code {
RadzenScheduler<Appointment> scheduler;
EventConsole console;
Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
Month startMonth = Month.January;
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(7), Text = "Vacation" },
new Appointment { Start = DateTime.Today.AddDays(21).AddHours(10), End = DateTime.Today.AddDays(21).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(21).AddHours(11), End = DateTime.Today.AddDays(21).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(21).AddHours(12), End = DateTime.Today.AddDays(21).AddHours(13), Text = "Client #3" },
new Appointment { Start = DateTime.Today.AddDays(21).AddHours(13), End = DateTime.Today.AddDays(21).AddHours(14), Text = "Client #4" },
new Appointment { Start = DateTime.Today.AddDays(17).AddHours(10), End = DateTime.Today.AddDays(17).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(17).AddHours(11), End = DateTime.Today.AddDays(17).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(18).AddHours(10), End = DateTime.Today.AddDays(18).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(18).AddHours(11), End = DateTime.Today.AddDays(18).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(18).AddHours(12), End = DateTime.Today.AddDays(18).AddHours(13), Text = "Client #3" },
new Appointment { Start = DateTime.Today.AddDays(18).AddHours(13), End = DateTime.Today.AddDays(18).AddHours(14), Text = "Client #4" },
new Appointment { Start = DateTime.Today.AddDays(18).AddHours(14), End = DateTime.Today.AddDays(23).AddHours(15), Text = "Client #5" },
new Appointment { Start = DateTime.Today.AddDays(6).AddHours(10), End = DateTime.Today.AddDays(6).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(6).AddHours(11), End = DateTime.Today.AddDays(6).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(6).AddHours(12), End = DateTime.Today.AddDays(6).AddHours(13), Text = "Client #3" },
new Appointment { Start = DateTime.Today.AddDays(6).AddHours(13), End = DateTime.Today.AddDays(6).AddHours(14), Text = "Client #4" },
new Appointment { Start = DateTime.Today.AddDays(7).AddHours(10), End = DateTime.Today.AddDays(7).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(7).AddHours(11), End = DateTime.Today.AddDays(7).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(8).AddHours(10), End = DateTime.Today.AddDays(8).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(8).AddHours(11), End = DateTime.Today.AddDays(8).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(9).AddHours(10), End = DateTime.Today.AddDays(9).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(9).AddHours(11), End = DateTime.Today.AddDays(9).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(13).AddHours(10), End = DateTime.Today.AddDays(16).AddHours(11), Text = "Client #1" },
new Appointment { Start = DateTime.Today.AddDays(13).AddHours(11), End = DateTime.Today.AddDays(16).AddHours(12), Text = "Client #2" },
new Appointment { Start = DateTime.Today.AddDays(13).AddHours(12), End = DateTime.Today.AddDays(13).AddHours(13), Text = "Client #3" },
new Appointment { Start = DateTime.Today.AddDays(13).AddHours(13), End = DateTime.Today.AddDays(16).AddHours(14), Text = "Client #4" },
new Appointment { Start = DateTime.Today.AddDays(13).AddHours(14), End = DateTime.Today.AddDays(16).AddHours(15), Text = "Client #5" },
};
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));";
}
// Draw a line for new year if start month is not January
if ((args.View.Text == "Planner" || args.View.Text == "Timeline") && args.Start.Month == 12 && startMonth != Month.January)
{
args.Attributes["style"] = "border-bottom: thick double var(--rz-base-600);";
}
//*******************************************************************
// Color the slot if the month number is even (i.e. alternating rows)
if ((args.View.Text == "Planner" || args.View.Text == "Timeline") && args.Start.Month % 2 == 0)
{
args.Attributes["style"] = "background: #dddddd;";
}
//*******************************************************************
// Color the slot depending on number of appointments for that day
if (args.Appointments.Count() > 4)
{
args.Attributes["style"] = "background: #ffabab;";
}
else if (args.Appointments.Count() > 2)
{
args.Attributes["style"] = "background: #ffc988;";
}
else if (args.Appointments.Count() > 0)
{
args.Attributes["style"] = "background: #c3ffc3;";
}
}
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 OnMonthSelect(SchedulerMonthSelectEventArgs args)
{
console.Log($"MonthSelect: MonthStart={args.MonthStart} AppointmentCount={args.Appointments.Count()}");
await Task.CompletedTask;
}
async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
{
console.Log($"AppointmentSelect: Appointment={args.Data.Text}");
await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", args.Data } });
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";
}
}
}
Regards
Paul
1 Like
This is a solution I already have implemented, my burning question is - is it possible to color every other row of slots that don’t have a date? I don’t like how the row is only colored in the slots that have a date property, so it comes off as sloppy … I attached a small slice from the scheduler, note how row isn’t colored entirely, only where the date property exists.
current code
// alternating row bg
if (slotArgs.Start.Date.Month % 2 == 1)
{
style += "background-color: #e8e8e8;";
}
......
slotArgs.Attributes["style"] = style;
If this is not possible, the current solution will be acceptable. Thanks for the help!