Kendo-Knockout Scheduler 在事件点击时显示自定义弹出窗口

Question

我实现了一个剑道淘汰赛调度程序， 所有事件都正确显示，但我想显示包含按钮和消息的弹出窗口，以便在我单击事件时重定向到事件详细信息 但我没有找到如何做到这一点

这是我的 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>

Answer 1

使用剑道窗口。 您可以指定一个可以包含按钮的 html 模板。

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