1. Home
  2. Forum
  3. React - EJ 2
  4. Can we have diffrent working hours for diffrent technician.

Can we have diffrent working hours for diffrent technician.

We set the working hours by the below configuration.
workHours={{ highlight: true,
  start: startActiveHour || '08:00',
  end: endActiveHour || '18:00' }}

But it schedule the working hours for all technician. Can we have diffrent working hours for diffrent technician?

9 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team August 21, 2020 07:13 AM UTC

Hi Sudhanshu, 

Greetings from Syncfusion Support..! 

We have validated your shared query “But it schedule the working hours for all technician. Can we have diffrent working hours for diffrent technician?” at our end. And we suspect that your requirement is to set the different working hours for each resource in the Scheduler. And for that, we have prepared a sample and it can be viewed from the following link. 


And for further reference, kindly refer the below UG link, 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

SJ Sudhanshu Jain August 21, 2020 10:44 AM UTC

This is fine . But we need diffrent working hours on diffrent days even.

So a technician's working hour can be 9am - 6pm on one day but next day it can be 9am-7pm.

Please provide solution. 

VM Vengatesh Maniraj Syncfusion Team August 24, 2020 04:52 AM UTC

Hi Sudhanshu, 

Thanks for the update. 

We checked your requirement that “different work hours for different days” and we suggest you  please refer to achieve this requirement. 


Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 
Vengatesh  


SJ Sudhanshu Jain August 24, 2020 11:14 AM UTC

Still last reply does not complete our requirement.


Requirment 1#: Can we have specific working hours for specific technician on specific date.

example : Technician(A) will have working hour on 25Aug2020 is 8am to 10pm and on 26aug2020 will have 7am to 8 pm . Rest all will be as usual.

So we want to have diffrent working hours for diffrent technician on diffrent date, not like weekly cycled or monthly cycled.

Requirment 2 # Can we put background color in the specific time cell for specific technician on specific date .

example : Technician(B) will have blue backgroud time cell from 6pm to 7pm on 28aug2020.


Please go by specific requirment and let us know whether above are possible . Thanks  

HB Hareesh Balasubramanian Syncfusion Team August 25, 2020 03:01 PM UTC

Hi Sudhanshu, 
  
Thanks for the update. 
  
We have validated both the requirements at our end. And for that, we have prepared a sample. And the sample can be viewed from the following link. 
  
  
Req 1: Technician(A) will have working hour on 25Aug2020 is 8am to 10pm and on 26aug2020 will have 7am to 8 pm . Rest all will be as usual. 
Req 2: Technician(B) will have from 6pm to 7pm on 28aug2020. 
  
This query can be achieved using dataBound and actionComplete events of the Scheduler. Kindly refer the below code snippets for further refence and the same can be viewed in the above sample. 
  
Code snippets: 
  onDataBound(args) { 
    if (this.islayoutChanged) { 
      var renderedDates = this.scheduleObj.activeView.getRenderDates(); 
      this.scheduleObj.resetWorkHours(); 
      for (var i = 0; i < renderedDates.length; i++) { 
        var dayIndex = renderedDates[i].getDay(); 
        if (dayIndex !== 0 && dayIndex !== 6) { 
          if (new Date(2020, 7, 25).getTime() == renderedDates[i].getTime()) { 
            this.scheduleObj.setWorkHours([renderedDates[i]], "08:00", "22:00", 0); 
          } else if (new Date(2020, 7, 26).getTime() == renderedDates[i].getTime()) { 
            this.scheduleObj.setWorkHours([renderedDates[i]], "07:00", "20:00", 0); 
          } else { 
            this.scheduleObj.setWorkHours([renderedDates[i]], "09:00", "18:00", 0); 
          } 
          if (new Date(2020, 7, 28).getTime() == renderedDates[i].getTime()) { 
            this.scheduleObj.setWorkHours([renderedDates[i]], "06:00", "19:00", 1); 
          } else { 
            this.scheduleObj.setWorkHours([renderedDates[i]], "09:00", "18:00", 1); 
          } 
        } 
      } 
      this.islayoutChanged = false; 
      var ele = document.querySelectorAll(".TechnicianB"); 
      for (var i = 0; i < ele.length; i++) { 
        var renDate = new Date(parseInt(ele[i].getAttribute("data-date"))); 
        if (renDate.setHours(0, 0, 0, 0) == new Date(2020, 7, 28).getTime()) { 
          ele[i].classList.add("custom"); 
        } 
      } 
    } 
  } 
  
Req 2: Technician(B) will have blue backgroud time cell.  
  
This query can be achieved using CSS property and kindly refer the below code snippets for further reference and the same can be viewed in the above sample. 
  
Code snippet: 
.custom-work-days.e-schedule .e-month-view .e-work-days.TechnicianB.custom, 
.custom-work-days.e-schedule .e-vertical-view .e-work-hours.TechnicianB.custom { 
    background-color: #deecfc; 
} 
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Hareesh 


NB Nicolas Beaumer March 18, 2021 01:29 PM UTC

Hello,
I have been able to implement the difference work hours per technician.
However I am facing an issue that I don't see in the last stackblitz your provided:
Non-work hours only are correctly greyed out in the schedule for all technicians but as soon as I create an appointment, all cells become grey thus loosing the indication of work hours and non work hours.
Please note that I have the issue ONLY when I combine that functionality with the evenSettings template. If I use the template I created as a tooltip template, I don't have the issue.

One other difference I noted is my implementation of "group={{ resources: ['Conferences'] }}
In the stackblitz, you add it at the top level configuration. In my case, I don't want the resource grouping in all views. Therefore I add it for the selected views like this:
 <ViewDirective option='Day'
              group={{ resources: ['Conferences'] }} />

This way of performing the resources grouping is indicated in the documentation : https://ej2.syncfusion.com/react/documentation/schedule/views/  section "resource grouping"

In your stackblitz example, it is not possible to define the resources grouping per view. It generates an error if only 1 view among the 3 has the resource grouping set (and the one at the top level is removed ).





Anyway, my main goal is to manage to get the work hours work while having an eventSettings template.
Here is my scheduler without appointment. Please note that I set the work hours dynamically depending on the rendered dates as described in one of your replies.


Here is what happens when I add an appointment - all cells are greyed out:


Could you provide a stackblitz showing the different work hours/days per technician as well as an EventSettings template ?

Thank you very much!
Nicolas


HB Hareesh Balasubramanian Syncfusion Team March 19, 2021 03:03 PM UTC

Hi Nicolas, 

Thanks for the update. 

In our previously shared sample, we have applied custom work hours for the particular dates but your scenario is to “render the custom work hours for each resource with event template for the Scheduler”. And for the same, we have prepared a sample using resources and eventTemplate properties of the Scheduler, which can be viewed from the following link. 

UG links: 

[resources snippets] 
    this.resourceData = [ 
      { 
        text: "Will Smith", 
        id: 1, 
        color: "#ea7a57", 
        startHour: "07:00", 
        endHour: "15:00" 
      }, 
      { 
        text: "Alice", 
        id: 2, 
        color: "rgb(53, 124, 210)", 
        startHour: "08:00", 
        endHour: "17:00" 
      }, 
      { 
        text: "Robson", 
        id: 3, 
        color: "#7fa900", 
        startHour: "10:00", 
        endHour: "16:00" 
      } 
    ]; 
  } 

[eventTemplate snippets] 
  eventTemplate(props) { 
    return ( 
      <div className="template-wrap"> 
        <div className="subject">Title : {props.Subject}</div> 
      </div> 
    ); 
  } 

Note: we have applied different colors to work hours for each resource for better understanding 

And for your reference, we have taken a screenshot of the above sample, 
 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh 


Marked as answer
NB Nicolas Beaumer March 22, 2021 10:46 AM UTC

Hello Hareesh,

Thank you for your reply and for the code example.

What you provided indeed works. However, you changed the way the workhours are set. In your last example, they are the same every day for each resources.
In the solution code you provided as an anwser to the initial question from the thread, they are different everyday for every resource. Therefore the event onDataBound(args) is used to set the workhours for each rendered date.

Can you provide a code sample based on: 
https://stackblitz.com/edit/react-h25y4i-mxbuno?file=index.js
that uses an eventSetting template

This is precisely that set up that triggers the loss of the indication of the work-hours and non work hours when an appointment is created

Thanks!
Nicolas


HB Hareesh Balasubramanian Syncfusion Team March 23, 2021 04:22 PM UTC

Hi Nicolas, 

Thanks for the update. 

We have modified your shared sample to reproduce your reported problem but unfortunately, we were unable to reproduce your reported problem and the sample can be downloaded from the following link. We have tried the following ways to replicate the issue at our end. 

  1. We have included the event template for the shared sample but the customized work hours for those particular dates are working properly at our end.
  2. And also we have ensured your reported problem by loading the events on initial loading and also by performing CRUD actions in it.


Kindly refer to the above sample, if the issue persists still share the below details to validate your reported issue and serve you better. 
 
  • Kindly confirm whether the above-modified sample is working properly at your end?
  • If the issue still exists at your end, kindly share the issue replicating steps.

We will happy to assist you..! 

Regards, 
Hareesh 


Loader.
Up arrow icon