下面是关于“jQuery EasyUI API 中文文档 - Calendar日历使用”的完整攻略。

jQuery EasyUI API 中文文档 - Calendar日历使用

Calendar简介

Calendar是EasyUI提供的一款日历插件，可以用来选择日期等操作。

Calendar基本用法

引入EasyUI的JS和CSS文件
在HTML中添加一个div作为Calendar的容器
使用jQuery代码初始化Calendar

下面是一个最简单的例子：

<!DOCTYPE html>
<html>
<head>
    <title>Calendar Demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/mobile.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="cc"></div>
    <script type="text/javascript">
        $('#cc').calendar();
    </script>
</body>
</html>

这里我们使用了EasyUI提供的默认主题CSS文件和jQuery库文件，其中#cc是我们添加的div容器的ID，.calendar()是Calendar的初始化函数。

Calendar配置项

Calendar提供了一系列的配置项，可以通过这些配置项来定制化Calendar的外观和行为。下面是一些常用的配置项：

width：设置Calendar的宽度
height：设置Calendar的高度
fit：设置Calendar根据父容器自适应大小
border：设置Calendar边框的大小和样式，可以是数字或字符串形式
firstDay：设置Calendar的周起始日，0为周日，1为周一，默认为0
weekNumberHeader：在Calendar的顶部显示周数，默认为false
showToday：显示“今天”按钮，默认为true

下面是一个例子，使用了其中的一些配置：

<!DOCTYPE html>
<html>
<head>
    <title>Calendar Demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/mobile.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="cc"></div>
    <script type="text/javascript">
        $('#cc').calendar({
            width: 350,
            height: 300,
            fit: true,
            border: '1px solid #ccc',
            firstDay: 1,
            weekNumberHeader: true,
            showToday: false
        });
    </script>
</body>
</html>

Calendar事件

Calendar还提供了一些事件，可以在特定的时间点做出响应，常用的事件有：

onSelect：在选择日期时触发
onChange：在改变日期时触发
onClear：在清空日期时触发

下面是一个例子，演示了如何在选择日期时弹出提示框：

<!DOCTYPE html>
<html>
<head>
    <title>Calendar Demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/mobile.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="cc"></div>
    <script type="text/javascript">
        $('#cc').calendar({
            onSelect: function(date){
                alert('您选择的日期是：' + date.getFullYear() + '年' + (date.getMonth()+1) + '月' + date.getDate() + '日');
            }
        });
    </script>
</body>
</html>

示例1：使用Calendar实现一个日程管理器

下面是一个实际场景下的示例，使用Calendar实现一个日程管理器。

<!DOCTYPE html>
<html>
<head>
    <title>日程管理器</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/mobile.css">
    <script type="text/javascript">
        var currentYear = 0,
            currentMonth = 0,
            currentDay = 0;

        $(document).ready(function(){
            $('#calendar').calendar({
                onSelect: function(date){
                    currentYear = date.getFullYear();
                    currentMonth = date.getMonth()+1;
                    currentDay = date.getDate();
                    $('#schedule').datagrid('load',{year:currentYear,month:currentMonth,day:currentDay});
                }
            });

            $('#schedule').datagrid({
                url: 'data/schedule.php',
                width: '100%',
                height: '100%',
                fitColumns: true,
                striped: true,
                rownumbers: true,
                singleSelect: true,
                columns: [[
                    {field:'date_time',title:'时间',width:100},
                    {field:'content',title:'内容',width:500}
                ]],
                queryParams: {
                    year: currentYear,
                    month: currentMonth,
                    day: currentDay
                }
            });
        });
    </script>
</head>
<body>
    <table id="schedule"></table>
    <div id="calendar"></div>
</body>
</html>

在这个例子中，我们通过在Calendar的onSelect事件中记录用户所选日期，再使用Ajax技术向服务器发送请求，从数据库中读取该日期对应的日程数据，并将日程显示在datagrid中。

示例2：在EasyUI中使用Calendar实现双日历对比

下面是另一个例子，演示如何使用两个Calendar实现日期选择对比。

<!DOCTYPE html>
<html>
<head>
    <title>双日历对比</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/mobile.css">
    <script type="text/javascript">
        $(document).ready(function(){
            $('#cal1').calendar({
                onSelect: function(date){
                    $('#cal2').calendar('moveTo', date);
                }
            });

            $('#cal2').calendar({
                onSelect: function(date){
                    $('#cal1').calendar('moveTo', date);
                }
            });
        });
    </script>
</head>
<body>
    <div id="cal1"></div>
    <div id="cal2"></div>
</body>
</html>

在这个例子中，我们使用了两个Calendar，并在它们的onSelect事件中修改另一个Calendar的日期，实现了双日历的对比效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery EasyUI API 中文文档 – Calendar日历使用 - Python技术站

jQuery EasyUI API 中文文档 – Calendar日历使用