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'>&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

来源

2017-04-21 Andrius

你可能会想到这一点。在你的日历上不会实现“dayRender”回调（https://fullcalendar.io/docs/display/dayRender/）可以让你做你需要的吗？如果您在JS数组中有一组预先加载的“特殊”日期，您可以根据列表检查每个渲染日期以查看是否需要显示额外的信息）。另外，考虑更新您的fullCalendar版本 - 1.x已经暂时不支持。 3.3.1是最新的！ – ADyson

我使用eventRender回调函数通过可以在eventRender中访问的元素将html附加到事件。有一个dayRender回调。也许你可以做一些类似的回调？ –

@ADYSON可能会尝试这样的事情，但我不知道我应该在哪里抓住那些渲染的日子？我所看到的，有一些事件渲染函数被定义，但我需要赶上日子，而不是事件。也许你可以写一些例子，使其更清楚？对于版本，不幸的是我被绑定到该版本，因为它是使用fullCalendar的另一个系统的一部分（如果我切换，它可能会破坏与其他系统部件的兼容性）。 – Andrius

我能够修改像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视图，它将不起作用。

来源

2017-04-21 20:31:01 Andrius

jQuery fullCalendar - 扩展buildCellHTML函数？

回答

相关问题