Window customization Recurrance

[Stuart]

I am following the examples for "Angular - EJ 2 Editor window customization" for the following two forum articles, but I am still unable to get it to work properly.

Example 1:

https://www.syncfusion.com/forums/152171/editor-window-customization

https://stackblitz.com/edit/allday-timezone-checkbox-in-editortemplate-64hhnm?file=app.component.ts

Example 1 Issue:

The example allows you to create a recurring event, but when reopening the Event Viewer screen, it does not show the recurring details.  This is visible in the StackBlitz example as well.

Example 2

https://www.syncfusion.com/forums/152643/editor-window-customization

https://stackblitz.com/edit/angular-kdkmb1?file=app.component.ts

Example 2 Issue:

The example allows you to create a recurring event.  This example shows the recurring details when opening it again, but when saving it with other recurring details, it removes the recurring details from the event.  This is visible in the StackBlitz example as well.

Are there any other details that I might be missing in the examples?

Regards

[Satheesh Kumar Balasubramanian]

Hi Stuart,

You can use the below customization in popupOpen and popupClose event resolve the reported issue.

https://stackblitz.com/edit/allday-timezone-checkbox-in-editortemplate-rgigs6?file=app.component.ts

app.component.ts:

  public recurrenceString: string;

  public onPopupOpen(args: PopupOpenEventArgs): void {

    let startTimeZone: string =

      args.data['StartTimezone'] || 'Choose start timezone';

    let endTimeZone: string = args.data['EndTimezone'] || 'Choose end timezone';

    if (args.type === 'Editor') {

      let recurElement: HTMLElement =

        args.element.querySelector('#RecurrenceEditor');

      if (!recurElement.classList.contains('e-recurrenceeditor')) {

        let recurrObject: RecurrenceEditor = new RecurrenceEditor({});

        recurrObject.appendTo(recurElement);

        (this.scheduleObj.eventWindow as any).recurrenceEditor = recurrObject;

        (this.scheduleObj.eventWindow as any).recurrenceEditor.value =

          this.recurrenceString;

      }

      document.getElementById('RecurrenceEditor').style.display =

        this.scheduleObj.currentAction == 'EditOccurrence' ? 'none' : 'block';

    }

  }

  public onPopupClose(args: PopupCloseEventArgs): void {

    if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {

      let recElement: HTMLInputElement = args.element.querySelector(

        '#RecurrenceEditor'

      ) as HTMLInputElement;

      if (recElement) {

        this.recurrenceString = (recElement as any).ej2_instances[0].value;

      }

    }

  }

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

[Stuart]

Hi  Satheesh,

Thanks for your example.  Your example steered me in the right direction.

I could achieve the same without  onPopupClose.

I replaced (this.scheduleObj.eventWindow as any).recurrenceEditor.value =

          this.recurrenceString; with

(this.scheduleObj!.eventWindow as any).recurrenceEditor.value = args.data?.['RecurrenceRule']

The reason why I had to do this is that it was not loading my initial dataset recurring values.

I have another question.  

I am new to using TypeScript.  

The StackBlitz examples use "typescript": "~3.1.1".  

I am using VSCode with "typescript": "~4.5.2"

I am not sure if it is VSCode or TypeScript that is enforcing null checks, but most of the code I have to change to e.g. args.data?.['RecurrenceRule']

Is this correct or is this something I can disable?

Regards,

Stuart

[Satheesh Kumar Balasubramanian]

Hi Stuart,

We suggest you to set “strictNullChecks” to false in the “complierOptions” in the tsconfig.json file like below to overcome the issue.

tsconfig.json:

"compilerOptions": {

"strictNullChecks": false,

}

Kindly try the above solution and let us know if you need any assistance.

Regards,

Satheesh Kumar B