$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
showCurrentTimeIndicator: false,
highlightBusinessHours: false, //Initially disable the highlightBusinessHours property
currentView: ej.Schedule.CurrentView.Workweek,
group: {
resources: ["Owners"]
},
.............
.............
},
create: "onCreate",
actionComplete: "onCreate" //Bind the appropriate method with create and actionComplete events to apply the color for timecells
});
function onCreate(args) {
if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create") {
var resourceOneStart = 8, resourceOneEnd = 11; //Set the business start and end hour for first resource
var resourceTwoStart = 9, resourceTwoEnd = 12; //Set the business start and end hour for Second resource
var resourceThreeStart = 10, resourceThreeEnd = 13; //Set the business start and end hour for Third resource
this.option("highlightBusinessHours", (this.currentView() != "month") ? false : true);
var trElements = this.$WorkCellDiv.find("tr"); //To get the schedule time cell elements rowwise
for (var i = 0; i < trElements.length; i++) {
var tdElements = $(trElements[i]).find("td"); //Get the schedule timecells columnwise for each row
for (var j = 0; j < tdElements.length; j++) { // loop through the cells
switch (this.currentView()) {
case "day":
switch (j) { // j denotes the column number.
case 0: // Case 0 in day view for first resource
$(tdElements[j]).addClass(((i > (resourceOneStart * 2) - 1) && (i <= (resourceOneEnd * 2) - 1)) ? "e-businesshighlightworkcells" : ""); //Apply the class based on the condition.
break;
case 1: // Case 1 in day view for second resource
$(tdElements[j]).addClass(((i > (resourceTwoStart * 2) - 1) && (i <= (resourceTwoEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
case 2: // Case 2 in day view for third resource
$(tdElements[j]).addClass(((i > (resourceThreeStart * 2) - 1) && (i <= (resourceThreeEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
}
break;
case "week":
switch (j) {
case 0: case 1: case 2: case 3: case 4: case 5: case 6: // Case 0-6 in week view for first resource
$(tdElements[j]).addClass(((i > (resourceOneStart * 2) - 1) && (i <= (resourceOneEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
case 7: case 8: case 9: case 10: case 11: case 12: case 13: // Case 7-13 in week view for second resource
$(tdElements[j]).addClass(((i > (resourceTwoStart * 2) - 1) && (i <= (resourceTwoEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
case 14: case 15: case 16: case 17: case 18: case 19: case 20: // Case 14-20 in week view for third resource
$(tdElements[j]).addClass(((i > (resourceThreeStart * 2) - 1) && (i <= (resourceThreeEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
}
break;
case "workweek":
switch (j) {
case 0: case 1: case 2: case 3: case 4: // Case 0-4 in workweek view for first resource
$(tdElements[j]).addClass(((i > (resourceOneStart * 2) - 1) && (i <= (resourceOneEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
case 5: case 6: case 7: case 8: case 9: // Case 5-9 in workweek view for second resource
$(tdElements[j]).addClass(((i > (resourceTwoStart * 2) - 1) && (i <= (resourceTwoEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
case 10: case 11: case 12: case 13: case 14: // Case 10-14 in workweek view for third resource
$(tdElements[j]).addClass(((i > (resourceThreeStart * 2) - 1) && (i <= (resourceThreeEnd * 2) - 1)) ? "e-businesshighlightworkcells" : "");
break;
}
break;
}
}
}
}
}
</code>
Kindly try the above sample and let us know whether the provided sample meets your requirement and also if you need any further assistance on this.
Regards,
Sarath Kumar P K