kendoUI系列教程之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

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        culture: "zh-CN" //指定为中文
    });
</script>

<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

1. "month"：显示本月所有日期
2. "year"：显示本年所有月份
3. "decade"：显示这个区间的十个年头
4. "century"：显示本世纪的每个十年区间

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

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

4、脚部内容 footer

<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>

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

6、最大日期 max

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

8、月视图 month

<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

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

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

12、默认值 value

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

<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 快捷键

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

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

• 

  0

  高兴
• 

  1

  支持
• 

  0

  搞笑
• 

  2

  不解
• 

  0

  谎言
• 

  0

  枪稿
• 

  0

  震惊
• 

  0

  无奈
• 

  0

  无聊
• 

  0

  反对
• 

  0

  愤怒