Drag on multiple empty cells and trigger event with all dates in range

[Arturo Martinez]

As the title says, how can i drag the mouse on multiple empty cells and when the mouse keyup is up they trigger a scheduler event and has access to the range of dates dragged

Like when you click on an empty cell an that triggers the onPupUpOpen() event 

[Vijay Ravi]

Hi Arturo,
 

Thanks for reaching out to us.
 

Based on your requirement, We suggest you to use the Scheduler QuickInfoOnSelectionEnd property to open the QuickInfo popup while multi cell selection as shown the below shared code snippet. Refer the api and shared sample for your reference.

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

[app.component.html]

<ejs-schedule #schedule height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" [quickInfoOnSelectionEnd] = "true">

   

</ejs-schedule>

Sample link: https://stackblitz.com/edit/angular-vrrwg6-3bfbes?file=src%2Fapp.component.html

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

Regards,

Vijay

[Arturo Martinez]

its working correctly, but no matter the date range i use it always gives me a endTime +1 day

if i select 14-16 Agus i get 14-17

[Vijay Ravi]

Hi Arturo,

The behavior you're experiencing is likely due to how the Syncfusion Scheduler component handles date ranges. When you select a date range, the end date is exclusive. This means that if you select a range from August 14 to August 16, the range ends on August 17 at 00:00:00, which is the start of the day is the scheduer default behaviour. This is why you're seeing the end date as August 17.

If you want to display the end date as the last selected date (August 16 in your example), you can subtract one day from the end date before displaying it. Here's how you can do it in the onPopupOpen function:

[app.component.ts]

public onPopupOpen(args): void {

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

        if (args.data.StartTime && args.data.EndTime) {

            var startTime = new Date(args.data.StartTime);

            var endTime = new Date(args.data.EndTime);

            endTime.setDate(endTime.getDate() - 1);

            console.log('Start Time:', startTime);

            console.log('End Time:', endTime);

        }

    }

  }

 

Sample link: https://stackblitz.com/edit/angular-vrrwg6-tqdcnr?file=src%2Fapp.component.html,src%2Fapp.component.ts

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

Regards,

Vijay