How to hide features and change date format in create event pop up

[shubham sharma]

Hi,

I am working on a project where i am using syncfusion calendar.

I have a doubt that how do i hide all the inputs except start and end. like i want to hide options like repeat,allday,location,description,timezone etc.

I have attached a screenshot in this thread. it shows i want to hide option under blue marker selected area.

And i want to change the date format to dd/MM/YYYY in yellow marker area.

Please find the screenshot attached with this thread.

And a live stackblitz link of the implementation with code would be appreciated.

Please try to reply as soon as possible as a deadlock has been created in my project

Regards,

Shubham 

Shubham sharma

[Praveenkumar Narasimhanaidu]

Hi Shubham, 

Greetings from Syncfusion support..! 

Please find the responses for your queries. 

Q1: How to hide certain editor window fields 

We have validated your requirement and let you know that, we can achieved it in two different ways. One is using CSS and another one using scheduler editorTemplate. 

a. using below mentioned CSS 

.e-schedule-dialog .e-location-container { 

  display: none; 

} 

.e-schedule-dialog .e-all-day-time-zone-row { 

  display: none !important; 

} 

.e-recurrenceeditor .e-editor { 

  display: none !important; 

} 

.e-schedule-dialog .e-description-row { 

  display: none; 

} 

.e-schedule-dialog .e-subject-container { 

  width: 100%; 

} 

 

b. using Scheduler editorTemplate 

With the help of editorTemplate, you can add only your required fields in editor window. Please refer following UG links for more information. 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-event-editor-using-template 

Q2: change date format 

You can achieve this requirement using Scheduler’s popupOpen event. We have prepared a sample for your reference which includes both hiding editor window fields and changing date format code snippets. 

Sample: https://stackblitz.com/edit/ej2-angular-scheduler-customized-editor-window?file=app.component.ts 

App.component.ts 

onPopupOpen(args) { 

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

      args.element.querySelector('.e-start').ej2_instances[0].format = 

        'd/M/yy h:mm a'; 

      args.element.querySelector('.e-end').ej2_instances[0].format = 

        'd/M/yy h:mm a'; 

    } 

  } 

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

Regards, 

Praveenkumar