How to edit Kendo Scheduler Popup template

Question

I'm getting problems with Kendo Scheduler UI, i'm trying to customize the popup editor with custom fields but i cannot edit elements in the popup. I would need some help to understand how to edit fields.

I've tried different scripts from telerik support but with no results. With these scripts i can create a new popup but not edit the old one.

<div id="scheduler"></div>
<script>

  $('#editasnew').click(function(){
    console.log("edit now");
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.cancelEvent();

    setTimeout(function(){
      console.log("add new event now");
      scheduler.addEvent({ title: "(No title)" });
    }, 2000);

  });


$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  edit: function(e) {
            if (!e.event.isNew()) {
                $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
          }
  },
  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"
    }
  ]
});
</script>

NO errors, just not working. basically i would like to convert the "end: new Date("2013/6/6 09:00 AM")" line to a drop-down list.

Answer 1

<script id="editor" type="text/x-kendo-template">
<div class="k-edit-label">
        <label for="title">Title</label></div>
    <div class="k-edit-field" data-container-for="title">
        <input type="text" class="k-input k-textbox" name="title" data-bind="value: title"></div>
   <div class="k-edit-label">
    <label for="start">Start</label>
  </div>
<div data-container-for="start" class="k-edit-field">
    <input type="text"
           data-role="datetimepicker"
           data-interval="15"
           data-type="date"
           data-bind="value:start,invisible:isAllDay"
           name="start"/>
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
    <span data-bind="text: startTimezone"></span>
    <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
  </div>


    <div class="k-edit-label"><label for="end">End</label></div>
<div data-container-for="end" class="k-edit-field">
    <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
    <span data-bind="text: endTimezone"></span>
    <span data-bind="text: startTimezone, invisible: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
  </div>
    <div class="k-edit-label"><label for="ownerId">Employee's</label></div>
<div data-container-for="ownerId" class="k-edit-field">

    <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                    data-value-field="" data-text-field="">
     @*#for (int i=0; i<='@ViewBag.employeelist'.length; i++){#


     <option value=${' @ViewBag.employeelist[0]'EmployeeId}>${' @ViewBag.employeelist[0]'Employeename}</option>
        # } #*@


  </select>

    @* <select class="form-control" data-role="dropdownlist" data-text-field="Employeename" data-value-field="EmployeeId"  data-bind="value:EmployeeId, source: @ViewBag.employeelist"></select>*@
  </div>


</script>


   @(Html.Kendo().Scheduler<HRMSWebApplication.Models.Data.TaskViewModel>()
    .Name("scheduler")
    .Date(DateTime.Now)
    .StartTime(new DateTime(DateTime.Now.Year, 12, 31))
    .Height(550)
    .Views(views =>
    {
        //    views.DayView();
        //    views.WorkWeekView();
        //    views.WeekView();
        views.MonthView(MonthView => MonthView.Selected(true));
        //views.AgendaView();
        //views.TimelineView();
    })
        //.Editable(e => e.TemplateId("editor"))



            .Resources(resource =>
            {
                resource.Add(m => m.OwnerID)
                    .Title("Employee")
                    .DataTextField("Employeename")
                    .DataValueField("EmployeeId")
                    .BindTo(@ViewBag.employeelist);
            })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title);
            m.RecurrenceId(f => f.RecurrenceID);
        })
                .Read("Read", "LeavePlanner")
        //.Filter(filters =>{filters.Add(model => model.OwnerID).IsEqualTo(System.Web.HttpContext.Current.Session["userid"].ToString());})
                .Create("Create", "LeavePlanner")
                .Destroy("Destroy", "LeavePlanner")
                .Update("Update", "LeavePlanner")
                        //        .Filter(filters =>
                        //         {
                        //           //filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
                        //})
    )
)

This how we done in MVC.Aspnet please above script works for you