Using the ejschedule control, it seems that it is not possible to set multiple working hours?

[Vijay Ravi]

Hi Aquan,

Based on your requirements, we have prepared a Angular Scheduler sample that demonstrates how to set multiple workhours for each day. We recommend using the dataBound event to configure different work hours for each day, as illustrated in the code snippet below. Please refer to the attached sample for further reference. We encourage you to try it out.

[app.component.html]
 

<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'

  [selectedDate]="selectedDate"  (dataBound)=" onDataBound($event)"

(actionComplete)="onActionComplete($event)">

  <e-views>

  <e-view option="Week"></e-view>

    <e-view option="TimelineDay"></e-view>

    <e-view option="TimelineWeek"></e-view>

    <e-view option="TimelineWorkWeek"></e-view>

    <e-view option="TimelineMonth"></e-view>

  </e-views>

</ejs-schedule>

[app.component.ts]
 

 

public workHours: Record<string, any>[] = [

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Sunday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Monday 

    { startHour1: "10:00", endHour1: "12:00", startHour2: "13:00", endHour2: "14:00" }, // for Tuesday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Wednesday 

    { startHour1: "08:00", endHour1: "12:00", startHour2: "13:00", endHour2: "18:00" }, // for Thursday 

    { startHour1: "12:00", endHour1: "15:00", startHour2: "17:00", endHour2: "20:00" }, // for Friday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" } // for Saturday 

  ];

  public isLayoutChanged = false;

  public onDataBound() {

    if (this.isLayoutChanged) {

      // Getting current view dates

      let renderedDates = this.scheduleObj.getCurrentViewDates();

      // Resetting the default Schedule work hours

      this.scheduleObj.resetWorkHours();

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

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

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex]['startHour1'], this.workHours[dayIndex]['endHour1']);

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex]['startHour2'], this.workHours[dayIndex]['endHour2']);

      }

      this.isLayoutChanged = false;

    }

  }

  public onActionComplete(args: ActionEventArgs) {

    if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") {

      this.isLayoutChanged = true;

    }

  }

Sample link: ej2-angular-schedule-set-different-work-hours-for-each-day (forked) - StackBlitz

DataBound API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[aquan]

HI  

https://ej2.syncfusion.com/angular/documentation/api/schedule/#workhours

Question 1: 

I want to set multiple time periods as working hours in the same day, such as 9:00-12:30 and 14:00-19:00, and make them effective. I use this attribute, but it seems that I can't meet my needs, so how can I achieve it?

Question 2:

I want to implement the custom working time period as shown in the figure below. Can I achieve this effect by changing workDays and workhours?

[aquan]

HI  

By the way, I want to ask, the international language problem of this control is not responded to. Is it due to the version I use? Or is it caused by other problems?

https://www.syncfusion.com/forums/196905/the-calendar-control-uses-internationalized-languages-aaand-there-is-an-error-loading-the

[Vijay Ravi]

Hi Aquan,

Query 1: I want to set multiple time periods as working hours in the same day, such as 9:00-12:30 and 14:00-19:00, and make them effective. I use this attribute, but it seems that I can't meet my needs, so how can I achieve it?

Based on your requirements, we have prepared a Angular Scheduler sample that demonstrates how to set multiple workhours for each day. We recommend using the dataBound event to configure different work hours for each day, as illustrated in the code snippet below. Please refer to the attached sample for further reference. We encourage you to try it out.

[app.component.html]
 

<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'

  [selectedDate]="selectedDate" (dataBound)="onDataBound($event)" (actionComplete)="onActionComplete($event)"

  [group]="group" >

  <e-resources>

    <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'

      name='Categories' textField='text' idField='id' groupIDField='groupId' colorField='color'>

    </e-resource>

  </e-resources>

  <e-views>

  <e-view option="Week"></e-view>

    <e-view option="TimelineDay"></e-view>

    <e-view option="TimelineWeek"></e-view>

    <e-view option="TimelineWorkWeek"></e-view>

    <e-view option="TimelineMonth"></e-view>

  </e-views>

</ejs-schedule>

[app.component.ts]
 

 

public workHours: Record<string, any>[] = [

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Sunday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Monday 

    { startHour1: "10:00", endHour1: "12:00", startHour2: "13:00", endHour2: "14:00" }, // for Tuesday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" }, // for Wednesday 

    { startHour1: "08:00", endHour1: "12:00", startHour2: "13:00", endHour2: "18:00" }, // for Thursday 

    { startHour1: "12:00", endHour1: "15:00", startHour2: "17:00", endHour2: "20:00" }, // for Friday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "15:00", endHour2: "16:00" } // for Saturday 

  ];

  public isLayoutChanged = false;

  public onDataBound() {

    if (this.isLayoutChanged) {

      // Getting current view dates

      let renderedDates = this.scheduleObj.getCurrentViewDates();

      // Resetting the default Schedule work hours

      this.scheduleObj.resetWorkHours();   

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

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

          // Setting up work hours for each resource

          for (let j = 0; j < this.categoryDataSource.length; j++) {

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex]['startHour1'], this.workHours[dayIndex]['endHour1'], j);

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex]['startHour2'], this.workHours[dayIndex]['endHour2'], j);

          }

      }

      this.isLayoutChanged = false;

    }

  }

  public onActionComplete(args: ActionEventArgs) {

    if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") {

      this.isLayoutChanged = true;

    }

  }

Sample link: ej2-angular-schedule-set-different-work-hours-for-each-day (forked) - StackBlitz

DataBound API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound

Query 2: I want to implement the custom working time period as shown in the figure below. Can I achieve this effect by changing workDays and workhours?

We have checked and validated your reported query. When using resource scenarios, you can configure different working days and working hours for each resource in the Scheduler. Refer the below shared documentation for your reference:

• Using the workDaysField property to map the working days from the resource dataSource.

• Setting different working hours for each resource using the startHourField and endHourField properties, which map the corresponding start and end hour fields from the resource dataSource.

Setting different workdays UG: https://ej2.syncfusion.com/angular/documentation/schedule/resources#set-different-work-days

Setting different workhours UG: https://ej2.syncfusion.com/angular/documentation/schedule/resources#set-different-work-hours

Workdaysfield API: https://ej2.syncfusion.com/angular/documentation/api/schedule/resources/#workdaysfield
 

Starthourfield API: https://ej2.syncfusion.com/angular/documentation/api/schedule/resources/#starthourfield

EndHourfield API: https://ej2.syncfusion.com/angular/documentation/api/schedule/resources/#endhourfield


Query 3: By the way, I want to ask, the international language problem of this control is not responded to. Is it due to the version I use? Or is it caused by other problems?

You have created a new forum post for the internationalized languages issue, and any further updates related to that will be provided in that forum thread. So, please follow that forum post for further updates regarding your query.

https://www.syncfusion.com/forums/196905/the-calendar-control-uses-internationalized-languages-aaand-there-is-an-error-loading-the

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[aquan]

HI  Vijay ，

      

    In fact, the second question is the same as the first one. The second one is to embody the setting of the first one. The startHourField and EndHourField of resources can only be set to one.

I set it in the custom interface of the second question, and then apply the setting to my schedule  control.

For example: working days are Monday to Wednesday, and the working hours are 8:00-12:00, 14:00-18:00, 20:00-24:00, etc.;

And the working hours on Thursday may be 9:00-12:30, 13:30-18:00.

....

Then the setting may be valid for the current month, and other months or years are different settings.

It seems that only the "onDataBound" event refresh can achieve my effect, and no other properties can be set directly.

I am trying to use "onDataBound" to implement my function.

[Vijay Ravi]

Hi aquan,

In the Syncfusion Scheduler, there is currently no built-in property available to set multiple working hours for multiple days. However, this customization can be achieved by using the dataBound event of the Schedule component.

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[aquan]

HI  Vijay 

  Using dataBound can realize the layout of my segmented working time, thank you

[Vijay Ravi]

Hi aquan,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards,
Vijay