今天帮同事研究了一下 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]
});
}
};
先写这么多吧。