使用原生html+css+js在移动端app中进行calendar日历组件的封装及使用，可自定义参数和事件方法等（示例及源代码）

前言

可运用于apicloud中

使用mui移动端组件框架

可定制化修改

主要功能有

1. 日历范围选择

2. 节假日显示，可配置是否显示节假日

3. 可设置初始日历个数

4. 上个月及下个月

5. 日期上标注可配置是否显示及自定义化

1.效果预览

2.组件接口封装calendar.js

/**
 * 移动webapp开发 日历组件
 * 可用于需要日历选择的场景
 *  - 日历范围选择
 *  - 节假日显示
 *  - 自由配置初始化生成多日历
 *  - 各种操作事件自由监听
 * @author zhaotian7282@126.com
 * ----------------------------------------------
 * 对外调用接口及自定义事件
 * @method render 渲染日历
 * @method nextMonth 上一月
 * @method prevMonth 下一月
 * @method show 显示日历
 * @method hide 隐藏日历
 * @method setSelectDate 设置当前选中日期

 * @customEvent selectDate 选择日期时派发事件
 * @customEvent show 显示日历时派发事件
 * @customEvent hide 隐藏日历时派发事件
 */

(function (root, factory) {
    if (typeof define === 'function') {
        define('calendar', ['mui'], function ($) {
            return factory(root, $);
        });
    } else {
        root.calendar = factory(root, root.mui);
    }
})(window, function (root, $) {

    var util = {
        /**
         * 根据当前年月，计算下一个月的年月
         * @para year {int} eg: 2014 YYYY
         * @para month {int} eg: 12 MM/M
         * @return {object} 
         */
        getNextMonthDate: function (year, month) {
            if (month > 12) {
                year = year + Math.floor((month - 1) / 12);

                if (month % 12 == 0) {
                    month = 12;
                } else {
                    month = month % 12;
                }
            }

            return {
                year: year,
                month: month
            }
        },

        /**
         * 处理小于10的数字前自动加0
         * @para num {num} int
         * return {string} '02'
         */
        formatNum: function (num) {
            if (num < 10) {
                num = '0' + num;
            }

            return num;
        },

        /**
         * 连接年月日，连接符为`-`
         * return {string} yyyy-mm-dd
         */
        joinDate: function (year, month, day) {
            var formatNum = util.formatNum;

            return year + '-' + formatNum(month) + '-' + formatNum(day);
        },

        /**
         * 将格式化后日期转化为数字，便于日期计算
         * @para date {string|date object} yyyy-mm-dd|日期对象
         * return {string} yyyymmdd
         */
        dateToNum: function (date) {
            var rst = '';
            if (typeof date == 'string') {
                rst = date.split('-').join('');
            } else {
                rst = util.formatDate(date).split('-').join('');
            }

            return rst;
        },

        /**
         * 格式化日期对象
         * @para {date object} 日期对象
         * return {string} yyyy-mm-dd
         */
        formatDate: function (dateObj) {
            var year = dateObj.getFullYear(),
                month = dateObj.getMonth() + 1,
                day = dateObj.getDate();

            return util.joinDate(year, month, day);
        },

        /**
         * 获取当前日期的下一天
         * @para date {string|date object} yyyy-mm-dd|日期对象
         * @para num {int} 获取指定日期之后的几天
         * return {string} yyyy-mm-dd
         */
        getNextDate: function (date, num) {
            return util.formatDate(new Date(+new Date(date) + num * 86400000));
        },
    };

    var tpl = [
        '<div class="cal-wrap">',
        '<h2>{%date%}</h2>',
        '{%week%}',
        '<ul class="day">',
        '{%day%}',
        '</ul>',
        '</div>'
    ].join('');

    var weekTpl = [
        '<ul class="week">',
        '<li>一</li>',
        '<li>二</li>',
        '<li>三</li>',
        '<li>四</li>',
        '<li>五</li>',
        '<li class="wk">六</li>',
        '<li class="wk">日</li>',
        '</ul>'
    ].join('');

    var holidaysMap = [
        {
            name: '今天',
            date: [util.formatDate(new Date())]
        },
        {
            name: '明天',
            date: [util.formatDate(new Date(+new Date() + 86400000))]
        },
        {
            name: '后天',
            date: [util.formatDate(new Date(+new Date() + 2 * 86400000))]
        },
        {
            name: '圣诞节',
            date: ['2014-12-25', '2015-12-25', '2016-12-25', '2017-12-25', '2018-12-25', '2019-12-25', '2020-12-25']
        },
        {
            name: '情人节',
            date: ['2015-02-14',