We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Scheduler component all selected appointments

Hello,

It is possible to select multiple appointments with CTRL + left click.
I noticed that I would get all the selected appointments in the PopupOpenEventArgs.data

I also noticed that the selected appointments have a css class e-appointment-border, but we don't like to query on a specific css class to get this kind of information.

There is currently no property or method on the scheduler to get all selected appointments.

Is there an other way of getting all our selected appointments without first having to go through the pop up open event or use a query on the css class ?

Regards,



8 Replies 1 reply marked as answer

VR Vijay Ravi Syncfusion Team January 10, 2023 03:42 PM UTC

Hi Pol,


We recommend that you use the schedule's select event to select the appointments by holding down the Ctrl key in the schedule.


Sample: https://stackblitz.com/edit/ej2-angular-schedule-multiple-app-selection?file=src%2Fapp.component.ts


[app.component.html]

<ejs-schedule [eventSettings]='eventSettings' (select)="onAppointmentSelect($event)" #scheduleObj>

</ejs-schedule>


[app.component.ts]

export class AppComponent {

  public selectedAppointmentsRecord<stringany>[] = [];

 

  public onAppointmentSelect(argsany): void {

    if (args.event && args.event.ctrlKey && args.requestType === 'eventSelect') {

      let indexnumber = this.selectedAppointments.findIndex(appointment => appointment.Id === args.data.Id);

      if (index < 0) {

        //select the appointments using ctrl+click it stores in the array

        this.selectedAppointments.push(args.data);

      } else if(this.selectedAppointments.length > 1) {

        //unselect the appointment it removes in the array        

        this.selectedAppointments.splice(index1);

      }

    } else {

      this.selectedAppointments = [];

    }

    console.log(this.selectedAppointments);

  }

}


Regards,

Vijay Ravi


Marked as answer

PO Pol January 11, 2023 02:07 PM UTC

Thank you I will try that.



RV Ravikumar Venkatesan Syncfusion Team January 12, 2023 07:29 AM UTC

Pol,


Try the shared solution and let us know if you need any further assistance on this.



PO Pol January 12, 2023 07:43 AM UTC

Yes, It works.

Thank you.



PO Pol January 12, 2023 08:27 AM UTC

I will further add the appointment to the array when just normal selecting or else there will be a weird interaction whenever the user clicked the first appointment with left click and then the second one with a CTRL left click.

In that case the first appointment wouldn't be added to the array.

But thank you for the suggested solution!



RV Ravikumar Venkatesan Syncfusion Team January 13, 2023 10:31 AM UTC

Hi Pol,


Sample: https://stackblitz.com/edit/ej2-angular-schedule-multiple-app-selection-updated?file=src%2Fapp.component.ts


You can get the selected appointment list before the popupOpen event execution or without using query selectors with help of the getSelectedAppointments method as shown in the below code snippet.


[app.component.ts]

  public onAppointmentSelect(argsany): void {

    if(args.requestType === 'eventSelect' && this.scheduleObj.eventBase) {

      let selectedEvents = this.scheduleObj.eventBase.getSelectedAppointments();

      console.log(selectedEvents);

    }

  }


Regards,

Ravikumar Venkatesan



PO Pol January 16, 2023 10:56 AM UTC

Thank you, it works.


I couldn't find this in the getSelectedAppointments method in your documentation
https://helpej2.syncfusion.com/angular/documentation/api/schedule/


Am I perhaps looking at a wrong location?



RV Ravikumar Venkatesan Syncfusion Team January 17, 2023 07:09 PM UTC

Pol,


You are looking at the correct location. The getSelectedAppointments is an internal method of the Schedule eventBase module. So, that is not exposed in the API list.


Loader.
Up arrow icon