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. Image for the cookie policy date

Adding custom fields in Event Editor which is opened by a button

I have a button on my page which will launch the event editor to create a new event. Here is the code I use for the button and the JS to open the event editor:

 <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button"

                            id="btnNewEvent" tabindex="0" data-tabindex="-1" aria-label="New Event"

                            style="width: auto; margin-bottom: 5px;">

                        <span class="e-btn-icon e-icons e-plus e-icon-left"></span>

                        <span class="e-tbar-btn-text">New Event</span>


Heres the JS to open the editor with the onclick event:


document.getElementById("btnNewEvent").addEventListener('click', function () {

        var scheduleObj = document.getElementById('scheduler').ej2_instances[0];

        var date = scheduleObj.selectedDate;

        var eventData = {

            Id: scheduleObj.getEventMaxID(),

            Subject: '',

            StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),

            EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),

            Location: '',

            Description: '',

            IsAllDay: false,

            CalendarId: 1,


        scheduleObj.openEditor(eventData, 'Add', true);



This works but I now need to add some custom fields one being a dropdown list and the other an image upload field. What's the best way to do this? I've tried using some of the techniques in the documentation but it doesn't seem to be geared towards using the event editor outside of the scheduler object. 

Any help would be appreciated.

1 Reply

VJ Vinitha Jeyakumar Syncfusion Team January 4, 2023 07:28 AM UTC

Hi john

The event editor window can be customized by making use of the EditorTemplate option. Here, the custom window design is built with the required fields using the script template and its type should be of text/x-template.



    @Html.EJS().Schedule("scheduler").Width("100%").Height("650px").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(DateTime.Today.Year, 1, 10)).EditorTemplate("#EventEditorTemplate").Render()



<script id="EventEditorTemplate" type="text/template">

    <table class="custom-event-editor" width="100%" cellpadding="5">



                <td class="e-textlabel">Status</td>

                <td colspan="4">

                    <select id="EventType" name="EventType" class="e-field" style="width: 100%">

                        <option value="option1">Option 1</option>

                        <option value="option2">Option 2</option>

                        <option value="option3">Option 3</option>





                <td class="e-textlabel">Upload Image</td>

                <td colspan="4">

                    <input type="file" id="ImageUpload" name="ImageUpload" class="e-field" accept="image/*" />







Output screenshot:


Vijay Ravi

Attachment: editor_template_78927a3.zip

Live Chat Icon For mobile
Up arrow icon