fullcalendar 的回调函数包含源码

今天帮同事研究了一下 fullcalendar的回调函数。

需求是使用fullcalendar ，但是纵向布局不按照时间刻度，以列表的形式。

思路是在插件视图渲染的完成后执行回调，编写回调函数，达到自己的目的。

由于fullcalendar的回调函数比较零乱，这里归纳到一块，一起做个总结。

1、viewRender 视图渲染（初始化）回调函数。

//视图渲染时，也就是初始化，执行的回调函数
//通过这个地方可以添加自己类似于loadSuccess 的回调函数
源码
View.prototype.triggerViewRender = function () {
        this.publiclyTrigger('viewRender', {
            context: this,
            args: [this, this.el]
        });
    };
//我这 这个回调里 去掉了 时间刻度尺
 viewRender:function(){
	//alert("render");
	$(".fc-axis").hide();
 }

2、viewDestroy 视图销毁回调函数。

// 视图销毁时 执行的回调函数
源码：
View.prototype.triggerViewDestroy = function () {
        this.publiclyTrigger('viewDestroy', {
            context: this,
            args: [this, this.el]
        });
    };

3、dayClick 在视图上点击一个（以天为单位）单元格区域触发的回调。

//区域范围只有在start部分才是可用的。
View.prototype.triggerDayClick = function (footprint, dayEl, ev) {
        var dateProfile = this.calendar.footprintToDateProfile(footprint); // abuse of "Event"DateProfile?
        this.publiclyTrigger('dayClick', {
            context: dayEl,
            args: [dateProfile.start, ev, this]
        });
    };

4、eventRender 事件渲染（就是根据数据渲染日程）当日程事件渲染时触发（一条数据执行一次）。

 // 给一个默认的dom元素，通过回调返回一个真实的dom元素。
 EventRenderer.prototype.filterEventRenderEl = function (eventFootprint, el) {
        var legacy = eventFootprint.getEventLegacy();
        var custom = this.view.publiclyTrigger('eventRender', {
            context: legacy,
            args: [legacy, el, this.view]
        });
        if (custom === false) {
            el = null;
        }
        else if (custom && custom !== true) {
            el = $(custom);
        }
        return el;
    };

5、eventAfterRender 渲染后触发的回调事件（一条数据执行一次）

  DateComponent.prototype.triggerAfterEventSegsRendered = function (segs) {
        var _this = this;
        // an optimization, because getEventLegacy is expensive
        if (this.hasPublicHandlers('eventAfterRender')) {
            segs.forEach(function (seg) {
                var legacy;
                if (seg.el) {
                    legacy = seg.footprint.getEventLegacy();
                    _this.publiclyTrigger('eventAfterRender', {
                        context: legacy,
                        args: [legacy, seg.el, _this]
                    });
                }
            });
        }
    };

6、eventAfterAllRender 当所有日程事件渲染全部渲染完成后触发。我的实际应用是在这之后从新调整布局。

 DateComponent.prototype.triggerAfterEventsRendered = function () {
        this.triggerAfterEventSegsRendered(this.getEventSegs());
        this.publiclyTrigger('eventAfterAllRender', {
            context: this,
            args: [this]
        });
    };

7、loading 数据加载前后的回调方法，这个方法会在有数据加载调用时，执行两次。根据参数判断执行前，还是执行后。

第一个参数为true，执行前的回调；第一个参数为false ，执行后的回调。

  Calendar.prototype.pushLoading = function () {
        if (!(this.loadingLevel++)) {
            this.publiclyTrigger('loading', [true, this.view]);
        }
    };
    // Should be called when any type of async data fetching completes
    Calendar.prototype.popLoading = function () {
        if (!(--this.loadingLevel)) {
            this.publiclyTrigger('loading', [false, this.view]);
        }
    };

8、windowResize 当窗口大小调整时候，触发的回调方法。

 Calendar.prototype.windowResize = function (ev) {
        if (
        // the purpose: so we don't process jqui "resize" events that have bubbled up
        // cast to any because .target, which is Element, can't be compared to window for some reason.
        ev.target === window &&
            this.view &&
            this.view.isDatesRendered) {
            if (this.updateViewSize(true)) {
                this.publiclyTrigger('windowResize', [this.view]);
            }
        }
    };

9、eventResizeStart 日程从新调整开始时候触发的回调方法。

EventResizing.prototype.segResizeStart = function (seg, ev) {
        this.isResizing = true;
        this.component.publiclyTrigger('eventResizeStart', {
            context: seg.el[0],
            args: [
                seg.footprint.getEventLegacy(),
                ev,
                {},
                this.view
            ]
        });
    };

10、eventResizeStop 日程从新调整结束时候触发的回调方法。

 EventResizing.prototype.segResizeStop = function (seg, ev) {
        this.isResizing = false;
        this.component.publiclyTrigger('eventResizeStop', {
            context: seg.el[0],
            args: [
                seg.footprint.getEventLegacy(),
                ev,
                {},
                this.view
            ]
        });
    };

11、eventDragStart 日程从拖动开始时候触发的回调方法。

 EventDragging.prototype.segDragStart = function (seg, ev) {
        this.isDragging = true;
        this.component.publiclyTrigger('eventDragStart', {
            context: seg.el[0],
            args: [
                seg.footprint.getEventLegacy(),
                ev,
                {},
                this.view
            ]
        });
    };

12、eventDragStop 日程从拖动结束时候触发的回调方法。

 EventDragging.prototype.segDragStop = function (seg, ev) {
        this.isDragging = false;
        this.component.publiclyTrigger('eventDragStop', {
            context: seg.el[0],
            args: [
                seg.footprint.getEventLegacy(),
                ev,
                {},
                this.view
            ]
        });
    };

13、eventDrop 日程拖动到放入时触发的事件。

View.prototype.triggerEventDrop = function (eventInstance, dateDelta, undoFunc, el, ev) {
        this.publiclyTrigger('eventDrop', {
            context: el[0],
            args: [
                eventInstance.toLegacy(),
                dateDelta,
                undoFunc,
                ev,
                {},
                this
            ]
        });
    };

14、select 日程被选中时触发的回调

View.prototype.triggerSelect = function (footprint, ev) {
        var dateProfile = this.calendar.footprintToDateProfile(footprint); // abuse of "Event"DateProfile?
        this.publiclyTrigger('select', {
            context: this,
            args: [
                dateProfile.start,
                dateProfile.end,
                ev,
                this
            ]
        });
    };

15、unselect 日程被选中时触发的回调。

 View.prototype.unselect = function (ev) {
        if (this.isSelected) {
            this.isSelected = false;
            if (this['destroySelection']) {
                this['destroySelection'](); // TODO: deprecate
            }
            this.unrenderSelection();
            this.publiclyTrigger('unselect', {
                context: this,
                args: [ev, this]
            });
        }
    };

先写这么多吧。

fullcalendar 的回调函数 包含源码

猜你喜欢

fullcalendar 的回调函数包含源码