Customization of Multiple Resources view

We really enjoy your product, but we have couple important customization requirements and we wonder if they are possible with your control. We would really appreciate a guidance if the customization is indeed possible.

We are only using DAY view, so we present resources (doctors), and their appointments (patients) for a given day.

Thank you!

Hi Karol, 

 

Syncfusion greetings. 

 

We have validated the reported cases at our end and please find the details below. 

 

Q1: It is not possible to split up the column based on the events type in single column. 

 

Q2: It is possible to drag the events from outside the Schedule and we already demonstrate sample in online. Please find the below sample link to achieve this case. 

https://ej2.syncfusion.com/angular/demos/#/material/schedule/external-drag-drop 

 

Q3: We can remove the displaying of the day row by making of dataBound event. Please find the below sample and code snippet 

 

Sample: https://stackblitz.com/edit/angular-svskks-ucx7jr?file=app.component.ts 

 

Q4: We achieved your requirement by making use of cellClick and cellDoubleClick event of our scheduler. Please refer below sample 

 

https://stackblitz.com/edit/angular-svskks-edqw7v?file=app.component.ts 

 

 

onCellClick(event: CellClickEventArgs) { 

    // To prevent single click on cell 

    event.cancel = true; 

  } 

  onCellDoubleClick(event: CellClickEventArgs) { 

    // To prevent double click on cell 

    event.cancel = true; 

  } 

 

 

Kindly try the above solutions and let us know, if you need further assistance on this. 

 

Regards, 

M.Vinitha devi 

Thank you, this is very helpful.

Regarding Q2 (drag & drop), we figured out already this functionality based on the online example, however, what we need is possibility to drop an event into a time slot already taken by other event. Right now we can only drop and get events when dropping into empty time slot. However, once dropped into calendar, we can move event into another event so they share the cell, which is the effect we need to achieve while dragging from outside.

Could you help us with how to achieve that?

Thank you,

Hi Karol, 

 

Thanks for your update. 

 

By default, the height of the Scheduler rows in Timeline views are static and therefore, when the same time range holds multiple overlapping appointments, a +n more text indicator will be displayed in JS2. By enabling rowAutoHeight feature, you can view all the overlapping appointments present in those specific time range by auto-adjusting the row height based on the presence of the appointments count, instead of displaying the +more text indicator. Please refer below UG link and for the same we have prepared below sample. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/schedule/row-auto-height/ 

 

Sample: https://stackblitz.com/edit/external-drag-and-drop?file=app.component.html 

 

Kindly try the above solutions and let us know, if you need further assistance on this.  

 

Regards, 

M.Vinitha devi 

Thank you for the answer, but I think we have misunderstanding about our use case that I tried to explain. Let me try to explain it with video (attached). In the video you will see:

1. I am trying to drop event from external source into empty time slot of the calendar - it works fine

2. I am trying to drop event from external source into already taken time slot of the calendar - it does not work and does not report an event 

3. I am moving existing event into already taken time slot -> it works fine, the two events are now displayed for the same time

What we try to achieve is to have action 2. to have same effect as action 3. from the list above. So we can detect drop over already existing event and add there another event.

Thank you,

Hi Karol, 

 

Thanks for your update  

 

We achieved your requirement by using below codes in onTreeDragStop method and same can be available in below link. 

 

https://stackblitz.com/edit/external-drag-and-drop-74abcg?file=app.component.ts 

 

                let elem = closest(event.target, '.e-appointment'); 

                if(elem){ 

                      let appointment: { [key: string]: Object } =this.scheduleObj.getEventDetails(elem) as any; 

                        let eventData: { [key: string]: Object } = { 

                        Name: filteredData[0].Name, 

                        StartTime: appointment.StartTime, 

                        EndTime: appointment.EndTime, 

                        IsAllDay: appointment.isAllDay, 

                        Description: filteredData[0].Description, 

                        DepartmentID: appointment.DepartmentID, 

                        ConsultantID: appointment.ConsultantID 

                    }; 

                } 

                    

Kindly try the above sample and let us know, if you need further assistance on this. 

 

Regards, 

M.Vinitha devi 

Thank you! Your suggestion worked just fine.

I have one more question though. How can I remove the modal window when dropping an appointment from the external list? When dragging, an appointment must be created without confirming via the modal window.

Hi Karol, 

Thanks for the update. 

Based on the requirement, we have achieved the case by making use of addEvent method instead of using openEditor method like below, 

Sample: https://stackblitz.com/edit/external-drag-and-drop-without-openining-event-window-fs4psi?file=app.component.ts 

Kindly try the above sample and revert us for further assistance. 

Regards, 

Vengatesh