日程管理控件 glDatePicker

時間 2019-12-20

標籤日程管理控件 gldatepicker 简体版

原文原文鏈接

以前接觸過一款日程管理控件，叫 FullCalendar ，功能很強大，會列出天天的事項，可選擇編輯而且能夠定製本身的日曆，然而，有時候，咱們的網頁上只須要一個簡單的日曆，迷你但實用，有日程安排的日期高亮顯示，可跳轉日期，可選擇日期等等基本功能都應該具有，而這時 FullCalendar 就顯得太過龐大了，因此，就有了我對 glDatePicker 控件的學習。javascript

先看效果：css

橘紅色表示當前選擇的日期，藍色表示今天日期，綠色表示特使日期，能夠理解爲有日程安排的日期，關於顏色名稱的描述可能不許確，就不要深究了。。。另外，後面兩張圖片能夠看出是能夠跳轉到指定日期的。html

該控件有多個皮膚，只須要選擇對應的本身以爲好看的 css 文件便可，本例中爲默認樣式。java

該控件還能夠設置哪些日期可選，哪些不可選，能夠捆綁數據，能夠監聽點擊事件和鼠標懸浮等等。jquery

有一點須要注意的是，該控件爲 datePicker 控件，通常須要經過其餘頁面元素來觸發，也就是說該控件每每是跟在一個 input 以後的，可是如今須要的是日程管理，而不是日期選擇，因此，咱們不須要有其餘控件的出現，這裏我用了一個很原始的辦法來解決的，就是寫一個空的 div ，設置其寬爲200px ，高爲0，而且設置該日曆始終顯示，這樣就能夠基本解決問題了。git

下面是控件的快速使用方法：github

<link href="glDatePicker.default.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src="jquery-1.9.1.js"></script>
<script type='text/javascript' src="glDatePicker.min.js"></script>

<body>  
    <div id="test"></div>
</body>

#test{
    width: 200px;
    height: 0;
}

$(function () {
　　$('#test').glDatePicker(
　　{
    　　showAlways: true,      //一直顯示，也能夠點擊文本框觸發，當純粹datePicker使用
　　　　//dowNames: ['日', '一', '二', '三', '四', '五', '六'],
　　　　//monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  漢化

    　　specialDates: [
        　　{
            　　date: new Date(2013, 9, 16),
            　　data: jsonObject  //jsonObject數據，能夠根據須要設計
        　　}
    　　],
    　　onClick: function(target, cell, date, data) {
       　　//TODO
    　　}
　　});
})