2016-08-22 6 views
0

Я реализую планировщик нокаутов кендо, все события отображаются правильно, но я хочу показать всплывающее окно, содержащее кнопку и сообщение для перенаправления к деталям события, когда я нажимаю на событие , но я не нашел, как это сделатьKendo-Knockout Scheduler show custom popup on event click

это мой JS код

self.config = { 
     date: new Date(), 
     startTime: new Date("2016/8/09 00:00"), 
     endTime: new Date("2016/8/09 23:59"), 
     timezone: "Etc/UTC", 
     height: 800, 
     views: ["day", "week", "month", "agenda"], 
     editable: false, 
     selection: function() { 
      console.log("test selection") 
     }, 
     //eventTemplate: $(".fc-event-width-overirde").html(), 
     dataBound: function() { 
      var view = this.view(); 
      var events = this.dataSource.view(); 
      var eventElement; 
      var event; 


      //self.widgetEventDataSource.read(); 
      for (var idx = 0; idx < events.length; idx++) { 
       event = events[idx]; 

       //get event element 
       eventElement = view.element.find("[data-uid=" + event.uid + "]"); 

       //set the backgroud of the element 
       if (events[idx].color == "Low") { 
        eventElement.css("background-color", "#228B22"); 
       } else if (events[idx].color == "Medium") { 
        eventElement.css("background-color", "#FF8C00"); 
       } 
       else if (events[idx].color == "High") { 
        eventElement.css("background-color", "#FF0000"); 
       } 


      } 
     }, 
     dataSource: self.widgetEventDataSource, 
     autoBind: false, 
     navigate: function() { 
      //    var cur = this._current; 
      //    var prev = this._previous; 
      //    if (prev && cur && prev.getFullYear() !== cur.getFullYear()) { 
      //     alert("year change"); 
      //    } 
      //    this._previous = this._current; 


      var typeView = ""; 
      if ($(".k-state-hover").data() != undefined) { 
       typeView = $(".k-state-hover").data().name; 
      } 

      if (this.calendar != undefined) { 
       var dateCalendar = this.calendar._value 
      } 

      //var startDate = this.calendar._value; 
      self.widgetEventDataSource.read({ "typV": typeView, "dateCalendar": dateCalendar }); 
     } 

    }; 

это мой HTML код

<div id="ostCalendar" data-bind="kendoScheduler: config"> </div> 

ответ

0

Используйте окно кендо. Вы можете указать шаблон html, который может содержать кнопку.

http://demos.telerik.com/kendo-ui/window/index

+0

проблема, что я не нашел «мета» (как autoBind, навигация ...), где я получить выбранное событие – SamirJ