将课程注入KendoUI网络日历日

时间:2013-06-24 19:39:15

标签: javascript html kendo-ui

我想利用KendoUI工具提示和日历,目前我可以单独设置它们。

     <script>
    $(document).ready(function() {

        var today = new Date(),
        events = [
        +new Date(today.getFullYear(), today.getMonth(), 8),
        +new Date(today.getFullYear(), today.getMonth(), 12),
        +new Date(today.getFullYear(), today.getMonth(), 24),
        +new Date(today.getFullYear(), today.getMonth() + 1, 6),
        +new Date(today.getFullYear(), today.getMonth() + 1, 7),
        +new Date(today.getFullYear(), today.getMonth() + 1, 25),
        +new Date(today.getFullYear(), today.getMonth() + 1, 27),
        +new Date(today.getFullYear(), today.getMonth() - 1, 3),
        +new Date(today.getFullYear(), today.getMonth() - 1, 5),
        +new Date(today.getFullYear(), today.getMonth() - 2, 22),
        +new Date(today.getFullYear(), today.getMonth() - 2, 27)
        ];
                    // create Calendar from div HTML element
                    $("#calendar").kendoCalendar({
                        value: today,
                        dates: events,
                        month: {
                            // template for dates in month view
                            content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                            '<div class="' +
                            '# if (data.value < 10) { #' +
                            "autohide-false" +
                            '# } else if ( data.value < 20 ) { #' +
                            "party" +
                            '# } else { #' +
                            "cocktail" +
                            '# } #' +
                            '">#= data.value #</div>' +
                            '# } else { #' +
                            '#= data.value #' +
                            '# } #'
                        },
                        footer: false
                    });

                        //set up tooltip
                        $(".autohide-false").kendoTooltip({
                            autoHide: false,
                            position: "top",
                            content: 'Hello there!'
                        });
                });
</script>

HTML

<div id="calendar">

</div>

目前,当我点击日历小部件中的某一天时,工具提示似乎没有显示出来。有什么想法吗?感谢您抽出宝贵时间阅读本文。

1 个答案:

答案 0 :(得分:0)

似乎应用了工具提示,但由于我在“content:”参数中的规则,它只出现了几天。