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

sunzunlu發表於2018-04-09
H5元件

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

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

適用場景

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

例項展示

移動端『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庫,思路已經有了，只不過需要一點時間進行程式碼重構，若在此之前給你帶來的不便，還請多多包涵，畢竟優化元件確實需要花費大量時間的。

相關文章