带您开发日历控件(2)

有许多事件需要处理，只需点击一下日期即可.

{
    // 初始化事件
    _initEvent: function () {
        var my = this;
        jQuery(this.el)
            // 日期单元格
            .on('click', '.ep-calendar-date', function (e) {
                var date = this.getAttribute('data-date'),
                    ev = my.fire('dayClick', {
                        ev: e,
                        date: date,
                        day: this.getAttribute('data-isoweekday'),
                        el: my.el,
                        tdEl: this
                    });
                // 如果修改事件对象的cancel为true后 则不进行后续的选中操作
                if (!ev.cancel) {
                    my.setSelected(date);
                }
            })
    }
}

由于总是添加和删除与日期对应的dom元素，因此将事件直接绑定到日期的dom元素，因此每次添加新对象后都必须重新绑定该事件，这很麻烦.

直接使用事件代理机制将事件绑定到整个日历的dom，以便事件在创建后只能初始化一次，这既简单，高效又节省了内存.

我们新控件的主要目的是支持在日历中绘制任意内容，如何使用它？

var testCalendar = epctrl.init('Calendar', {
    el: '#date',
    // 资源加载过程中的事件需要直接在这里指定
    events: {
        beforeSourceLoad: function (e) {
            // 资源加载前，在加入我们的皮肤样式文件
            e.cssUrl.push('./test-skin.css');
        }
    }
});
// 日期部分渲染前 支持动态获取数据
testCalendar.on('beforeDateRender', function (e) {
    var startDate = e.startDate,
        endDate = e.endDate;
    // 如果需要动态获取数据
    // 则将获取数据的ajax加到事件对象的ajax属性上即可
    // 日期渲染的cellRender事件将在ajax成功获取数据后执行
    e.ajax = $.ajax({
        url: 'getDateInfo.xxx',
        // 将当月视图的开始和结束时间传递过去
        data: {
            start: startDate,
            end: endDate
        }
    });
});
// 控制渲染过程 可插入任意内容或修改原来的内容
testCalendar.on('cellRender', function (e) {
    if (!e.isHeader) {
        // 如：周五周六则插入周末 否则插入工作日
        e.extraHtml = '<div>' + (e.isoWeekday > 5 ? '周末': '工作日') + '</div>';
    }
});

以上是月视图日历控件的核心步骤.

此日历实现基于控件基类的扩展，并且它的必需功能只是一组事件机制. 您可以参考实现一组自定义事件机制

上面仅分析了关键步骤和核心代码. 为了促进使用和可伸缩性，实际代码中要处理许多问题. 源代码和文档如下，如果您感兴趣，可以阅读: 月视图日历

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-233410-2.html