How to apply different work hours for different work days in a resource
This article explains how to apply the different work hours to the resources in React Scheduler.
Configure different work hours:
Follow the steps below to configure the work hours:
Step 1: Create a React scheduler with the resources option by referring to the following user guide link.
https://ej2.syncfusion.com/react/documentation/schedule/resources/#grouping-multi-level-resources
Step 2: Define a variable called workHours and assign the custom start and end hours for resources as follows.
this.workHours1 = [
{ startHour: "07:00", endHour: "16:00" }, // for Sunday
{ startHour: "06:00", endHour: "17:00" }, // for Monday
{ startHour: "05:00", endHour: "18:00" }, // for Tuesday
{ startHour: "06:30", endHour: "19:00" }, // for Wednesday
{ startHour: "05:30", endHour: "20:00" }, // for Thursday
{ startHour: "10:00", endHour: "21:00" }, // for Friday
{ startHour: "13:00", endHour: "22:00" } // for Saturday
];
this.workHours2 = [
{ startHour: "08:00", endHour: "17:00" }, // for Sunday
{ startHour: "09:00", endHour: "18:00" }, // for Monday
{ startHour: "10:00", endHour: "19:00" }, // for Tuesday
{ startHour: "11:00", endHour: "20:00" }, // for Wednesday
{ startHour: "12:00", endHour: "21:00" }, // for Thursday
{ startHour: "13:00", endHour: "22:00" }, // for Friday
{ startHour: "14:00", endHour: "23:00" } // for Saturday
];
this.workHours3 = [
{ startHour: "08:30", endHour: "17:00" }, // for Sunday
{ startHour: "09:00", endHour: "16:00" }, // for Monday
{ startHour: "10:30", endHour: "19:00" }, // for Tuesday
{ startHour: "11:00", endHour: "18:00" }, // for Wednesday
{ startHour: "12:00", endHour: "20:00" }, // for Thursday
{ startHour: "13:00", endHour: "21:00" }, // for Friday
{ startHour: "10:00", endHour: "18:00" } // for Saturday
];
Step 3: Define a variable called isLayoutChanged for setting the work hours to the resource only during the initial time of rendering and navigation operations as follows.
this.islayoutChanged = false;
Step 4: Bind the dataBound and actionComplete events to the schedule element as follows.
<ScheduleComponent ref={schedule => (this.scheduleObj = schedule)} group={{ resources: ['Rooms', 'Owners'] }} dataBound={this.onDataBound.bind(this)}
actionComplete = { this.onActionComplete.bind(this) } >
// Other properties of scheduler come here
</ScheduleComponent>;
Step 5: Define the onDataBound function as follows.
onDataBound(args) {
if (this.islayoutChanged) {
var renderedDates = this.scheduleObj.activeView.getRenderDates();
this.scheduleObj.resetWorkHours();
for (var i = 0; i < renderedDates.length; i++) {
var dayIndex = renderedDates[i].getDay();
if (dayIndex !== 0 && dayIndex !== 6) {
this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours1[dayIndex].startHour, this.workHours1[dayIndex].endHour, 0);
this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours2[dayIndex].startHour, this.workHours2[dayIndex].endHour, 1);
this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours3[dayIndex].startHour, this.workHours3[dayIndex].endHour, 2);
}
}
}
}
Step 6: Define the OnActionComplete function as follows.
onActionComplete(args) {
if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") {
this.islayoutChanged = true;
}
}
Step 7: Run the sample, and Schedule will be rendered with the different work hours for each day of all the resources.
Example: Setting different work hours for each day of each resource
