一款靈活好用的日歷控件Kalendae

Kalendae是一款純js不依賴任何js庫的日歷控件，可以輕松實現顯示月份數量，當前選中多個日期，並可以按照周等你想要的格式去定制選中項。

下載地址：GitHub/Kalendae

第一步：Kalendae引用

使用前需要引用樣式文件kalendae.css和JS文件kalendae.standalone.js

<link href="../App_Common/Kalendae/build/kalendae.css" rel="stylesheet" type="text/css" />
 <script src="../App_Common/Kalendae/build/kalendae.standalone.js" type="text/javascript"></script>

第二步：未指定容器(控件)加載Kalendae

var ArrDate = $("#FACE_COURSE_TIME").val().split(",");
         kal = new Kalendae($("#SelectCourseDate")[0], { months: 2, mode: 'single',
             subscribe: { "change": function () { $("#SKDate input[type='radio'][value='{0}']".format(kal.getSelected())).attr("checked", true); } },
             blackout: function (date) {
                 var equal = false;
                 for (var i = 0; i < ArrDate.length; i++) {
                     if (Kalendae.moment(date).format("YYYY-MM-DD") == ArrDate[i])
                         equal = true;
                 }
                 //判斷是否禁用
                 if (!equal)
                     return true;
             }
         });

或者使用CSS方式直接加載日歷控件

<div class="auto-kal"></div>

參數設置

<div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>

使用JQ創建加載日歷控件

$(selector).data('kalendae')

第三步：使用參數說明

attachTo：將此日歷控件加載至所在容器；

mode：控件選擇模式，"single"單個日期選擇，"multiple"多個日期選擇，"range"選擇日期范圍。