移動端H5日歷組件，已廢棄不在維護

Moxmi 發布于2019-08-22 16:09 / 3596人閱讀

摘要：默認可選回調函數，綁定業務數據。例如某天有日程，則會在對應日期上標識出一個小紅點或者其他標識，默認傳入數據格式必選回調函數，當你點擊或輕觸某日期后執行。

文檔維護者：孫尊路

喜歡的話，記得star 一下噢！

適用場景

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

實例展示

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

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

典型項目應用案例

【移動OA類】我的日程

【招投標類】開標日程

依賴資源

libs/calendar_base.js 日歷組件基類js庫

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

配置和使用方法

DOM結構

一個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"}]

輸出內置組件模板格式：

25初九

優點和好處

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

存在的不足之處

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

GPU云服務器云服務器移動端webrtc h5 H5移動端上傳圖片日歷組件前端組件維護

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94102.html

移動端H5周歷組件

摘要：默認可選回調函數，綁定業務數據。切換為下一周，與組件內部傳入參數作用一樣，該支持異步成功回調里處理自己的業務邏輯。文檔維護者：孫尊路喜歡的話，記得star 一下噢！適用場景前些陣子，寫了一篇《日歷組件實現》的使用在線文檔，遇到一個需求：實現一個H5周歷來填寫每周的工作日志，去網上查閱資料，發現很多示例也沒有一個標準的使用文檔，感覺用起來也吃力，于是乎，自己造了一個周歷組件，文...

incredible 2019-08-22 16:35 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0
關于weex

摘要：在最上面的，阿里一般稱之為文件，通過轉換成，再部署到服務器，這樣服務端就完成了。例如，通過安裝了業界的工具庫用上和如今前端的開發，一般離不開預處理器，比如和。在默認的文件中，即使有的助力，這類預處理器也是對其無能為力的。生命周期 module.exports = { data: {}, methods: {}, init: function () { ...

chadLi 2019-08-20 12:27 評論0 收藏0
H5 input[type='date'] 優化 pc端和移動端的使用

標簽在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新屬性。本篇記錄在開發中使用date屬性，遇到的一些問題，以及功能擴展：獲取當前日期，并顯示在input[type=date]上 html: js: $(function(...

VincentFF 2019-08-30 11:12 評論0 收藏0