How to open different event dialog on scheduling?

[Tümer]

Hi,

I have tree type of appointment and they have different fields. According to this i can call first dialog but how can it possible for the others. I want to open another different kind of dialog on scheduler.

 <div ngbDropdown class="d-inline-block" display="dynamic" placement="bottom left">

                <button ngbDropdownToggle class="btn btn-primary" id="dropdownBasic1" matTooltip="Yeni Randevu Ekle">Yeni Randevu</button>

                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

                  <button class="dropdown-item" (click)="newClient()">Yeni Danışan</button>

                  <button class="dropdown-item" (click)="savedClient()">Kayıtlı Danışan</button>

                  <button class="dropdown-item" (click)="newPlanOrProgram()">Plan/Program</button>

                </div>

              </div>         

 // This is for first dialog.

  newClient(): void {

     let cellData: Object = {

         startTime: new Date(2018, 1, 15, 10, 0)    

     };

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

  }

  // This will be for second dialog.

  savedClient(): void {

    //?

  }

  // This will be for third dialog

  newPlanOrProgram(): void {

      //?

  }

[Balasubramanian Sattanathan]

Hi Tumer, 

 

Greetings from Syncfusion Support. 

 

We have analyzed your requirement and prepared sample based on that. In below sample, we have added three buttons and opened three dialog windows using below code snippet. We have attached UG link for your reference. 

 

app.component.html : 

<button #addButtonObj ejs-button cssClass='e-info' (click)='add()'> Add </button> 

<button #editButtonObj ejs-button cssClass='e-info' (click)='edit()'> Edit </button> 

<button #deleteButtonObj ejs-button cssClass='e-info' (click)='delete()'> Delete </button> 

 

app.component.ts : 

add(): void { 

  let cellData: Object = { 

    startTime: new Date(2018, 1, 15, 10, 0), 

    endTime: new Date(2018, 1, 15, 11, 30), 

  }; 

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

} 

edit(): void { 

  let apps: object[] = this.scheduleObj.getCurrentViewEvents(); 

  if (apps.length) { 

    this.scheduleObj.openEditor(apps[0], 'Save'); 

  } 

} 

delete(): void { 

  let activeEvent: any = this.scheduleObj.getCurrentViewEvents()[0]; 

  if (activeEvent) { 

    this.scheduleObj.activeEventData.event = activeEvent; 

    this.scheduleObj.quickPopup.openDeleteAlert(); 

  } 

} 

 

Sample : https://stackblitz.com/edit/angular-aisa2d-hfxwps?file=app.component.ts 

UG : https://ej2.syncfusion.com/angular/documentation/schedule/how-to/add-edit-and-remove-events/ 

 

Kindly try the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Balasubramanian S 

[Tümer]

I meaned i need different dialogs than scheduler dialogs. I did it <ejs-dialog>. Everything seems fine now.

[Vengatesh Maniraj]

Hi Tumer, 

Thanks for the update. 

We are happy that you have found the solution for your requirement. 

Please contact us if you need any further assistance. 

Regards, 

Vengatesh