Kendo-Knockout Scheduler在活动点击

时间:2016-08-22 13:27:40

标签: javascript knockout.js kendo-ui scheduler

我实现了一个kendo knockout调度程序, 所有事件都正确显示但我想显示包含按钮的弹出窗口以及当我点击事件时重定向到事件详细信息的消息 但我没有找到如何做到这一点

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

1 个答案:

答案 0 :(得分:0)

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

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