How to set different background colors in JavaScript Schedule?
This article explains you about, how to apply different background colors to the work hours of each resource in the JavaScript Schedule.
Step 1: Create a sample with Scheduler component. A brief explanation about getting started is available here.
Step 2: To achieve this, you have to handle an additional field in resource object to maintain the different work hours.
For example, In the following code snippet, availableTime is an additional field.
public resourceDataSource: Object[] = [
{
text: "Will Smith",
id: 1,
color: "#ea7a57",
workDays: [1, 2, 4, 5],
startHour: "08:00",
endHour: "15:00",
availableTime: [
//different appointment time with color
{ startTime: "08:00", endTime: "10:00", color: "#efb6b6" },
{ startTime: "10:00", endTime: "12:00", color: "#abe6d6" },
{ startTime: "02:00", endTime: "16:00", color: "#f3e4ae" }
]
},
{
text: "Alice",
id: 2,
color: "rgb(53, 124, 210)",
workDays: [1, 3, 5],
startHour: "08:00",
endHour: "17:00",
availableTime: [
//different appointment time with color
{ startTime: "08:00", endTime: "10:00", color: "#d6b9ec" },
{ startTime: "10:00", endTime: "12:00", color: "#97bf97" },
{ startTime: "02:00", endTime: "16:00", color: "#d0e6c3" }
]
},
{
text: "Robson",
id: 3,
color: "#7fa900",
startHour: "08:00",
endHour: "16:00",
availableTime: [
//different appointment time with color
{ startTime: "08:00", endTime: "10:00", color: "#80a6d6" },
{ startTime: "10:00", endTime: "12:00", color: "#abe6d6" },
{ startTime: "02:00", endTime: "16:00", color: "#e2dbf3" }
]
}
];
Step 3: Bind the renderCell event to apply colors as like the following code snippet.
App.component.html
<ejs-schedule #scheduleObj cssClass='schedule-group-custom-work-days' width='100%' height='850px'
[currentView]="currentView" [group]="group" [timeScale]="timeScale" [selectedDate]="selectedDate"
(renderCell)="onRenderCell($event)" [eventSettings]="eventSettings" [allowResizing]="allowResizing"
[allowDragAndDrop]="allowDragDrop">
<ng-template #timeScaleMajorSlotTemplate let-data>
<div class="majorTime">{{getMajorTime(data.date)}}</div>
</ng-template>
<ng-template #timeScaleMinorSlotTemplate let-data>
<div class="minorTime">{{getMinorTime(data.date)}}</div>
</ng-template>
<ng-template #resourceHeaderTemplate let-data>
<div class='template-wrap'>
<div class="resource-image {{getDoctorImage(data)}}"></div>
<div class="resource-details">
<div class="resource-name">{{getDoctorName(data)}}</div>
<div class="resource-designation">{{getDoctorLevel(data)}}</div>
</div>
</div>
</ng-template>
<e-views>
<e-view option="Day"></e-view>
</e-views>
<e-resources>
<e-resource field='DoctorId' title='Doctor Name' name='Doctors' [dataSource]='resourceDataSource' textField='text'
idField='id' colorField='color' workDaysField='workDays' startHourField='startHour' endHourField='endHour'>
</e-resource>
</e-resources>
</ejs-schedule>
Step 4: In the RenderCell event, extract the work hours cell rendering and apply the bound color variable. Refer the following code snippet to achieve it.
App.component.ts
onRenderCell(args: RenderCellEventArgs): void {
if (args.element.classList.contains("e-work-hours")) {
//get the date of the cell
let cellDate: Date = new Date(
parseInt(args.element.getAttribute("data-date"))
);
//get the resource index
let resourceIndex: number = parseInt(
args.element.getAttribute("data-group-index")
);
//collect the available time object from resource collection
let differentTimeData: any = this.scheduleObj.getResourcesByIndex(
resourceIndex
).resourceData.availableTime;
//apply the color based on the time
for (let i = 0; i < differentTimeData.length; i++) {
let startTimeDetails = differentTimeData[i].startTime.split(":");
let endTimeDetails = differentTimeData[i].endTime.split(":");
let startTime: Date = new Date(
new Date(cellDate.getTime()).setHours(
parseInt(startTimeDetails[0], parseInt(startTimeDetails[1]))
)
);
let endTime: Date = new Date(
new Date(cellDate.getTime()).setHours(
parseInt(endTimeDetails[0], parseInt(endTimeDetails[1]))
)
);
if (cellDate.getTime() >= startTime.getTime() && cellDate.getTime() < endTime.getTime()) {
(args.element as HTMLElement).style.background = differentTimeData[i].color;
break;
}
}
}
}
Step 5: Run the project.
Output:
Figure 1: The Schedule with multiple resourced and different backgrounds to work hours.
Sample: You can download the sample from here.
Conclusion
I hope you enjoyed learning about how to set different background colors to work hours in JavaScript Schedule.
You can refer to our JavaScript Schedule feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
