Kendo UI之Calendar日历表_转载

最新推荐文章于 2023-04-26 10:11:24 发布

小匠石钧知

最新推荐文章于 2023-04-26 10:11:24 发布

阅读量891

点赞数 1

分类专栏： KendoUI学习文章标签：前端

原文链接：http://www.scscms.com/html/article/20131026-calendar.html

版权

KendoUI学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
Calendar日历表
方法Methods
事件Events
Keyboard Navigation 快捷键

前言

本文转载自http://www.scscms.com/html/article/20131026-calendar.html
在原文的基础上，做了一些修改。

Calendar日历表

Calendar与日期选择组件几乎是一样的，但Calendar可以在日期中添加事件。
使用Kendo UI web需要导入的css js有：

<link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" />

<script src="./js/kendojs/jquery.min.js"></script>
<script src="./js/kendojs/kendo.web.min.js"></script>

Calendar的配置项有：

💬语言culture
🕘事件日期组 dates
⏬导航深度 depth
👣脚部内容 footer
💽格式化 format
🌕最大日期 max
🌑最小日期 min
🌙月视图内容 month.content
⬜月视图空格子内容 month.empty
✅默认初始视图 start
📆默认值 value

💬语言culture

<<返回目录🏡
配置日历显示什么语言（默认是en-US），kendoui配有几十种语言包，详细的参看js\cultures目录。这里需要注意的是，使用哪种语言，就必须要在<head>里导入对应的js，比如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo Calendar</title>
    <link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" />
    
    <script src="./js/kendojs/jquery.min.js"></script>
    <script src="./js/kendojs/kendo.web.min.js"></script>
    <!-- 【注意】导入中文语言js -->
    <script src="./js/kendojs/cultures/kendo.culture.zh-CN.min.js"></script>
</head>
<body>
    <div id="calendar"></div>
    <script>
        $("#calendar").kendoCalendar({
            culture: "zh-CN" //指定为中文  
        });  
    </script>
</body>
</html>

运行结果如图：
calendar_culture

🕘事件日期组 dates

<<返回目录🏡
将用于在月视图模板下的日期集合。注意它不是自动显示在月视图下的，需要使用month.content来渲染。例子如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo Calendar</title>
    <link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" />

    <script src="./js/kendojs/jquery.min.js"></script>
    <script src="./js/kendojs/kendo.web.min.js"></script>

    <style type="text/css">
        .buy {
            color: red;
        }

        .test {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script>
        $("#calendar").kendoCalendar({
            value: new Date(),
            dates: [
                /*
                new Date(year, month, day, hours, minutes, seconds, milliseconds)
                new Date().format("yyyy-MM-dd hh:mm:ss")
                月从0开始
                Date前面加个+，就变为毫秒值，比如：
                var a = +new Date(2020, 10, 11, 0, 0, 0);
                >> a = 1605024000000
            	
                a = new Date(2020, 10, 11, 0, 0, 0);
                >> a = Wed Nov 11 2020 00:00:00 GMT+0800 (中国标准时间) {}
                */
                +new Date(2020, 10, 11, 0, 0, 0),
                +new Date(2020, 11, 12, 0, 0)
            ], //月视图模板可渲染这些日期
            month: {
                /*
                $.inArray( value, array [, fromIndex ] )是jQuery的一个函数
                $.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
            	
                由实际的运行结果知，date.date != data.value，因为最终显示了蓝色的时间
                data.date 的内容是 Thu Apr 02 2020 00:00:00 GMT+0800 (中国标准时间)
                data.value 的内容是 2020/3/2
            	
                所以data.date可以和new Date()这些时间比较，而date.value就是格式化后的时间
                */
                content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                    '<div class="buy">#= data.value #</div>' +
                    '# } else if (data.date != data.value){#' +
                    '<div class="test">#= data.value #</div>' +
                    '# } else { #' +
                    '#= data.value #' +
                    '#}#'
            }
        });
    </script>
</body>
</html>

运行结果如图：
calendar_dates

⏬导航深度 depth

<<返回目录🏡
设置导航的深度级，可选以下值：

“month”：显示本月所有日期；
“year”：显示本年所有月份；
“decade”：显示这个区间的十个年头
“century”：显示本世纪的每个十年区间

但是并没发觉设置这个值有什么不同，不管设置什么值导航是一样的。代码片段如下：

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        depth: "year"
    });  
</script>

👣脚部内容 footer

<<返回目录🏡
设置日历脚部模板内容，设值为false时将隐藏脚部内容。代码片断如下：

<div id="calendar"></div>
<script id="footer-template" type="text/x-kendo-template">
    Today - #: kendo.toString(data, "d") #  
</script>
<script>
    $("#calendar").kendoCalendar({
        footer: kendo.template($("#footer-template").html())
    });  
</script>
<!--或者-->
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        footer: "Today - #: kendo.toString(data, 'd') #"
    });  
</script>

💽格式化 format

<<返回目录🏡
格式化日历使用value()方法返回的值，默认是MM/dd/yyyy。代码片断如下：

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        format: "yyyy/MM/dd"
    });  
</script>

🌕最大日期 max

<<返回目录🏡
指定日历可显示的最大日期，默认是new Date(2099,11,31)。

🌑最小日期 min

<<返回目录🏡
指定日历可显示的最小日期，默认是new Date(1900,0,1)。示例如下：

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        min: new Date(2011, 0, 1),
        max: new Date(2021, 0, 1)
    });  
</script>

🌙月视图内容 month.content

<<返回目录🏡
默认月视图下每个格子只显示对应的日期，而通过此属性可修改本月日期范围内每个格子的显示内容。代码片断如下：

<style type="text/css">
    .exhibition {
        color: red;
    }

    .party {
        color: blue;
    }
</style>
<div id="calendar"></div>
<script id="cell-template" type="text/x-kendo-template">
    <div class="#= data.value < 10 ? 'exhibition' : 'party' #">#= data.value #</div>  
</script>
<script>
    $("#calendar").kendoCalendar({
        month: {
            content: $("#cell-template").html()
        }
    });  
</script>

⬜月视图空格子内容 month.empty

<<返回目录🏡
指定不在max/min范围内的月视图下每个格子显示的内容，默认是为空字符串。代码片断如下：

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        month: {
            empty: '-' //指定无效日期里显示 "-"  
        }
    });  
</script>

✅默认初始视图 start

<<返回目录🏡
指定初始时显示的视图。可选值有"month"、 “year”、 “decade”、 “century"四种视图，默认是"month”。代码片断如下：

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        start: "year"
    });  
</script>

📆默认值 value

<<返回目录🏡
指定初始时日历选中的日期。

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        value: new Date(2012, 0, 1)
    });  
</script>

方法Methods

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();
    var calendar = $("#calendar").data("kendoCalendar");
    var current = calendar.current(); //获取当前选中的日期  
    var max = calendar.max();//获取日历最大日期  
    calendar.max(new Date(2100, 0, 1));//设置日历最大日期  
    var min = calendar.min();//获取日历最小日期  
    calendar.min(new Date(1999, 0, 1));//设置日历最小日期  
    calendar.navigate(new Date(2012, 0, 1), "year");//指定日历日期与相应视图  
    calendar.navigateDown(new Date(2012, 0, 1));//日历导航向下翻。指世纪到十年间，十年间到指定年份，年份到指定月份的过程。  
    calendar.navigateUp();//日历导航向上翻，与上相反。  
    calendar.navigateToFuture();//导航到未来。指向后翻日历。  
    calendar.navigateToPast();  //导航到过去。指向前翻日历。  
    var value = calendar.value(); //获取日历日期。  
    calendar.value(new Date()); //设置日历日期。  
    var view = calendar.view();//返回日历视图对象。calendar.view().name是日历视图名称。  
    calendar.destroy();//销毁日历，删除日历所有事件与方法  
</script>

事件Events

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        change: function () {
            var value = this.value();//日历值变化时触发  
        },
        navigate: function () {
            var view = this.view();//日历导航切换时触发  
        }
    });
    //这些事件都可使用bind绑定。
</script>

Keyboard Navigation 快捷键

序号	快捷键	作用
1	`Alt` + `W`	获取焦点。需要设置html5的accesskey属性
2	`←`	高亮前一天
3	`→`	高亮后一天
4	`↑`	高亮同列上一个日期
5	`↓`	高亮同列下一个日期
6	`Ctrl` + `←`	向左切换视图
7	`Ctrl` + `→`	向右切换视图
8	`Ctrl` + `↑`	向上切换视图
9	`Ctrl` + `↓`	向下切换视图
10	`Home`	选中本视图的第一格
11	`End`	选中本视图的最后一格
12	`Enter`	如果在月视图下将选择高亮日期，其他视图将向下翻视图。

小匠石钧知

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Kendo UI之Calendar日历表_转载

文章目录前言Calendar日历表????语言culture????事件日期组 dates⏬导航深度 depth????脚部内容 footer????格式化 format????最大日期 max????最小日期 min????月视图内容 month.content⬜月视图空格子内容 month.empty✅默认初始视图 start????默认值 value方法Methods事件EventsKeyboard Navigation 快捷键前言 ...
复制链接

扫一扫