6

こんにちは、Adam Shaw ( http://arshaw.com/fullcalendar/ )の FullCalendar を使用しています。月とアジェンダウィークビューを使用しています。ユーザーが月ビューの日付またはアジェンダウィーク ビューのタイムスロットにカーソルを合わせているときに、ホバー効果を入れたいと考えています。css を次のように変更しようとしました。

.fc-widget-content:hover {
        background-color: red;
    }

これは月表示で機能します。ファイルが添付された 1月16日にホバー

ただし、強調表示するタイムスロットが 1 つだけ必要な場合でも、同じコードでアジェンダウィーク ビューの行全体が選択されます。

以下の例の図は、マウスカーソルがあった水曜日 02-01 のタイムスロットだけではなく、毎日の午後 1:00 スロット全体が強調表示されていることを示しています。

1 つのタイムスロットではなく、行全体にカーソルを合わせる

これを達成する方法についてのアイデア。

どうもありがとう。

4

5 に答える 5

4

あなたは一人ではありません。FullCalendar の多くのユーザーは、標準でサポートされている個々の時間帯が強調表示されることを望んでいます。Google Code にはこれに関する問題があります。

この問題は 2009 年 10 月に発生したものであるため、期待を裏切らないように思われますが、複数のユーザーが別の回避策を提案しています。これらの 1 つが私のコードで正常に動作しているため、チェックアウトする価値があるかもしれません。

于 2013-01-03T09:11:47.457 に答える
3

これはcssだけで実現できるものではありません。問題は、週のグリッドが 2 つのテーブルを重ね合わせて作成されていることです。どちらも背景がないため、グリッドの印象を与えますが、真のグリッドではありません。グリッドの縦方向の部分は z-index が高いため、常に上に表示されるため、高さに対してホバー イベントが発生することはありません。ボックスがハイライト表示されるようにユーザーを騙す方法を試してみましたが、グリッド内の垂直方向の位置を知ることができなければ、実際には不可能です。jqueryでできることかもしれませんが、その労力は割に合わないと思います。

于 2013-01-02T20:46:02.693 に答える
1

このコードを $('#calendar').fullCalendar( ... ); の後に貼り付けます。これにより、テーブルに追加のTDが作成されます:)

$("table.fc-agenda-slots th").each(function () {
    $(this).width(50);
});
$("table.fc-agenda-slots td.fc-widget-content").each(function () {
    $(this).width(($("table.fc-agenda-days thead th.fc-col0").width()));
    $(this).after("<td class=\"fc-widget-content\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col5").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col4").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col3").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col2").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col1").width() + "px\"><div style=\"position:relative\"></div></td>");
});

そして、これはホバーのスタイル css です:

table.fc-agenda-slots td.fc-widget-content
{
    border-right: 1px #DDD solid;
}
table.fc-agenda-slots td.fc-widget-content:hover
{
    background-color: #F1F1F1;
}
于 2013-11-21T18:43:20.730 に答える
0

カレンダーの読み込み後にこれを追加します。

$("table.fc-agenda-slots td.fc-widget-content div").each(function () {
                $(this).html("&lt;table cellspacing=\"0\" style=\"width:100%\"&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;");
            });
于 2013-11-21T14:11:28.827 に答える