Customization of Multiple Resources view

[Karol]

Hi,

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.

1.Is it possible to split the day for the single doctor into two columns? We need to show two types of events that happen possibly on the same time for single doctor. Mapping of the doctor needs to be left horizontal. The vertical view is not suitable. Ideally, we have two "slots" or sub-columns for a single doctor, one for each event type.

2. Is it possible to drag event from outside (waiting list) on to the time taken by other event for a given resource/doctor? As described above, we assume there is one event type for a given time for a given doctor and we need to add second one there by dragging.

3.Is it possible to remove the display of the day and day of week under the resources (doctors) (view DAY). We need the ability to display only hours and doctors. Attached is what we refer to.

4. Is it possible to block the calendar (to prohibit creating an event by clicking on a cell). But leave the opportunity to move and edit existing events and drag new events from waiting list. We tried to set the readonly for schedule property. But then the entire calendar is blocked and I can’t move existing events.

Thank you!

Attachment: Schedulecustomizations_2dfe4c79.zip

[Vinitha Devi Murugan]

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 

 

onDataBound(event: ActionEventArgs): void { 

    let leftIndent = this.scheduleObj.element.querySelector( 

      ".e-left-indent .e-header-cells" 

    ); 

    let dateHeader = this.scheduleObj.element.querySelector( 

      ".e-header-row .e-header-cells" 

    ); 

    if (leftIndent) { 

      remove(leftIndent.closest("tr")); 

    } 

    if (dateHeader) { 

      remove(dateHeader.closest("tr")); 

    } 

  } 

 

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 

[Karol]

Hello,

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,

[Vinitha Devi Murugan]

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 

[Karol]

Hi Vinitha, 

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,

Attachment: ScreenHunter_22_272860c4.zip

[Vinitha Devi Murugan]

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 

[Karol]

Hi,

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.

[Vengatesh Maniraj]

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, 

this.scheduleObj.addEvent([eventData]); // save the event without confirmation    

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