Error while closing editor

[Carla Candiotti]

Hi,

I am facing an error when I manually open the schedule editor with 

this.scheduleEditor.open({}, 'Add);

I receive this: 

I am not facing the error when I manually open the schedule editor with the following params:

this.scheduleEditor.openEditor(myEvent, 'Add');

this.scheduleEditor.openEditor(myEvent, 'Save');

Do you have any idea?

[Satheesh Kumar Balasubramanian]

Hi Carla,

We have checked your reported query and let you know that open is not a public method. You can use openEditor public method to achieve your requirement. If it does not meet your requirement, can you please share all the schedule related code snippets to validate this issue further?

 

Regards,

Satheesh Kumar B

[Carla Candiotti]

Hello,

Yes, I meant openEditor() rather than open().

Template

<ejs-schedule #scheduleObj (dataBinding)="onCreate()" (popupOpen)='onPopupOpen($event)' ...></ejs-schedule>

Component

@Component({
  ...
  providers: [DayService, WorkWeekService, MonthService, AgendaService, DragAndDropService]
})
export class MyComponent {
    @ViewChild(ScheduleComponent) scheduleObj!: ScheduleComponent;
    ...

    onCreate() {
        const parsedAppointmentId = this.route.snapshot.queryParams['appointmentId'];

        if (parsedAppointmentId) {
          //case A
          this.myService.getAppointment(parsedAppointmentId).subscribe(appt => this.scheduleObj.openEditor(appt, 'Save'));
        } else if (Object.keys(this.route.snapshot.queryParams).length > 0) {
          //case B
          this.scheduleObj.openEditor({}, 'Add');
        }
    }

    onPopupOpen(args: PopupOpenEventArgs): void {
        if (args.type == 'QuickInfo') {
             if (!args.target?.classList.contains('e-appointment')) {
                 args.cancel = true;
                 //case C
                 this.scheduleObj.openEditor(args.data as any, 'Add');
             }
        }
    }
}

All of 3 cases open editor correctly. In case A and C, I am able to close editor once opened without any issue. But the case B is causing the 

[Venkateshwaran Saravanakumar]

Hi Carla,

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#openeditor

We examined the code snippets you shared and found that the issue you reported was caused because you only passed the action without providing any data for the OpenEditor method in case B. The OpenEditor method of the Scheduler requires both the data and action parameters to be passed. To resolve the issue, make sure to pass the data along with the action to the OpenEditor method. Refer to the API link shared above for more details.

 [Component]

export class MyComponent {
    @ViewChild(ScheduleComponent) scheduleObj!: ScheduleComponent;
    ...

    onCreate() {
        const parsedAppointmentId = this.route.snapshot.queryParams['appointmentId'];

        if (parsedAppointmentId) {
          //case A
          this.myService.getAppointment(parsedAppointmentId).subscribe(appt => this.scheduleObj.openEditor(appt, 'Save'));
        } else if (Object.keys(this.route.snapshot.queryParams).length > 0) {
          //case B
          this.scheduleObj.openEditor({}, 'Add');
        }
    }

Regards,
Venkatesh

[Carla Candiotti]

Hello,

Since it is neither an existing event nor a cell click, I have no data to pass... What should I provide?

[Satheesh Kumar Balasubramanian]

Hi Carla,

You have to pass existing event data and action parameter as Save for existing event and pass cell data and action parameter as Add for cell click.

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

[app.components.ts]

  public buttonClickActions(e: Event): void {

    const quickPopup: HTMLElement = closest(e.target as HTMLElement, '.e-quick-popup-wrapper') as HTMLElement;

    const getSlotData: CallbackFunction = (): Record<string, any> => {

      const subject = ((quickPopup.querySelector('#title') as EJ2Instance).ej2_instances[0] as TextBoxComponent).value;

      const notes = ((quickPopup.querySelector('#notes') as EJ2Instance).ej2_instances[0] as TextBoxComponent).value;

      const addObj: Record<string, any> = {};

      addObj.Id = this.scheduleObj.getEventMaxID();

      addObj.Subject = isNullOrUndefined(subject) ? 'Add title' : subject;

      addObj.StartTime = new Date(this.scheduleObj.activeCellsData.startTime);

      addObj.EndTime = new Date(this.scheduleObj.activeCellsData.endTime);

      addObj.IsAllDay = this.scheduleObj.activeCellsData.isAllDay;

      addObj.Description = isNullOrUndefined(notes) ? 'Add notes' : notes;

      addObj.RoomId = ((quickPopup.querySelector('#eventType') as EJ2Instance).ej2_instances[0] as DropDownListComponent).value;

      return addObj;

    };

    if ((e.target as HTMLElement).id === 'add') {

      const addObj: Record<string, any> = getSlotData();

      this.scheduleObj.addEvent(addObj);

    } else if ((e.target as HTMLElement).id === 'delete') {

      const eventDetails: Record<string, any> = this.scheduleObj.activeEventData.event as Record<string, any>;

      let currentAction: CurrentAction;

      if (eventDetails.RecurrenceRule) {

        currentAction = 'DeleteOccurrence';

      }

      this.scheduleObj.deleteEvent(eventDetails, currentAction);

    } else {

      const isCellPopup: boolean = quickPopup.firstElementChild.classList.contains('e-cell-popup');

      const eventDetails: Record<string, any> = isCellPopup ? getSlotData() :

        this.scheduleObj.activeEventData.event as Record<string, any>;

      let currentAction: CurrentAction = isCellPopup ? 'Add' : 'Save';

      if (eventDetails.RecurrenceRule) {

        currentAction = 'EditOccurrence';

      }

      this.scheduleObj.openEditor(eventDetails, currentAction, true);

    }

    this.scheduleObj.closeQuickInfoPopup();

  }

Regards,

Satheesh Kumar B

[Carla Candiotti]

pass cell data and action parameter as Add for cell click.

As I said, it is not an event... I need to automatically  open the event editor at the page creation, depending on some conditions. I tried to pass data like this but this is not working:

this.scheduleObj.openEditor(this.scheduleObj.activeCellsData, 'Add');

While debugging, I saw that this.scheduleObj.activeCellsData is defined when opening editor (capture 1) but is null when closing editor (capture 2) and that causes the error.

CAPTURE 1

CAPTURE 2

[Satheesh Kumar Balasubramanian]

Hi Carla,

https://stackblitz.com/edit/angular-bqxmv9-ucgegc?file=src%2Fapp.component.html,src%2Fapp.component.ts

We have prepared sample to reproduce the reported issue. But, we were unable to replicate the reported issue. It works fine as expected. Please check our sample. If still you are facing the issue. share the below information to proceed further. It would be more helpful to assist you.

• Entire schedule related code snippets with all customizations
• Replicate the issue in our shared sample or
• Issue replicating sample

Also, please refer the below UG for how to form cell data and pass it to the openEditor public method.

https://ej2.syncfusion.com/angular/documentation/schedule/how-to/open-event-editor-manually

Regards,

Satheesh Kumar B

[Carla Candiotti]

Hello,

I dynamically compute the calendar settings work hours and I think this is the origin of the issue.

Here a reproductible (and simplified) example: https://stackblitz.com/edit/angular-bqxmv9-mstg7s?file=src%2Fapp.component.ts

It seems that changing the working hours after they have been set causes the error

[Venkateshwaran Saravanakumar]

Carla,

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

 
We checked the code you provided and found that the issue might be related to the way the updateWorkHours method is modifying the calendarParams object. The method updateWorkHours is used to update the work hours for the schedule. However, it is assigning a new object to this.calendarParams inside the method, which may cause issues with Angular's change detection mechanism.

When you call Object.assign, it mutates the this.calendarParams object, which can interfere with Angular's change detection, especially if it's used in a context where change detection is already in progress (e.g., within the onCreate method).

To avoid this issue, you should avoid mutating the object directly. Instead, create a new object and assign it to this.calendarParams as demonstrated in the code snippet below.

[app.component.ts]

 updateWorkHours(): void {

   this.calendarParams, {

      startHour: '8:00',

      endHour: '18:00',

      scheduleHours: { highlight: true, start: '8:00', end: '18:00' },

      workDays: [],

      firstDayOfWeek: 1,

    };

  }

[Carla Candiotti]

Hello,

I ended to make it work by doing the modification at an another event (onActionComplete, 'toolbarItemRendered') and it worked. 

Thank you for your 

[Swathi Ravi]

Hi Carla,

We are happy that you are finding solution worked for you reported issue. Let us know if you need any further assistance.

Regards,

Swathi Ravi