Editor window customization

[Parthkumar Kakadiya]

Hi,

I am Parth, using Ejs-Scheduler for Angular 8 Application. I am having one requirement related to customization of the editor window.

I am using my own Editor window for creating Event for the scheduler which is looks like this: 

I would like to implement additional fields like All day and repeat functionality given by default editor window.

How could I implement same functionality that your are offering for default editor window to my own custom editor window? 

Note:  Here my custom editor window is simple bootstrap Modal. I am just binding event data with the schedule.

I hope you will understand my requirement. 

Have a nice and healthy day.

Regards, 

Parth  

[Hareesh Balasubramanian]

Hi Parthkumar, 

Greetings from Syncfusion Support. 

Based on your requirement we have prepared a sample using editorTempate property and it can be viewed from the following link, 

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

Kindly try the above sample and if you have any other concerns please revert for further assistance. 

Regards, 

Hareesh 

[Parthkumar Kakadiya]

Hi Hareesh, 

I hope you doing well. Thanks for a such a rapid response.

I think made little mistake to explain my problem. As i wanted to implement Allday and Repeat functionality at my own modal which is not binned with scheduler at all. 

As in your given example you have bind custom modal with #editorTemplate to the schedule. In my case i am using my own modal which has no connection with the ejs-schedule.

I hope this make my requirement more clear.

Regards,

Parth

[Hareesh Balasubramanian]

Hi Parthkumar, 

Thanks for the update. 

We have validated your reported problem at our end and we suggest you to use below mentioned code snippet in your project (i.e., you need to implement the same in your own model) and same sample can be viewed in our previously updated response. 

Code snippet: 

                <div class="e-dialog-parent"> 

                                <div class="e-title-location-row"> 

                                                <div class="e-subject-container"> 

                                                                <div class="e-float-input e-control-wrapper">Subject 

                                                                                <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%"/> 

                                                                </div> 

                                                </div> 

                                                <div class="e-location-container"> 

                                                                <div class="e-float-input e-control-wrapper">Location 

                                                                                <input id="Location" class="e-field e-location" type="text" value="" name="Location"/></div> 

                                                                </div> 

                                                </div> 

                                </div> 

                                <div class="e-start-end-row"> 

                                                <div class="e-start-container"> 

                                                                <div class="e-float-input e-control-wrapper">From 

                                                                                <input id="StartTime" class="e-field" type="text" name="StartTime" style="width: 100%"/> 

                                                                </div> 

                                                </div> 

                                                <div class="e-end-container"> 

                                                                <div class="e-float-input e-control-wrapper">To 

                                                                                <input id="EndTime" class="e-field" type="text" name="EndTime" style="width: 100%"/> 

                                                                </div> 

                                                </div> 

                                </div> 

                                <div class="e-all-day-time-zone-row"> 

                                                <div class="e-all-day-container"> 

                                                                <div class="e-float-input e-control-wrapper"> 

                                                                                <input id="IsAllDay" class="e-field" type="text" name="IsAlDay" style="width: 100%"/> All day 

                                                                </div> 

                                                </div> 

                                                <div id="TimezoneRow" class="e-time-zone-container"> 

                                                                <div class="e-float-input e-control-wrapper"> 

                                                                                <input id="Timezone" class="e-field" type="text" name="Timezone" style="width: 100%"/> Timezone 

                                                                </div> 

                                                </div> 

                                </div> 

                                <div> 

                                                <div id='RecurrenceEditor'></div> 

                                </div> 

                                <div class="e-custom-row"> 

                                                <div class="e-custom-right-container" id="startZoneRow"> 

                                                                <div class="e-float-input e-control-wrapper">Start Timezone 

                                                                                <input id="StartTimezone" class="e-field" type="text" name="StartTimezone" style="width: 100%" /> 

                                                                </div> 

                                                </div> 

                                                <div id="endZoneRow" class="e-custom-right-container"> 

                                                                <div class="e-float-input e-control-wrapper">End Timezone 

                                                                                                <input id="EndTimezone" class="e-field" type="text" name="EndTimezone" style="width: 100%" /> 

                                                                </div> 

                                                </div> 

                                </div> 

                                <div class="e-custom-row"> 

                                                <div class="e-custom-right-container"> 

                                                                <div class="e-float-input e-control-wrapper">Status 

                                                                                <input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" /> 

                                                                </div> 

                                                </div> 

                                                <div class="e-custom-left-container"> 

                                                                <div class="e-float-input e-control-wrapper">Reason 

                                                                                <input id="Description" class="e-field" type="text" name="Description" style="width: 100%" /> 

                                                                   </div> 

                                                </div> 

                                </div> 

                </div> 

Kindly try the above solution and if you have any other concerns please revert for further assistance. 

Regards, 

Hareesh 

[Karam Ramadan]

Hello there,

I found this after searching for hours. :-D

I have the same issue, I want to build this allday and repeat (Fields and functionality) , into my Event Editor Template. But I have an MVC Project and tried your code but it did not work for me. Can you please help me ?

Thanks in advance

Karam

[Hareesh Balasubramanian]

Hi Karam, 

Thanks for the update. 

We have ported the same sample in the MVC platform based on your shared query using editorTemplate property of the Scheduler, which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/152643/ze/ScheduleEditorTemplate-872478894  

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

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

Regards, 

Hareesh