Support for Grouped Tasks and Drag-and-Drop in Scheduler from - 196965

[Johann Kronawitter]

Hi,

- Multiple Tasks for expample the same TaskName (Different IDs) in one Line

- Create with Drag and Drop, directly on the Timeline

or is it possible with the Scheduler Component?

Attachment: a802ae1be77d4a348c96c423b81c5026_c9117109.jpg

[Saritha Sankar]

Hi Johann Kronawitter,

Please find below a comprehensive overview of the key features available in the Syncfusion Blazor Scheduler Component, with direct reference links and detailed descriptions for each capability. This will help you evaluate its suitability for your project requirements such as resource scheduling, drag-and-drop operations, UI customization, and appointment management.

1. Timeline Resources:

You can display multiple resources in a timeline layout. This enables visual grouping of appointments/resource-based filtering and time allocation.

UG: Resources and Grouping in Blazor Scheduler Component | Syncfusion

2. Customizing Header Rows Using Templates:

The timeline header (e.g., hour, day, week labels) can be customized using templates to format how information is displayed like adding icons, tooltips, or changing date formats.

UG: Timeline Header Rows in Blazor Scheduler Component | Syncfusion

3. Custom Toolbar Header:

Customize the scheduler's top toolbar to add new dropdowns change existing actions, or completely redesign the toolbar layout using templates.

UG: Custom Header in Blazor Scheduler Component | Syncfusion

4. Drag and Drop Functionality:

a. Basic Drag and Drop Support:

Allows appointments to drag using AllowDragAndDrop property.

• OnDragStart: Triggered when an appointment is picked up.

• Dragged: Triggered once the appointment is dropped into a new cell.

UG: Events in Blazor Scheduler Component | Syncfusion

b. Drag and Drop Multiple Appointments:

Allows selecting and moving multiple appointments at once using AllowMultiDrag property.

UG: Drag and drop in Blazor Scheduler Component | Syncfusion

c. Disable Drag Action

Disables the drag-and-drop functionality across views by setting AllowDragAndDrop = false.

5. External Source Integration

a. Drag and Drop Items into Scheduler

Allows dragging items from external sources into the scheduler. Once dropped, you can programmatically add them using AddEventAsync.

UG: Drag and drop in Blazor Scheduler Component | Syncfusion

b. Drag and Drop Items from Scheduler to External Source

You can drag items out of the Scheduler into another component or container. Use the EventDragArea property to define the drop zone and handle logic in the Dragged event.

UG: Drag and drop in Blazor Scheduler Component | Syncfusion

6. Appointment Customization

Fully customize how each appointment looks and behaves.

• Template: Define your own HTML structure for appointments.

• EventRendered: Dynamically assign properties like colors, icons, or text during rendering.

• CssClass: Attach class names to apply custom styles through CSS.

UG: Appointment customization in Blazor Scheduler Component | Syncfusion

Hotel Booking:

Also, we already have a showcase sample for hotel bookings. Refer the sample code and demo for your reference.

Demo Sample: Stay Reservation - Syncfusion Blazor Components Showcase App
Github Link: syncfusion/blazor-showcase-stay-reservation: Stay reservation showcase application built with Syncfusion Blazor Scheduler component.

Regards,

Saritha S.

[Johann Kronawitter]

Hi Saritha, 

thanks for your informations

do you also have the example for angular?

[Saritha Sankar]

Hi Johann Kronawitter,

Yes, we have a sample hotel booking application available in Angular. Please refer to the example linked below for your reference.

Demo Sample: https://ej2.syncfusion.com/showcase/angular/hotelbooking/
Github Link: syncfusion/ej2-showcase-angular-hotel-booking: ej2-showcase-angular-hotel-booking

Please let us know if you need further assistance.

Regards,

Saritha S.

[Johann Kronawitter]

Hi Saritha, 

i've developed a little bit, it becomes better. Now i've a problem.

i change the appointments with "renderCell" Event - see the picture  Now when i add a new event, the new event will be moved to another slot.

do you may know why? 

[Saritha Sankar]

Hi Johann Kronawitter,

Thank you for reaching out to us!

Based on the details you shared, we have checked the issue on our end but were unable to replicate it. For your reference, we have provided a validated sample below.

Sample: https://stackblitz.com/edit/angular-pfk3uuxd-vfuubozm?file=src%2Fapp.component.ts

 

We would need additional details to replicate the exact problem on our end. We kindly request you to provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

• Share the exact code snippet used or the specific steps followed to replicate the reported issue
• Provide a simple sample that replicates the issue or is replicated in our shared samples.
• Share a video demo showing how the issue can be reproduced.

Please get back to us with the required details for further assistance.

Regards,

Saritha S.

[Johann Kronawitter]

Hi Saritha,

i've created a stackbiz with the code for this.

https://stackblitz.com/edit/stackblitz-starters-v4kpktdg?file=src%2Fapp.component.ts

there you can test it and see the complete code.

[Johann Kronawitter]

Hi Saritha, 

i found the problem.

when the "rowAutoHeight" attribute is "true" then the style.top of the appointment will be changed.

so a follow up appointment will be moved down, but there is the next room.

i set a fixed top for each appointment depend on the groupIndex.

Now i've a further question:

Is it possible to customize the "OverlapAlert"-Template?

i found nothing about in the api doc

[Saritha Sankar]

Hi Johann Kronawitter,

Thank you for reaching out to us!

In the current behavior of the Scheduler component, the customization of the overlapAlert popup in the schedule component is currently not supported. This limitation exists due to the component’s internal handling of conflict detection and alert rendering, which is not exposed for external modification at this time.

Please let us know if you need any further assistance

Regards,
Saritha S.

[Johann Kronawitter]

Hi Saritha, 

Thanks for the Info.

Is it Possible to Change the Text of the Aler

[Saritha Sankar]

Hi Johann Kronawitter,

You can customize the content of the OverlapAlert popup using the popupOpen event. Please refer to the example code below for your reference.

 

<ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate"

  [eventSettings]="eventSettings" [allowOverlap]="false" (popupOpen)="onPopupOpen($event)"></ejs-schedule>

 

onPopupOpen(args: PopupOpenEventArgs): void {

        if(args.type == "OverlapAlert"){

            let titleElement = args.element.querySelector("#QuickDialog_title") as HTMLElement;

            titleElement.innerHTML = "Events Conflict Detected";

            let contentElement = args.element.querySelector("#QuickDialog_dialog-content") as HTMLElement;

            contentElement.innerHTML = "The selected time slot overlaps with an existing event. Please choose a different time."

        }

    }

Sample Link: https://stackblitz.com/edit/angular-ulta9jlf-ehquctev?file=src%2Fapp.component.ts

Regards,

Saritha S.