Kendo UI之Calendar日曆表_轉載

原創 小匠石钧知 2020-06-14 03:14

文章目錄

前言

  本文轉載自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

<<返回目錄🏡
  配置日曆顯示什麼語言（默認是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 如果在月視圖下將選擇高亮日期，其他視圖將向下翻視圖。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Kendo UI簡介_轉載

文章目錄前言轉載內容👉簡介👉Kendo UI常用組件👉搭建一個Kendo UI測試項目  🍂準備開發包  🍂搭建測試項目  🍂熱身 - 導入css js 前言   因爲工作需要，我與Kendo UI相識。Kendo UI是一個豐富

小匠石钧知 2020-06-14 03:14:38

Kendo UI之ComboBox下拉列表_轉載

小匠石钧知 2020-04-20 00:11:09

Kendo UI之ColorPicker顏色選擇器_轉載

小匠石钧知 2020-04-20 00:11:09

Kendo UI之AutoComplete自動補齊_轉載

小匠石钧知 2020-04-17 02:57:47

Kendo UI簡介_轉載

文章目錄前言轉載內容👉簡介👉Kendo UI常用組件👉搭建一個Kendo UI測試項目  🍂準備開發包  🍂搭建測試項目  🍂熱身 - 導入css js 前言   因爲工作需要，我與Kendo UI相識。Kendo UI是一個豐富

小匠石钧知 2020-06-14 03:14:38

Kendo UI之ComboBox下拉列表_轉載

小匠石钧知 2020-04-20 00:11:09

Kendo UI之ColorPicker顏色選擇器_轉載

小匠石钧知 2020-04-20 00:11:09

Kendo UI之AutoComplete自動補齊_轉載

小匠石钧知 2020-04-17 02:57:47

kendoui treeview樹形菜單含有checkbox的選擇問題

hikvision_gongyq 2018-08-31 06:44:36

kendoui grid之合併單元格

hikvision_gongyq 2018-08-31 06:44:36