How to manually capture Edit and Delete Events from the scheduler

Question

I would like to manually capture the edit and delete events. I have tried popup close but it has only one method and none of them label that event as delete, add or edit

Here is the current code of what I am doing to capture popup close

  onPopupClose(args: PopupCloseEventArgs){
        console.log('popupargs',args)
        if(args.type === 'Editor') {
            if(args.cancel == false) {
              // Handle the code if "save" button is clicked.
              //console.log(args.data)
              let apptModel = new AppointmentModel();
              apptModel.id = Guid.create()['value']
              apptModel.booked = true;
              apptModel.isNewFlag = false;
              apptModel.description = args.data.Description;
              apptModel.staffId = this.authService.getStaffId();
              apptModel.clientId = null
              apptModel.subject = args.data.Subject;
              apptModel.location = args.data.Location;
              apptModel.startTime = args.data.StartTime;
              apptModel.endTime = args.data.EndTime;
              apptModel.isCalendarAppointment = true;
              this.appointmentService.addNewAppointment(apptModel).subscribe(y => {
                console.log('Added apptModel', y)
              })
            } else if(this.scheduleObj.currentAction === null) {
              // Handle the code if "cancel" button is clicked.
              console.log(args)
            }
              // Handle the code if "delete" button is clicked.
             // Handle the code if "edit" button is clicked.
          }
        
    }

Ashokkumar Karuppasamy · Answer

Hi David, You can achieve your requirement by capturing the target in the popupClose event or using the actionBegin event in the schedule to meet your requirements. The attached code snippet and the following example illustrate the solution. Please give it a try, and let us know if you need any further assistance. Sample: https://stackblitz.com/edit/capture-edit-delete-events-scheduler-wwivqb?file=src%2Fapp.component.html,src%2Fapp.component.ts[app.component.html]

[app.component.ts] export class AppComponent { @ViewChild('scheduleObj') public scheduleObj: ScheduleComponent; public selectedDate: Date = new Date(2021, 1, 15); public eventSettings: EventSettingsModel = { dataSource: extend([], zooEventsData, null, true) as Record[] }; public scheduleView: View = 'Week'; public datas: string[] = ['Day', 'Week', 'WorkWeek', 'Month']; public onActionBegin(args: ActionEventArgs): void { if (args.requestType === "eventChange") { // Handle the code if "save" button is clicked. } else if (args.requestType === "eventRemove") { // Handle the code if "save" button is clicked. } } public onPopupClose(args: PopupCloseEventArgs): void { if (args.type === 'Editor') { if (args.event) { if ((args.event.target as any).classList.contains('e-event-save')) { // Handle the code if "save" button is clicked. } else if ((args.event.target as any).classList.contains('e-event-delete')) { // Handle the code if "delete" button is clicked. } else if ((args.event.target as any).classList.contains('e-event-cancel') || ((args.event.target as any).classList.contains('e-icon-dlg-close'))) { // Handle the code if "cancel" button is clicked. } } } } } Regards, Ashok

David Jones · Answer

This is good thank you. One last issue I am trying to load events manually in the ng onit function and this is not working as expected. None of the events are getting loaded. How can I get the events to load during ng onit

https://stackblitz.com/edit/capture-edit-delete-events-scheduler-zt7hgz?file=src%2Fapp.component.html,src%2Fapp.component.ts

  ngOnInit(): void {
    this.scheduleObj.eventSettings.dataSource = zooEventsData
    }

Ashokkumar Karuppasamy · Answer

Hi David,

The Schedule doesn't
render initially, making it impossible to set data values directly in the ngOnInit()
method. Instead, you can use the code below to add data in the ngOnInit()
function. Please give it a try and let us know if you need any further
assistance.

Sample: https://stackblitz.com/edit/capture-edit-delete-events-scheduler-rp4u5d?file=src%2Fapp.component.html,src%2Fapp.component.ts

export class AppComponent implements OnInit {
   
    @ViewChild('scheduleObj') public scheduleObj: ScheduleComponent;
   
    public selectedDate: Date = new Date(2021, 1, 15);
    public eventSettings: EventSettingsModel = { dataSource: []};
    public scheduleView: View = 'Week';
    public datas: string[] = ['Day', 'Week', 'WorkWeek', 'Month'];

ngOnInit(): void {
      this.eventSettings.dataSource = zooEventsData
    
    }

Regards,
Ashok