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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add new fields and get form data of Dialog or Modal in scheduler

Thread ID:





142614 Feb 12,2019 12:18 PM UTC Feb 18,2019 05:02 AM UTC Angular - EJ 2 7
Tags: Schedule
Muhammed Imran
Asked On February 12, 2019 12:18 PM UTC

I have configured Schedule in my Project  . I am able to load data from data source finely , but how can i customize popup model or dialog by adding more fields .second how can i get form data .e.g add/new appointment data.

I have checked documentation but that seems little bit older because <ej-schedule> does not work but <ejs-schedule> is working fine . I have cloned repo. https://github.com/SyncfusionExamples/ej2-angular-5-scheduler

note : I am using angular 5.

1: add field to popup or dialog (creating new event/appointment)
2: get form data in component on save/submit button. 

Attachment: ScheduleCRUD1340822265_8762861.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 13, 2019 06:00 AM UTC

Thank you for contacting Syncfusion support. 
Scheduler allows you to add new fields to default editor and to use custom editor, kindly refer the below links. 
When an event is added / edited, actionBegin event will be raised where we can access the event data. 
onActionBegin(args: ActionEventArgs): void { 
    if (args.requestType == 'eventCreate' || args.requestType == 'eventChange') { 
      // args.data 

Muhammed Imran
Replied On February 14, 2019 12:54 PM UTC

thanks for response @karthegyan 

I have fixed above issues  . now i need your some help . actually i am using my own customize modal/popup . 
 onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type === 'Editor'){
that is working fine . issue is there built-in popup also showing . i want to dismiss or stop displaying built-in modal for new event.
second one how can i pass my user-defined array to datasource to show event/appts on calendar .
like in following code 
<ejs-schedule width='100%' height='650px' [eventSettings]="eventSettings"  [selectedDate]="currentDate" (popupOpen)="onPopupOpen($event)">


//component class
eventsArray: Appointment[] =[]; //from api
    eventSettings = this.eventsArray;//can i pass my user-defined object array here ? 

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 15, 2019 04:58 AM UTC

Hi Imran, 
Thanks for your update. 
We suspect that editor ng-template is not used at your end which is the cause for the issue. We have internally prevented the default editor when the template option is used like below. 
To prevent the default editor, kindly use the below code example with in popup function before opening the custom editor. 
Kindly refer the below sample ts file to assign data source 
<ejs-schedule #schedule height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings"> 
export class DefaultComponent { 
    public selectedDate: Date = new Date(2018, 1, 15); 
    public eventSettings: EventSettingsModel = { dataSource: <Object[]>extend([], scheduleData, null, true) }; 

Muhammed Imran
Replied On February 15, 2019 06:40 AM UTC

I have fixed second one by following

//events is user defined array
this.eventSettings ={dataSource:this.events};

thanks for answer BTW

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 15, 2019 07:01 AM UTC

Hi Imran,  
Thanks for your update. 

Muhammed Imran
Replied On February 15, 2019 07:42 AM UTC

args.cancel =true;

stops to show both dialog/popup.

i just want to hide/show off just second popup that is attached below.


Attachment: secondImage_32be28ac.rar

Nevitha Ravi [Syncfusion]
Replied On February 18, 2019 05:02 AM UTC

Hi Imran, 
Thanks for your update. 
We can hide the particular popup in the popupOpen event by checking the type and for the same we have prepared a sample for your reference which can be viewed from the following link. 
public onPopupOpen(args: PopupOpenEventArgs): void { 
        if (args.type === 'QuickInfo') { 
            args.cancel = true; 
Also, we can hide the quick info popup by setting false to the property showQuickInfo. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon