Setting Different Work Hours on Different Days

[BOB JASON TIAMSIC]

I'm trying to set my schedule working hours on different days/dates

The working hours will be coming from the database.

What I currently did was based from this link, but it does not work because the groupIndex parameter of schedulerObj.setWorkHours ​method is statically defined. 

https://stackblitz.com/edit/angular-ysiqa8-k1dczm?file=app.component.ts

Here's the start and end time that I should implement in the scheduler.

The scheduler is group by name of persons

Here's my actual code, I am calling this method on dataBinding event of scheduler

public setupCalendarWorkHours(): void{

        let currentViewDates = this.scheduleObj.getCurrentViewDates()

        for(var i=0; i< currentViewDates.length; i++){

            if (this.locationHours != null) {

                let hoursObj = this.locationHours.find(time => time.dayID == i)

                if (hoursObj != null) {

                    let currentDay= (currentViewDates[i]).getDay()

                    this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                    switch (currentDay) {

                        case 0:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 1:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 2:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 3:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 4:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 5:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                        case 6:

                            this.scheduleObj.setWorkHours([currentViewDates[i]], hoursObj.startTime, hoursObj.endTime)

                            break;

                    }

                }

            }

        }

    }

[Satheesh Kumar Balasubramanian]

Hi BOB, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Setting Different Work Hours on Different Days" and suspect that you need to give groupIndex value dynamically in setWorkHours method. For the same we have prepared a sample which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-schedule-different-work-hours-u4cpe8?file=app.component.ts 

  

app.component.ts:    

  public workHours1: any = [ 

    { startHour: '07:00', endHour: '16:00' }, // for Sunday 

    { startHour: '06:00', endHour: '17:00', groupIndex: 0 }, // for Monday 

    { startHour: '05:00', endHour: '18:00', groupIndex: 1 }, // for Tuesday 

    { startHour: '06:30', endHour: '19:00', groupIndex: 2 }, // for Wednesday 

    { startHour: '05:30', endHour: '20:00', groupIndex: 0 }, // for Thursday 

    { startHour: '10:00', endHour: '21:00', groupIndex: 1 }, // for Friday 

    { startHour: '13:00', endHour: '22:00' }, // for Saturday 

  ]; 

  public workHours2: any = [ 

    { startHour: '08:00', endHour: '17:00' }, // for Sunday 

    { startHour: '09:00', endHour: '18:00', groupIndex: 2 }, // for Monday 

    { startHour: '10:00', endHour: '19:00', groupIndex: 0 }, // for Tuesday 

    { startHour: '11:00', endHour: '20:00', groupIndex: 1 }, // for Wednesday 

    { startHour: '12:00', endHour: '21:00', groupIndex: 2 }, // for Thursday 

    { startHour: '13:00', endHour: '22:00', groupIndex: 0 }, // for Friday 

    { startHour: '14:00', endHour: '23:00' }, // for Saturday 

  ]; 

  public workHours3: any = [ 

    { startHour: '08:30', endHour: '17:00' }, // for Sunday 

    { startHour: '09:00', endHour: '16:00', groupIndex: 1 }, // for Monday 

    { startHour: '10:30', endHour: '19:00', groupIndex: 2 }, // for Tuesday 

    { startHour: '11:00', endHour: '18:00', groupIndex: 0 }, // for Wednesday 

    { startHour: '12:00', endHour: '20:00', groupIndex: 1 }, // for Thursday 

    { startHour: '13:00', endHour: '21:00', groupIndex: 2 }, // for Friday 

    { startHour: '10:00', endHour: '18:00' }, // for Saturday 

  ]; 

  onDataBound(args): void { 

    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) { 

          this.scheduleObj.setWorkHours( 

            [renderedDates[i]], 

            this.workHours1[dayIndex].startHour, 

            this.workHours1[dayIndex].endHour, 

            this.workHours1[dayIndex].groupIndex 

          ); 

          this.scheduleObj.setWorkHours( 

            [renderedDates[i]], 

            this.workHours2[dayIndex].startHour, 

            this.workHours2[dayIndex].endHour, 

            this.workHours2[dayIndex].groupIndex 

          ); 

          this.scheduleObj.setWorkHours( 

            [renderedDates[i]], 

            this.workHours3[dayIndex].startHour, 

            this.workHours3[dayIndex].endHour, 

            this.workHours3[dayIndex].groupIndex 

          ); 

        } 

      } 

    } 

  } 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

• Replicate the issue in above sample or share issue replicating sample if possible
• Share all schedule related code snippets

Regards, 

Satheesh Kumar B 

[BOB JASON TIAMSIC]

how can I get the groupindex dynamically? and its length?

[BOB JASON TIAMSIC]

I tried this:

this.locationWorkhours contains this:

this.clinicianLength is the number of doctors, thus, the resource length

 public locationWorkHoursArr = []  

onDataBound(args: void) {

        var renderedDates = this.scheduleObj.activeView.getRenderDates();

        this.scheduleObj.resetWorkHours();

        let resourceLength = this.clinicianLength - 1

        for (var i = 0; i <= resourceLength; i++) {

            console.log(this.setUpWorkHoursArray(i))

            for (var i = 0; i < renderedDates.length; i++) {

                var dayIndex = renderedDates[i].getDay();

                if (dayIndex !== 0) {

                    this.scheduleObj.setWorkHours(

                        [renderedDates[i]],

                        this.locationWorkHoursArr[dayIndex].startHour,

                        this.locationWorkHoursArr[dayIndex].endHour,

                        this.locationWorkHoursArr[dayIndex].groupIndex

                    );

                }

            }

            this.locationWorkHoursArr =[]

        }

    }

    public setUpWorkHoursArray(resourceIndex: number) {

        if (this.locationHours != null) {

            for (var j = 0; j < 7; j++) {

                //get row for that day

                let hoursObj = this.locationHours.find(time => time.dayID == j)

                if (hoursObj != null) {

                    let start = hoursObj.startTime.substring(0, hoursObj.startTime.length - 1)

                    let end = hoursObj.endTime.substring(0, hoursObj.endTime.length - 1)

                    if (j == 0) {

                        this.locationWorkHoursArr.push(

                            {

                                startHour: start, endHour: end

                            }

                        )

                    }

                    else {

                        this.locationWorkHoursArr.push(

                            {

                                startHour: start, endHour: end, groupIndex: resourceIndex

                            }

                        )

                    }

                }

            }

        }

        return this.locationWorkHoursArr

    }

[Nevitha Ravi]

Hi Bob, 

Thanks for your update. 

We hope the shared code by you works to set the work hours to specific resources dynamically. Please let us know if you need any further assistance. 

Regards, 

Nevitha