Question

我希望扩展fullCalendar，以便在各自的日期单元格中显示特殊日期名称。例如，如果用户定义特殊日期（在后端）2017-12-25并将其称为Christmas，则进入日历后，他会在该单元格上看到Christmas个字词（假设在左上角））。

因此，查看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'>&nbsp;</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

Answer 1

我能够修改像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视图，它将无效。

jQuery fullCalendar - 扩展buildCellHTML函数？

1 个答案: