Set Different Work Hours for Each Day in Blazor Scheduler
In Blazor, you can set the required work hours in Scheduler, which visually highlights the cells within the specified work-hour range. In the following code example, you can set different work hours for Scheduler cells based on the day of the week by using the SetWorkHoursAsync method. Before setting custom work hours, reset the default work hours by using the ResetWorkHoursAsync method.
@using Syncfusion.Blazor.Schedule
<SfSchedule @ref="@ScheduleRef" TValue=AppointmentData CurrentView="View.Week" Timezone="@TimeZone" ShowWeekend="false" WorkDays="@WorkingDays">
<ScheduleTimeScale Interval="@IntervalInMinutes" SlotCount="4"></ScheduleTimeScale>
<ScheduleGroup Resources="@Resources"></ScheduleGroup>
<ScheduleResources>
<ScheduleResource TItem="DoctorData" TValue="int" DataSource="@DoctorsData" Field="DoctorID" Title="Doctor" Name="Doctors" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
</ScheduleResources>
<ScheduleViews>
<ScheduleView Option="View.Week" StartHour="@StartTime" EndHour="@EndTime"></ScheduleView>
</ScheduleViews>
<ScheduleEventSettings DataSource="@TimeSlots"></ScheduleEventSettings>
<ScheduleEvents TValue="AppointmentData" Created="OnCreated" ActionCompleted="OnActionCompleted" DataBound="OnDataBound"></ScheduleEvents>
</SfSchedule>
@code {
SfSchedule<AppointmentData>? ScheduleRef;
public string TimeZone { get; set; } = "UTC";
public int[] WorkingDays { get; set; } = { 0, 1, 2, 4, 5 };
public int IntervalInMinutes { get; set; } = 60;
public string StartTime { get; set; } = "07:00";
public string EndTime { get; set; } = "17:00";
public bool IsLayoutChanged = false;
public string[] Resources { get; set; } = { "Doctors" };
public List<DoctorData> DoctorsData { get; set; } = new List<DoctorData> {
new DoctorData{ Text = "Nancy", Id= 1, Color = "#df5286" },
new DoctorData{ Text = "Steven", Id= 2, Color = "#7fa900" }
};
List<AppointmentData> TimeSlots = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Daily Medical check up", StartTime = new DateTime(2022, 7, 17, 14, 30, 0) , EndTime = new DateTime(2022, 7, 17, 15, 30, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=SU,MO,TU,TH,FR,SA;INTERVAL=1;", DoctorID = 1 },
new AppointmentData { Id = 2, Subject = "Weekly Medical check up", StartTime = new DateTime(2022, 7, 17, 15, 30, 0) , EndTime = new DateTime(2022, 7, 17, 15, 45, 0), RecurrenceRule = "FREQ=WEEKLY;BYDAY=SU;INTERVAL=1;", DoctorID = 2 }
};
private async Task OnCreated() {
await SetWorkHours(); // Setting work hours after the initial rendering
}
private void OnActionCompleted(ActionEventArgs<AppointmentData> args)
{
// Enable IsLayoutChanged for setting up the work hours
if (args.ActionType == ActionType.ViewNavigate || args.ActionType == ActionType.DateNavigate)
{
IsLayoutChanged = true;
}
}
private async Task OnDataBound(DataBoundEventArgs<AppointmentData> args)
{
if (IsLayoutChanged)
{
await SetWorkHours(); // Setting work hours once the view or date range changes.
}
}
private async Task SetWorkHours()
{
// Get current view dates
List <DateTime> CurrentViewDates = ScheduleRef.GetCurrentViewDates();
List<DateTime> Sunday = new List<DateTime> { CurrentViewDates[0] };
List<DateTime> Monday = new List<DateTime> { CurrentViewDates[1] };
List<DateTime> TuesDay = new List<DateTime> { CurrentViewDates[2] };
List<DateTime> ThursDay = new List<DateTime> { CurrentViewDates[3] };
List<DateTime> Friday = new List<DateTime> { CurrentViewDates[4] };
// Remove work hours from Scheduler
await ScheduleRef.ResetWorkHoursAsync(CurrentViewDates);
// Set work hours for Doctor one
await ScheduleRef.SetWorkHoursAsync(Sunday, "07:00", "12:00", 0);
await ScheduleRef.SetWorkHoursAsync(Monday, "07:00", "12:00", 0);
await ScheduleRef.SetWorkHoursAsync(TuesDay, "09:00", "14:00", 0);
await ScheduleRef.SetWorkHoursAsync(ThursDay, "09:00", "17:00", 0);
await ScheduleRef.SetWorkHoursAsync(Friday, "09:00", "17:00", 0);
// Set work hours for Doctor two
await ScheduleRef.SetWorkHoursAsync(Sunday, "08:00", "13:00", 1);
await ScheduleRef.SetWorkHoursAsync(Monday, "08:00", "13:00", 1);
await ScheduleRef.SetWorkHoursAsync(TuesDay, "10:00", "15:00", 1);
await ScheduleRef.SetWorkHoursAsync(ThursDay, "10:00", "16:00", 1);
await ScheduleRef.SetWorkHoursAsync(Friday, "10:00", "16:00", 1);
}
public class AppointmentData
{
public int Id { get; set; }
public string? Subject { get; set; }
public string? Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string? Description { get; set; }
public bool IsAllDay { get; set; }
public bool IsBlock { get; set; }
public string? RecurrenceRule { get; set; }
public string? RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public int DoctorID { get; set; }
}
public class DoctorData
{
public int Id { get; set; }
public string? Text { get; set; }
public string? Color { get; set; }
}
}