Change Background color of Cells

[Andreas Schenk]

Hi!

I want to use the schedule component, which has multiple ressources (persons) where each of them may have different business hours. I know that the current implementation only supports one definition of business-start and -end time.

Is there a work-around like changing the background color of the time cells dynamically during the initialization of the component?

My goal is to show business hours like:

• Monday, resource 1: 08:00 - 11:00
• Monday, resource 2: 09:00 - 12 00

[Sarath Kumar P K]

Hi Andreas,

Thank you for using Syncfusion products.

We have prepared a workaround sample to meet your requirement “changing the background color of the time cells dynamically during the initialization of the component” based on your given data which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/119832/ze/MultiResource1888358042

JS Playground link: http://jsplayground.syncfusion.com/rtrs10bp

In the above sample we have used the following code snippet to apply the color for time cells.
<code>

$("#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

[Andreas Schenk]

Hi Sarath!

thnk you very much - that was exactly what I was looking for :-)

BR

Andreas

[Sarath Kumar P K]

Hi Andreas,

Thanks for your update.

We are glad to hear that the provided solution resolved your requirement.

Please let us know, if you require any further assistance. As always, we will be happy to assist you.

Regards,
Sarath Kumar P K