Calendar -『爲移動端而生』的自定義日曆

時間 2019-11-07

標籤 calendar 爲移動端而生自定義日曆欄目無線简体版

原文原文鏈接

Calendar - A Flexible Calendar for Mobile

Intro

Calendar was born for several product requirements in the mobile. It’s free, cute and customized. html

The Calendar was builded by protogenic JavaScript. So you can use it with jQuery，Vue, React, and so on.git

github --- https://github.com/AppianZ/calendar, 歡迎使用github

中文文檔在後面~算法

Calendar - 自我介紹

Calendar是爲了知足移動端對各類場景的需求而生的，兼容性強，靈活度高。npm

原生插件，能夠與任何框架配合使用。數組

特點功能

☑️ 限制時間範圍，精確到【日期】app
☑️ 有【直接佈局】和【彈層顯示】兩種不一樣調用樣式框架
☑️ 自由設置【月份和星期的中英文顯示】、【星期天的排序位置】和【切換操做】dom
☑️ 利用回調控制【每個日期】的不一樣樣式ide
☑️ 能夠【選中】時間點，或【時間範圍】
☑️ 能夠根據實際須要，【調整預判手勢的靈敏度】

親自體驗一下demo：⬇️⬇️⬇️

Demo & NPM

How To Use

1. html中：

<body>
    <!-- 在彈層模式中會須要一個元素觸發彈層，target 能夠是任意html標籤。-->
    <div id="target">我是一個點擊區域,你們快來點我</div>
    <!-- 插入日曆的容器 --> 
    <div id="container"></div>
</body>

2. js中：

// 方式一, 直接引用
<script src="calendar.js"></script>
// 方式二, 引入npm包
import Calendar from 'mob-calendar';

<script> 
    // 實例化一個日曆插件，具體參數意義能夠看下文中的參數列表
    new Calendar({
        clickTarget: 'target',
        container: 'container',
        angle: 0,
        isMask: true, // 是否須要彈層
        beginTime: [2017, 1, 1],//如空數組默認設置成1970年1月1日開始,數組的每一位分別是年月日。
        endTime: [2018, 1, 13],//如空數組默認設置成次年12月31日,數組的每一位分別是年月日。
        recentTime: [2018, 1, 2],//如空數組默認設置成當月1日,數組的每一位分別是年月日。
        isSundayFirst: true, // 週日是否要放在第一列
        isShowNeighbor: true, // 是否展現相鄰月份的月尾和月頭
        isToggleBtn: true, // 是否展現左右切換按鈕
        isChinese: true, // 是不是中文
        monthType: 3, // 0:1月, 1:一月, 2:Jan, 3: April
        canViewDisabled: false, // 是否能夠閱讀不在範圍內的月份
        beforeRenderArr: [{
            stamp: 1512057600000,
            className: 'able',
        }],
        success: function (item, arr, cal) {
            console.log(item, arr);
            cal.hideBackground();
        },
        switchRender: function (year, month, cal) {
            console.log('計算機識別的 - 年份: ' + year + ' 月份: ' + month);
            var data = [{
                'stamp': 1507737600000,
                'className': 'able1',
            }];
            cal.renderCallbackArr(data);
        }
    });
</script>

如何正確生成實例，請看參數列表：⬇️⬇️⬇️

參數列表

參數名稱	做用	類型	取值	是否必須
clickTarget	觸發彈層的dom元素ID	{String}	-	×
container	日曆容器的dom元素ID	{String}	-	√
angle	調整預判手勢的靈敏度	{Number}	建議5-20	×
isMask	佈局是否使用彈層樣式	{Boolean}	true:彈層顯示, false:正常佈局	√
beginTime	開始時間點	{Array(Number)}	數組的每一位分別是年月日，空數組默認1970年1月1日	√
endTime	結束時間點	{Array(Number)}	數組的每一位分別是年月日，空數組默認次年12月31日	√
recentTime	當前時間點	{Array(Number)}	數組的每一位分別是年月日，空數組默認當前月1日	√
isSundayFirst	星期天是否要放在第一列	{Boolean}	true:星期日在第一列, false:星期日在最後一列	√
isShowNeighbor	是否展現相鄰月份的月尾和月頭	{Boolean}	true:顯示相鄰月份的月尾和月頭, false:不顯示	√
isToggleBtn	是否展現左右切換按鈕	{Boolean}	true:顯示左右切換按鈕， false:不顯示	√
isChinese	是否展現中文星期	{Boolean}	true:顯示中文星期簡寫，false:顯示英文星期簡寫	√
monthType	月份的展現字符	{Number 0-3}	0:1月, 1:一月, 2:Jan, 3: January	√
canViewDisabled	是否能夠閱讀不在範圍內的月份	{Boolean}	true:無限滑動，false:只查看時間範圍內的月份	√
beforeRenderArr	初次渲染時給特殊日期指定樣式	{無序Array(Object)}	數組元素有兩個參數 `指定時間戳stamp{Number}` 和 `指定樣式名字className {String}`，詳見下文	√
success	點擊某個日期的回調	{Fuction(item, array,cal)}	返回3個自帶參數，`item`表示當前點擊的時間戳，`array`表示連續兩次點擊的兩個時間戳,`cal` 指向實例	√
switchRender	日曆切換後的回調	{Fuction(year, month, cal)}	返回3個自帶參數，`year`表示新生成的年份，`month`表示新生成的月份(從0開始), `cal` 指向實例	√

js中：

// 渲染時給特殊日期指定樣式的數據格式
beforeRenderArr: [{
    stamp: 1512057600000, // 指定某個時間戳
    className: 'disable', //指定該時間戳渲染的樣式
}]

html中：

// 渲染後的效果以下
// li 是一個矩形，i 是圓形
<li class="container-item-1512057600000 disable" data-stamp="1512057600000">
    <i data-stamp="1512057600000">2</i>
</li>

原型鏈暴露的函數	做用	示例
renderCallbackArr	渲染傳入的數組data，用於指定特定日期的特定樣式, 數組data和 `beforeRenderArr` 的數據格式一致	cal.renderCallbackArr(data)
prevent	方便在回調中阻止默認事件	cal.prevent()
hideBackground	在彈窗模式中，可能須要用到的隱藏彈層的函數	cal.hideBackground()