jQuery fullCalendar - 扩展buildCellHTML函数?
我想扩展fullCalendar
,它会在各自的日期单元格中显示特殊日期名称。例如,如果用户定义了特殊日期(在后端)2017-12-25
并将其称为Christmas
,那么通过进入日历,他会在该单元上看到Christmas
单词(例如,在左上角)。jQuery fullCalendar - 扩展buildCellHTML函数?
所以寻找到fullCalendar源,我可以看到,它建立在使用该功能的细胞:
function buildCellHTML(date) {
var contentClass = tm + "-widget-content";
var month = t.start.getMonth();
var today = clearTime(new Date());
var html = '';
var classNames = [
'fc-day',
'fc-' + dayIDs[date.getDay()],
contentClass
];
if (date.getMonth() != month) {
classNames.push('fc-other-month');
}
if (+date == +today) {
classNames.push(
'fc-today',
tm + '-state-highlight'
);
}
else if (date < today) {
classNames.push('fc-past');
}
else {
classNames.push('fc-future');
}
html +=
"<td" +
" class='" + classNames.join(' ') + "'" +
" data-date='" + formatDate(date, 'yyyy-MM-dd') + "'" +
">" +
"<div>";
if (showNumbers) {
html += "<div class='fc-day-number'>" + date.getDate() + "</div>";
}
html +=
"<div class='fc-day-content'>" +
"<div style='position:relative'> </div>" +
"</div>" +
"</div>" +
"</td>";
return html;
}
现在,如果我将直接通过加入这一行修改fullCalendar库:
html += "<div>Placeholder</div>"
此前:
if (showNumbers) { html += "<div class='fc-day-number'>" + date.getDate() + "</div>"; }
它增加了我基本需要的东西,但是当然我不想直接修改库,我想扩展它。纵观文档,我似乎无法找到如何延长日间细胞内容。
而且这个函数是另一个函数的内部函数,所以我无法访问它(或者我可以吗?)。但是也许有人更熟悉fullCalendar,可以说明如何做这个扩展?
P.S.请注意我正在谈论整天的细胞,而不是事件(有特定的事件附加到它)。我的意思是它应该只是检查那天是否特别的一天,不管当天是否有事件(尽管在后端实现的特殊日期实现与此无关)。
P.S.S.我正在使用的fullCalendar版本是1.6.4
我能够修改像Adyson和M.D建议的单元格内容。于是我想出了确切的片段是这样的(占位符是只是为了显示它正在改变):
instance.web_calendar.CalendarView.include({
get_fc_init_options: function(){
fc_options = this._super()
return $.extend({}, fc_options, {
dayRender: function(date, cell){
cell.children('div')
.prepend('<div style="float:left; padding: 0 2px">placeholder</div>')
}
});
},
})
请注意,我用this._super()
。这被Odoo用来模仿像其他OOP语言一样的继承。
P.S.这仅适用于month
日历视图。切换到week
或day
视图,它将不起作用。
你可能会想到这一点。在你的日历上不会实现“dayRender”回调(https://fullcalendar.io/docs/display/dayRender/)可以让你做你需要的吗?如果您在JS数组中有一组预先加载的“特殊”日期,您可以根据列表检查每个渲染日期以查看是否需要显示额外的信息)。另外,考虑更新您的fullCalendar版本 - 1.x已经暂时不支持。 3.3.1是最新的! – ADyson
我使用eventRender回调函数通过可以在eventRender中访问的元素将html附加到事件。有一个dayRender回调。也许你可以做一些类似的回调? –
@ADYSON可能会尝试这样的事情,但我不知道我应该在哪里抓住那些渲染的日子?我所看到的,有一些事件渲染函数被定义,但我需要赶上日子,而不是事件。也许你可以写一些例子,使其更清楚?对于版本,不幸的是我被绑定到该版本,因为它是使用fullCalendar的另一个系统的一部分(如果我切换,它可能会破坏与其他系统部件的兼容性)。 – Andrius