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函數？

回答

相關問題