您当前位置:首页 > 文章中心 > HTML5+CSS3 > kendo UI

kendoUI系列教程之calendar日历表

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-26   阅读次数: 1468   查看权限: 游客查看

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之calendar日历表。

calendar与日期选择组件几乎是一样的,但calendar可以在日期中添加事件。使用例子:

<div id="special-days">
<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)
			];

		$("#calendar").kendoCalendar({
			value: today,
			dates: events,
			month: {
				content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
							'<div class="' +
							   '# if (data.value < 10) { #' +
								   "exhibition" +
							   '# } else if ( data.value < 20 ) { #' +
								   "party" +
							   '# } else { #' +
								   "cocktail" +
							   '# } #' +
							'">#= data.value #</div>' +
						 '# } else { #' +
						 '#= data.value #' +
						 '# } #'
			},
			footer: false
		});
	});
</script>

Configuration配置项

1、语言 culture
类型:String
默认:en-US
说明:配置日历显示什么语言,kendoui配有几十种语言包,详细的参看js\cultures文件夹。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        culture: "zh-CN" //指定为中文
    });
</script>
2、事件日期组 dates
类型:Array
说明:将用于在月视图模板下的日期集合。注意它不是自动显示在月视图下的,需要使用month.content来渲染。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        value: new Date(2000, 10, 1),
        dates: [
            new Date(2000, 10, 10, 10, 0, 0),
            new Date(2000, 10, 10, 30, 0)
        ] //月视图模板可渲染这些日期
    });
</script>
3、导航深度 depth
类型:String
说明:设置导航的深度级,可选以下值:
  1. "month":显示本月所有日期
  2. "year":显示本年所有月份
  3. "decade":显示这个区间的十个年头
  4. "century":显示本世纪的每个十年区间
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        depth: "year"
    });
</script>

注:本人并没发觉设置这个值有什么不同,不管设置什么值导航是一样的。

4、脚部内容 footer
类型:String|Function
说明:设置日历脚部模板内容,设值为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>
5、格式化 format
类型:String
默认:MM/dd/yyyy
说明:格式化日历使用value()方法返回的值。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        format: "yyyy/MM/dd"
    });
</script>
6、最大日期 max
类型:Date
默认:2099, 11, 31
说明:指定日历可显示的最大日期。
7、最小日期 min
类型:Date
默认:1900, 0, 1
说明:指定日历可显示的最小日期。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        min: new Date(2011, 0, 1),
		max: new Date(2021, 0, 1)
    });
</script>
8、月视图 month
类型:Object
说明:月视图下每个格子的模板。
9、月视图内容 month.content
类型:String
说明:默认月视图下每个格子只显示对应的日期,而通过此属性可修改本月日期范围内每个格子的显示内容。
<div id="calendar"></div>
<script id="cell-template" type="text/x-kendo-template">
    <div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
    #= data.value #
</script>
<script>
    $("#calendar").kendoCalendar({
        month: {
           content: $("#cell-template").html()
        }
    });
</script>
10、月视图空格子内容 month.empty
类型:String
说明:指定不在max/min范围内的月视图下每个格子显示的内容,默认是为空。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        month: {
           empty: '-' //指定无效日期里显示 "-"
        }
    });
</script>
11、默认初始视图 start
类型:String
默认:month
说明:指定初始时显示的视图。可选值有"month"、 "year"、 "decade"、 "century"四种视图。
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        start: "year"
    });
</script>
12、默认值 value
类型:Date
默认:null
说明:指定初始时日历选中的日期。
<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 left arrow 高亮前一天
3 right arrow 高亮后一天
4 up arrow 高亮同列上一个日期
5 down arrow 高亮同列下一个日期
6 ctrl + left arrow 向左切换视图
7 ctrl + right arrow 向右切换视图
8 ctrl + up arrow 向上切换视图
9 ctrl + down arrow 向下切换视图
10 home 选中本视图的第一格
11 end 选中本视图的最后一格
12 enter 如果在月视图下将选择高亮日期,其他视图将向下翻视图。

在线测试:http://demos.kendoui.com/web/calendar/index.html

关键词: kendoui,html5,calendar   编辑时间: 2013-10-27 20:08:51

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    2

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
80%(4)
20%(1)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程