How to change row background color?

[Jeswin Raj]

Hi - I'm trying to create time windows and assign a background color for each time window (it could be a 2 hour or 3 hour time windows). Can you please let me know or point me to a tutorial on how to specify the background color? Thanks. 

[Karthigeyan Krishnamurthi]

Hi Jeswin,   

   

Thank you for contacting Syncfusion support.   

   

We were unclear about your requirement, kindly share the following information with us to proceed further.   

  

1.       Is quick window is mentioned as time window whose background color wants to be changed?   

2.       More information like image/video demo which clearly depicts your requirement about time window.   

  

Regards,   

Karthigeyan   

[Jeswin Raj]

Hi Karthigeyan,

The screenshot in this thread is just an image to show how the cells should have a horizontal background color. Our requirement is - the dispatcher creates 'job windows' which is a 2 or 3 hour time frames. When a customer calls in to schedule appointment, the dispatcher will ask which time-frame you need based on the availability. For example - there can be a job window named "Early AM" (7:00 - 9:00am) or "Late Evening" (5:00 - 7:00PM). We need to distinguish these job windows and display them in a different background color. These backgrounds needs to be spread horizontally across. Hope I made it clear. Please let me know if you need any further clarifications.  

Also I have one more issue - not sure if I can post it in this thread or create a new one. I have a custom popup window. I am able to create an appointment with it. However I am not able to 'Edit' or 'Update' an appointment using the custom schedule window. The data that is being edited is not equivalent to the corresponding scheduling ID and the updated data is not saving with the proper ID. How do I overcome this issue?

Thanks for the help,

Jeswin

[Karthigeyan Krishnamurthi]

Hi Jeswin,   

   

Thanks for your update.   

   

We have prepared a sample for your requirement “background color  for row“ which can be download from the below location:   

http://www.syncfusion.com/downloads/support/forum/126137/ze/Sample-810715257   

   

By default, cell(s) can be customized using QueryCellInfo feature, kindly visit the below link to know more about the feature. In the above sample initially cells background colors are changed using QueryCellInfoevent.    

When an appointment/cell is clicked, particular cell’s background color is applied to an appointment window’s background. Kindly refer to the following code example used in the above sample.   

UG link: https://help.syncfusion.com/aspnet/schedule/customization#scheduler-customization-using-querycellinfo 

 

<Code> 

function bgColor() { // this function will be called when the appointment/cell is clicked/double clicked             

            if (StartTime.getHours() >= 9 && StartTime.getHours() < 12) { 

                $("#customWindow_wrapper").children().css("background-color", "#ffe9cc"); 

                $("#customWindow").css("background-color", "#ffe9cc"); 

                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#ffe9cc"); 

                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#ffe9cc"); 

            } 

            else if (StartTime.getHours() >= 12 && StartTime.getHours() < 15) { 

                $("#customWindow_wrapper").children().css("background-color", "#ebf1c4"); 

                $("#customWindow").css("background-color", "#ebf1c4"); 

                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#ebf1c4"); 

                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#ebf1c4"); 

            } 

            else if (StartTime.getHours() >= 15 && StartTime.getHours() < 18) { 

                $("#customWindow_wrapper").children().css("background-color", "#dcf1f8"); 

                $("#customWindow").css("background-color", "#dcf1f8"); 

                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", "#dcf1f8"); 

                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", "#dcf1f8"); 

            } 

            else { 

                $("#customWindow_wrapper").children().css("background-color", ""); 

                $("#customWindow").css("background-color", ""); 

                $("#Schedule1AppointmentQuickWindow_wrapper").css("background-color", ""); 

                $("#Schedule1AppDetailsWindow_wrapper").css("background-color", ""); 

            } 

        } 

</Code> 

If we have misunderstood your requirement or else if the above sample doesn’t satisfy your requirement, kindly share the image/video demo/code example which clearly depicts your requirement.   

   

Regards,   

Karthigeyan   

[Jeswin Raj]

Hi Karthigeyan - appreciate your detailed response.    

Not sure if I should be posting the below question in this thread or create a new one - 

Also I have one more issue regarding custom popup window. I am able to create an appointment with it. However I am not able to 'Edit' or 'Update' an appointment using the custom schedule window. The data that is being edited is not equivalent to the corresponding scheduling ID and the updated data is not saving with the proper ID. How do I overcome this issue? Please let me know.

Thanks

[Karthigeyan Krishnamurthi]

Hi Jeswin,    

    

Thanks for your update.   

Sample provided in the previous update uses custom window, where an appointment is correctly saved, edited and updated. In custom window when the submit button is clicked, appointment will be saved using public saveAppointment function and kindly ensure whether an appointment object is formed correctly with the updated information before calling the public function with an appointment object as shown below. 

<Code> 

function save() { 

            --------- 

            --------- 

            var obj = {}; 

            // forming appointment object with the required information 

            obj["Id"] = $("#customId").val() == "" ? $("#customId").val() : parseInt($("#customId").val()); 

            obj["Subject"] = $("#subject")[0].value; 

            obj["Description"] = $("#customdescription")[0].value; 

            obj["StartTime"] = new Date($("#StartTime")[0].value); 

            obj["EndTime"] = new Date($("#EndTime")[0].value); 

            --------- 

            --------- 

            $("#customWindow").ejDialog("close"); 

            var object = $("#Schedule1").data("ejSchedule"); 

            object.saveAppointment(obj); // calling public save function with the appointment object 

            clearFields(); 

        } 

</Code> 

Kindly try the above suggestion and if still issue persist at your end, share the code example/ sample (if possible) to proceed further. 

Regards, 

Karthigeyan 

[Jeswin Raj]

Hi Karthigeyan - deeply appreciate the sample and your awesome support. Regarding the background color - for the JavaScript Schedule component - would it be the same 'QueryCellInfo' to change the background row color or is it done through CSS? Please let me know. Would be great if you have a link or a sample for it. Thanks.  

[Karthigeyan Krishnamurthi]

Hi Jeswin,       

       

Thanks for your update.    

   

Suggested work around to customize the cell in our pervious update can be used same for JavaScript platform with the help of queryCellInfo event. Kindly visit the below links to know more about the event.   

  

Online Sample Link: http://js.syncfusion.com/demos/web/#!/bootstrap/schedule/cellformatting   

Online UG Link: https://help.syncfusion.com/js/schedule/customization#scheduler-customization-using-querycellinfo   

   

Regards,   

Karthigeyan   

 

[Ben Martin]

You may want to shade the rows in different colors based on the cell value in the column to see the most important orders at a glance. This can be easily done using Excel Conditional Formatting.Start with selecting the cells the background color of which you want to change.

1. Create a new formatting rule by clicking Conditional Formatting
2. Start with selecting the cells the background color of which you want to change

   Create a new formatting rule by clicking Conditional Formatting > New Rule… on the Home tab.
   
   In the "New Formatting Rule" dialog window that opens, choose the option "Use a formula to determine which cells to format" and enter the following formula in the "Format values where this formula is true" field: =$C2>4
   
   Click the "Format…" button and switch to Fill tab to choose the background color. If the default colors do not suffice, click the "More Colors…" button to pick the one to your liking, and then click OK twice.

   I hope this helps!
   Ben Martin
   
   

[Nevitha Ravi]

Hi Ben, 

Greetings from Syncfusion Support. 

We would like to let you know that previously we have suggested queryCellInfo event to change the background of the work cells in scheduler. We hope that you have shared the solution for spreadsheet. We appreciate and thank you for looking into the query, please get back to us if you need any assistance from us. We will be happy to assist you. 

Regards, 

Nevitha