1.2/demo/demo2.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>静态日历</title>
    <script src="http://g.tbcdn.cn/kissy/k/1.3.0/kissy-min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="tmp/style.css" />
</head>
<body>
<div id="example">
    <ul>
        <li>
            <button class="J_Count" data-count="1">单日历</button>
            <button class="J_Count" data-count="2">双日历</button>
            <button class="J_Count" data-count="3">三日历</button>
            <button class="J_Count" data-count="4">四日历</button>
        </li>
        <li>
            <button class="J_Holiday" data-holiday="1">显示节假日</button>
            <button class="J_Holiday" data-holiday="0">隐藏节假日</button>
        </li>
        <li>
            <button class="J_Limit" data-value="90">限制时间范围(今天-》90天)</button>
            <button class="J_Limit">取消限制</button>
        </li>
        <li>
            <button class="J_Select" data-select="1">下拉表单选择时间</button>
            <button class="J_Select" data-select="0">取消下拉表单选择</button>
            <span class="gray">(为下拉表单选择时，只允许显示单日历)</span>
        </li>
    </ul>
</div>
<div id="J_Example"></div>
<script>
var S = KISSY;

if (S.Config.debug) {
    var srcPath = "../../../";
    S.config({
        packages:[
            {
                name:"gallery",
                path:srcPath,
                charset:"utf-8",
                ignorePackageNameInUri:true
            }
        ]
    });
}

S.use('gallery/calendar/1.2/index', function(S, Calendar) {
    var $ = S.all;

    /**
     * 静态日历演示
     *
     * 基本参数配置使用实例
     */
    var calendar = new Calendar({
        'container': '#J_Example'
    });

    // 设置日历个数
    $('.J_Count').on('click', function(e) {
        calendar.set('count', $(this).attr('data-count'));
        calendar.render();
    });

    // 设置节假日显示/隐藏
    $('.J_Holiday').on('click', function(e) {
        calendar.set('isHoliday', $(this).attr('data-holiday') * 1);
        calendar.render();
    });

    // 时间范围限制
    $('.J_Limit').on('click', function(e) {
        var node    = $(this);
        var isLimit = node.hasAttr('data-value');
        var today   = Calendar.DATE.stringify(new Date);

        calendar.set('date', today);
        calendar.set('minDate', isLimit ? today : '');
        calendar.set('maxDate', isLimit ? Calendar.DATE.siblings(today, node.attr('data-value')) : '');
        calendar.render();
    });

    // 下拉表单选择时间
    $('.J_Select').on('click', function(e) {
        calendar.set('isSelect', $(this).attr('data-select') * 1);
        calendar.render();
    });

    // 显示选择的日期及日期信息
    calendar.on('dateclick', function(e) {
        alert(e.date + '【'+ e.dateInfo +'】');
    });
});
</script>
</body>
</html>