1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Resources working hours configuration

Resources working hours configuration

Hello, 

Is it possible to configure schedule component to have Resources on "y" axis and week dates on "x", without hours.

I need this layout to be able to realize the configuration of working time per employee on a given day.

In attachment you can find a sketch of layout.

KR,
Ivan

Attachment: employeeschedulelayout_792fa5c8.zip

9 Replies
RV Ravikumar Venkatesan Syncfusion Team March 5, 2020 01:56 PM UTC

Hi Ivan, 
  
Greetings from Syncfusion support. 
  
Q1: Tollbar customization 
  
You can customize the toolbar items by using the actionBegin event of the Scheduler and with some css code like the below. 
  
  actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => { 
    if (args.requestType === 'toolbarItemRendering') { 
      let item = args.items[1]; 
      args.items[1] = args.items[3]; 
      args.items[3] = item; 
      for (let i = 0; i < args.items.length; i++) { 
        args.items[i].align = "Right"; 
      } 
    } 
  } 
  
  
  /* Aligning date picker popup */ 
  .e-header-popup.e-popup.e-control.e-popup-open { 
    left: auto !important; 
    right: 0px; 
   } 
  
Q2: Timescale customization 
  
You can disable the time scale in the Scheduler by using the timescale property of the Scheduler like the below code. 
  
  timeScale: { 
    enable: false 
  }, 
  
Q3: Resource customization 
  
You can add resource to the Scheduler by using the resources and group property of the Scheduler like the below code. 
  
  group: { 
    resources: ['MeetingRoom'] 
  }, 
  resources: [{ 
    field: 'RoomId', title: 'Room Type', 
    name: 'MeetingRoom', allowMultiple: true, 
    dataSource: [ 
      { text: 'Room A', id: 1, color: '#98AFC7' }, 
      { text: 'Room B', id: 2, color: '#99c68e' }, 
      { text: 'Room C', id: 3, color: '#C2B280' }, 
      { text: 'Room D', id: 4, color: '#3090C7' }, 
    ], 
    textField: 'text', idField: 'id', colorField: 'color' 
  }], 
  
Q4: First day of week customization 
  
You can set first day of week to Scheduler by using firstDayOfWeek property of the Scheduler like the below. 
  
firstDayOfWeek: 1, 
  
Q5: Date header customization 
  
You can customize the date header of the Scheduler by using dateHeaderTemplate and with some css code like below. 
  
let instance: Internationalization = new Internationalization(); 
(window as TemplateFunction).getDateHeader = (value: Date) => { 
  return instance.formatDate(value, { skeleton: 'Md' }); 
}; 
  
(window as TemplateFunction).getDayHeader = (value: Date) => { 
  return instance.formatDate(value, { skeleton: 'E' }); 
}; 
  
interface TemplateFunction extends Window { 
  getDateHeader?: Function; 
  getDayHeader?: Function; 
} 
  
dateHeaderTemplate: '<div class="date-text">${getDateHeader(data.date)}</div><div class="day-text">${getDayHeader(data.date)}</div>', 
  
/* Aligning date header template contents */ 
    .date-text, .day-text { 
      text-align: center; 
    } 
  
  
Kindly try the above sample and get in touch with us If you would need any further assistance. 
  
  
  
Regards, 
Ravikumar Venkatesan 


IV Ivan March 6, 2020 03:25 PM UTC

Thanks Ravikumar,

I will try that! 

Awesome support!

KR,
Ivan

VM Vengatesh Maniraj Syncfusion Team March 9, 2020 05:22 AM UTC

Hi Ivan, 

Thanks for the update. 

Please get in touch with us if you would require any further assistance. 

Regards, 
Vengatesh 


IV Ivan March 10, 2020 06:09 PM UTC

Hello, 

how can I remove horizontal and vertical scroll?

Vertical scroll I removed with updated dateHeaderTemplate - data in one row. 

EDIT:

Is it possible to set workHours on Timeline view ( set if day is available or not )?

As I see:
timeScale: {
   enable: false
},
"kills":
_scheduler.setWorkHours([currentViewDates[i]], '08:00', '23:59', j);
Expected behaviour is: 

for all non working days ( list of dates ) I want to have disabled inputs on above calendar.

eg. on Christmas is field disabled for all resources

KR,
Ivan

RV Ravikumar Venkatesan Syncfusion Team March 11, 2020 02:18 PM UTC

Hi Ivan, 
  
Thanks for the update. 
  
how can I remove horizontal and vertical scroll? 
  
We could not remove the horizontal scroll bar in Timeline views but we can remove the vertical scroll bar. 
  
Is it possible to set workHours on Timeline view ( set if day is available or not )? 
  
Yes, it is possible to set workHours in Timeline views. But it will not reflect when we disable the timescale property 
  
for all non-working days ( list of dates ) I want to have disabled inputs on above calendar. 
  
We have validated this query and it could be possible by making use of IsBlock fields for the event object like below, 
  
[data.ts] 
export let nonWorkingDays: Object[] = [ 
  { 
    Id: 1, 
    Subject: "Christmas", 
    StartTime: new Date(2020, 11, 25), 
    EndTime: new Date(2020, 11, 26), 
    RoomId: [1, 2, 3, 4], 
    IsBlock: true 
  }, { 
    Id: 2, 
    Subject: "New year", 
    StartTime: new Date(2020, 0, 1), 
    EndTime: new Date(2020, 0, 2), 
    RoomId: [1, 2, 3, 4], 
    IsBlock: true 
  } 
]; 
  
  
Kindly try the above sample and get back to us for further assistance. 
  
Regards, 
Ravikumar Venkatesan 


IV Ivan March 11, 2020 09:16 PM UTC

Hello, 

I hide scroll with overflow: hidden, nonworkingdays realized with isBlock as You suggested. 

I have a few more questions. 

How can I set to have only one event per day per resource. 
     - disable to create more than one event 
     - event need to occupy whole e-work-cell

Thanks in advance.

KR,
Ivan

RV Ravikumar Venkatesan Syncfusion Team March 12, 2020 06:54 AM UTC

Hi Ivan, 

Thanks for the update. 

Disable creating of more than one event in the particular slot 
 
You can disable the adding of event in the slot that contains event already by using the isSlotAvailable method like the below. 

actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => { 
    if (args.requestType === 'toolbarItemRendering') { 
      let item = args.items[1]; 
      args.items[1] = args.items[3]; 
      args.items[3] = item; 
      for (let i = 0; i < args.items.length; i++) { 
        args.items[i].align = "Right"; 
      } 
    } 
    let isEventChange: boolean = (args.requestType === 'eventChange'); 
    if ((args.requestType === 'eventCreate' && (<Object[]>args.data).length > 0) || isEventChange) { 
      let eventData: { [key: string]: Object }[] = (isEventChange) ? [args.data] : [].slice.call(args.data); 
      for (let i = 0; i < eventData.length; i++) { 
        let eventField: EventFieldsMapping = scheduleObj.eventFields; 
        let startDate: Date = eventData[i][eventField.startTime] as Date; 
        let endDate: Date = eventData[i][eventField.endTime] as Date; 
        let resourceIndex: number = [1, 2, 3, 4].indexOf(eventData[i].RoomId as number); 
        if(!scheduleObj.isSlotAvailable(startDate, endDate, resourceIndex)) { 
          args.cancel = true; 
          break; 
        } 
      } 
    } 
  } 

Event need to occupy whole work cell 

You can set the event to occupy the whole work cell by using the enableMaxHeight property of eventSettings model like the below. 

  eventSettings: { 
    enableMaxHeight: true, 
    dataSource: <Object[]>extend([], nonWorkingDays, null, true), 
  }, 



Kindly try the above sample and get in touch with us If you would need any further assistance. 


Regards, 
Ravikumar Venkatesan 


IV Ivan March 13, 2020 10:12 AM UTC

Thanks for support!

Everything works. 

instead of actionBegin I used popupOpen, to prevent a new window from opening.

VM Vengatesh Maniraj Syncfusion Team March 16, 2020 04:54 AM UTC

Hi Ivan, 

You are most welcome. 

Please get in touch with us if you would require any other assistance. 

Regard, 
Vengatesh. 


Loader.
Up arrow icon