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

[John Espinosa]

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>

                    </button>

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

<script>

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);

    });

</script>

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.

[Vinitha Jeyakumar]

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.

[index.cshtml]

<div>

    @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()

</div>

 

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

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

        <tbody>

            <tr>

                <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>

                    </select>

                </td>

            </tr>

            <tr>

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

                <td colspan="4">

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

                </td>

            </tr>

 

        </tbody>

    </table>

</script>

Output screenshot:

Regards,

Vijay Ravi

Attachment: editor_template_78927a3.zip