如何在特定日期的多日事件栏中显示图标？答案

【问题标题】：How to display icons within multi-day Event bar at specific days?如何在特定日期的多日事件栏中显示图标？
【发布时间】：2013-02-07 07:57:58
【问题描述】：

我正在寻找在 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>

【问题讨论】：

标签： jquery fullcalendar

【解决方案1】：

为了结束这个问题的循环，我的实现有点像这样：

在 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>

然后，我能够按索引或日期值定位一周中的各个单元格，以便添加代表里程碑元素的图标图像。

【讨论】：