1

FullCalendar の月ビューで複数日のイベント内の特定の日にアイコンを表示する最良の方法を探しています。ここでのアイデアは、より長い期間内のマイルストーンの日付を表示することです。

Event div 内の相対的な配置を使用してこのスクリーンショットをモックアップしましたが、これは急いで非常に醜くなる可能性があると思われます。

コールバックのコンテキスト内でこれを行うボイラープレート メソッドはありeventRenderますか? イベントの下/内で 1 日の位置を特定することは可能ですか?

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

ここに画像の説明を入力

4

1 に答える 1

0

この質問のループを閉じるために、私の実装は次のようになりました。

FullCalendar.js の 4662 行と 4663 行の間にコードを追加して、1 日 1 セルのテーブル タグを挿入し、シリアル化された日付を使用して 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>

その後、マイルストーン要素を表すアイコン画像を追加するために、インデックスまたは日付の値によって週の個々のセルをターゲットにすることができました。

于 2013-04-18T00:14:50.713 に答える