We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Change Background color of Cells

Thread ID:

Created:

Updated:

Platform:

Replies:

119832 Aug 5,2015 05:07 PM Aug 8,2015 12:41 AM ASP.NET MVC 3
loading
Tags: Schedule
Andreas Schenk
Asked On August 5, 2015 05:07 PM

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 [Syncfusion]
Replied On August 6, 2015 08:42 AM

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
Replied On August 7, 2015 11:11 AM

Hi Sarath!

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

BR
Andreas

Sarath Kumar P K [Syncfusion]
Replied On August 8, 2015 12:41 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;