移動端『H5日曆組件』已廢棄再也不維護

文檔維護者：孫尊路 轉載請註明出處。

喜歡的話，記得star 或關注一下吧！

適用場景

• 該組件目前僅適用於移動端H5頁面展現，後期高級用法中會講述到如何基於日曆基類實現自定義模板傳入。（即：開發者只須要傳入本身的模板便可實現出本身的優美的日曆出來。） 本篇主要是帶你們入門日曆組件的使用，該文檔後面會持續優化更新。如有不足，請你們多多指教，小編會及時更正！

實例展現

• 日曆示例演示，支持滑動屏幕左右切換等效果 注：按F12可在瀏覽器預覽

• 示例demo源代碼(H5)：點擊此處進行下載

典型項目應用案例

• 【移動OA類】 個人日程
• 【招投標類】 開標日程

依賴資源

• libs/calendar_base.js 日曆組件基類js庫
• libs/calendar_base.css 日曆組件基類css庫，能夠根據業務需求，任意個性化，從而達到設計視覺效果

配置和使用方法

DOM結構

一個div便可

<div id="calendar"></div>
複製代碼

初始化

如下代碼是最簡單的用法，更多複雜用法請參考calendar_showcase源碼下載

var calendar = new Calendar({
    // 日曆容器
    container: "#calendar",
    // 點擊日期事件
    onItemClick: function(item) {
        var defaultDate = item.date;
    }
});
複製代碼

參數說明

參數	參數類型	說明
container	string或HTMLElement	必選 Calendar容器的css選擇器，例如「#calendar」。默認爲#calendar
pre	string或HTMLElement	可選 前一個月按鈕的css選擇器或HTML元素。默認.pre
next	string或HTMLElement	可選後一個月按鈕的css選擇器或HTML元素。默認.next
backToToday	string或HTMLElement	可選 返回今天按鈕的css選擇器或HTML元素。默認.backToToday
dataRequest	Function	可選 回調函數，綁定業務數據。例如：某天有日程，則會在對應日期上標識出一個小紅點或者其餘標識，默認傳入數據格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick	Function	必選 回調函數，當你點擊或輕觸某日期 300ms後執行。回調日期結果：2018-04-07
swipeCallback	Function	可選 回調函數，滑塊釋放時若是觸發slider向後(左、上)切換則執行
template	Function或String	可選，元素渲染的模板，能夠是一個模板字符串，也能夠是一個函數，爲函數時，確保返回模板字符串，默認組件內置模板
isDebug	Boolean	可選是否開啓調試模式，默認false

API

生成的calendar對象能夠調用以下API

var calendar = new Calendar(...);
複製代碼

refresh()

會銷燬清空日曆容器中的數據從新進行渲染。默認傳入參數爲空，刷新當前月份的日曆數據。

calendar.refresh();
複製代碼

同時也能夠手動傳入某個日期渲染日曆數據，例如：渲染出2020-08-08的日曆以下：

calendar.refresh({
    year: "2020",
    month: "08",
    day: "08"
});
複製代碼

參數說明

參數	參數類型	說明
{}	object	必選 日期對象必須傳入如下格式：{year:"2018",month:"04",day:"08"}

slidePrev()

切換爲上一個月，與組件內部傳入參數pre做用同樣，該API支持Promise異步成功回調裏處理本身的業務邏輯。

calendar.slidePrev().then(...).then(...);
複製代碼

slideNext()

切換爲下一個月，與組件內部傳入參數next做用同樣，該API支持Promise異步成功回調裏處理本身的業務邏輯。

calendar.slideNext().then(...).then(...);
複製代碼

addActiveStyleFordate()

給特定日期新增選中激活樣式,好比：把日期2018-08-21標記位已選中狀態。

calendar.addActiveStyleFordate("2018-08-21");
複製代碼

參數說明

參數	參數類型	說明
"2018-08-21"	String	必選 日期格式必須符合如下格式：2018-08-21

refreshData()

會獲取整個月的日曆數據（6 * 7 = 42方格的日期），可根據該API自行個性化開發本身的日曆組件，例如：

calendar.refreshData({
    year: "2018",
    month: "04",
    day: "08"
},
function(output, data) {
    console.log("==某個月的日曆渲染數據：==" + JSON.stringify(data));
    console.log("==組件自帶模板==" + output);
});

複製代碼

輸出日曆數據格式：

[{"day":25,"lunar":"初九","date":"2018-03-25","isforbid":"0"}]
複製代碼

輸出內置組件模板格式：

<div class="em-calendar-item isforbid0"date="2018-03-25"><span class="day">25</span><p class="lunar">初九</p></div>
複製代碼

優勢和好處

可以極大方便實際項目上開發人員的上手使用，並且版本是不斷根據實際項目上的需求進行優化升級的，開放源碼可讓特殊需求的項目開發人員進行修改、補充和完善。

存在的不足之處

目前依賴js庫有多個（mustache.min.js、mui.min.js）主要是一些經常使用的移動端js庫（無可厚非），包含組件的核心庫，或許有人認爲影響加載速度之類的，其實已經有不少項目在應用效果還能夠，固然了小編也正在努力剝離第三方js庫,思路已經有了，只不過須要一點時間進行代碼重構，若在此以前給你帶來的不便，還請多多包涵，畢竟優化組件確實須要花費大量時間的。