Adding Kendo Controls on Kendo Scheduler Custom Template

Question

I have a Kendo Scheduler in MVC Core, and I need to open the custom popup on click of the events on calendar. I am able to add the Script tag and give ID and Call the template as pop up by using that ID.

Issue I have is when I try to add the kendo control within script it fails. normal buttons and labels work fine. Moment I add the Kendo Button it fails.

Can someone help on this one

CODE:

<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p>
    <label>Title: <input name="title" /></label>
</p>
<p>
    <label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
    <label>Start: <input data-role="datetimepicker" name="end" /></label>
</p>

$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
editable: {
    template: $("#editor").html()
},
views: [
    { type: "day" }
],
dataSource: [
    {
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
    }
]

});

Answer 1

You should either use MVVM to create a custom editor or add an edit event handler, and when the event fires initialize a widget from a DOM element in the template. Example