挪动端H5日历组件，已烧毁不在保护

2019年8月24日 247次阅读 来源: writeoncerunanywhere

文档维护者：孙尊路

喜好的话，记得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;
    }
});

参数申明

参数参数范例申明
containerstring或HTMLElement 必选 Calendar容器的css选择器，比方“#calendar”。默以为#calendar
prestring或HTMLElement 可选 前一个月按钮的css选择器或HTML元素。默许.pre
nextstring或HTMLElement 可选后一个月按钮的css选择器或HTML元素。默许.next
backToTodaystring或HTMLElement 可选 返回本日按钮的css选择器或HTML元素。默许.backToToday
dataRequestFunction 可选 回调函数，绑定营业数据。比方：某天有日程，则会在对应日期上标识出一个小红点也许其他标识，默许传入数据花样：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClickFunction 必选 回调函数，当你点击或轻触某日期 300ms后实行。回调日期效果：2018-04-07
swipeCallbackFunction 可选 回调函数，滑块开释时假如触发slider向后(左、上)切换则实行
templateFunction或String 可选，元素衬着的模板，可以是一个模板字符串，也可以是一个函数，为函数时，确保返回模板字符串，默许组件内置模板
isDebugBoolean 可选是不是开启调试形式，默许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库,思绪已经有了，只不过须要一点时候举行代码重构，若在此之前给你带来的不方便，还请多多见谅，毕竟优化组件确切须要消费大批时候的。

    原文作者：writeoncerunanywhere
    原文地址: https://segmentfault.com/a/1190000014268517
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞