How to open New event dialog directly on cell click

[shubham sharma]

Hi, 

I am working on a project where i have  following requirements :

• when i ever a click a blank cell(when i am trying to add an event) in calendar it should directly open the new event dialog instead of going to first dialog then more details
• I want to fix the event title as "My Availability" and should be non-editable
• I want to set the Repeat : Daily as default
• I want to remove work week option from top where all the list is displayed like Day, Week, Month etc.
  

If you can provide me solutions to the following requirements. it will be really helpful

Regards,

Shubham

[Praveenkumar Narasimhanaidu]

Hi Shubham, 

Greetings from Syncfusion support..! 

Please find the responses for your queries below 

Q1: when i ever a click a blank cell(when i am trying to add an event) in calendar it should directly open the new event dialog instead of going to first dialog then more details 

We have validated your requirement and let you know that with the help of scheduler cellClick event and openEditor method you can open the editor window on single click. For more information, please refer following UG documentation 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/open-event-editor-manually/#open-editor-window-on-single-click 

onCellClick(args: CellClickEventArgs): void { 

        this.scheduleObj.openEditor(args, 'Add'); // to open editor window on empty cell click 

    } 

    onEventClick(args: EventClickArgs): void { 

        if (!(args.event as any).RecurrenceRule) {   

        this.scheduleObj.openEditor(args.event, 'Save'); // to open event editor window on appointment click 

        } 

        else { 

        this.scheduleObj.quickPopup.openRecurrenceAlert(); 

        } 

Q2: I want to fix the event title as "My Availability" and should be non-editable 

By enabling the readOnly property to the subject field in popupOpen event you can achieve this requirement. 

App.components.ts 

 onPopupOpen(args: PopupOpenEventArgs): void { 

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

      (args.element.querySelector('.e-subject.e-field') as any).readOnly = true; 

 

Q3: I want to set the Repeat : Daily as default 

You can achieve this requirement with the help recurrence editor frequencies option. 

App.component.ts 

onPopupOpen(args: PopupOpenEventArgs): void { 

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

      (args.element.querySelector('.e-subject.e-field') as any).readOnly = true; 

      (<any>this.scheduleObj.eventWindow).recurrenceEditor.frequencies = [ 

        'daily', 

        'weekly', 

        'monthly', 

        'yearly', 

        'none', 

      ]; 

    } 

 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/recurrence-editor/#customizing-the-repeat-type-option-in-editor 

Q4: I want to remove work week option from top where all the list is displayed like Day, Week, Month etc. 

By default, the scheduler will display with day, week, workweek, month, and agenda views. You can also display your required views alone with the <e-views> directive. Please refer to the following code snippet. 

App.component.html 

 <e-views> 

        <e-view option="Day"></e-view> 

        <e-view option="Week"></e-view> 

        <e-view option="Month"></e-view> 

      </e-views> 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/views/ 

Sample(solutions inlcuded): https://stackblitz.com/edit/ej2-angular-scheduler-custom-sample?file=app.component.html 

Kindly try the above solutions and get back to us if you need any further assistance. 

Regards, 

Praveenkumar