2013-02-07 50 views
1

我正在尋找最佳方式在FullCalendar月視圖的多日事件內的特定日期顯示圖標。這裏的想法是在更長的時間內顯示里程碑日期。如何在特定日期的多日事件欄內顯示圖標?

我使用Event div內的相對定位嘲笑了這個截圖,但懷疑這可能會變得非常匆忙。

eventRender回調的上下文中是否存在樣板方法?是否有可能確定事件之下/之內一天的位置?

<div class="fc-event-inner fc-event-skin"> 
    <span class="fc-event-title">SB-019902</span> 
    <img title="Stone 1" style="position: relative; left: 100px;" src="w.png" /> 
    <img title="Stone 2" style="position: relative; left: 200px;" src="w.png" /> 
</div> 

enter image description here

回答

0

要關閉循環在這個問題上我實現去有點像這樣:

添加了代碼FullCalendar.js線4662 & 4663之間注入表標籤與一個並使用序列化日期添加CSS類屬性以指示該單元格的日期:

html += 
    "<div class='dayTableWrapper " + ((seg.isStart) ? "isStart" : "isEnd") + "'><table class='dayTable'><tr>"; 

    for (var colNum = leftCol; colNum <= rightCol; colNum++) { 
     var classDateString = formatDate(t.cellDate({ row: seg.row, col: colNum }), 'u').substring(0, 10); 
     html += 
     "<td class='dayContainer dayContainer-" + colNum + " date-" + classDateString + "'></td>"; 
    } 
html += 
    "</tr></table></div>"; 
html += 
    "</div>"; 

它產生的標記是這樣的:

<div class="fc-event-inner fc-event-skin"> 
    <span class="fc-event-title _fc1">Event Title</span> 
    <div class="dayTableWrapper isEnd"> 
     <table class="dayTable"> 
      <tbody> 
       <tr> 
        <td class="dayContainer dayContainer-0 date-2013-04-07"></td> 
        <td class="dayContainer dayContainer-1 date-2013-04-08"></td> 
        <td class="dayContainer dayContainer-2 date-2013-04-09"></td> 
        <td class="dayContainer dayContainer-3 date-2013-04-10"></td> 
        <td class="dayContainer dayContainer-4 date-2013-04-11"></td> 
        <td class="dayContainer dayContainer-5 date-2013-04-12"></td> 
        <td class="dayContainer dayContainer-6 date-2013-04-13"></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

當時我能夠通過索引或日期值,以便添加表示的里程碑元件的圖標圖像靶向周的各個細胞。

相關問題