如何在特定日期在多日活动栏中显示图标？

Question

我正在寻找在FullCalendar月视图的多日活动中的特定日期显示图标的最佳方式。这里的想法是在更长的时间内显示里程碑日期。

我使用事件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>

Answer 1

要关闭这个问题的循环，我的实现有点像这样：

在第4662行和第4662行之间向FullCalendar.js添加了代码。 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>

然后，我可以通过索引或日期值定位本周的单个单元格，以添加代表里程碑元素的图标图像。