フルカレンダーで日付の背景色を変更する必要があります。私の場合はこの質問に似ています。フルカレンダーで日付の範囲の背景色を変更しますが、解決策はEVENTの背景色を変更することです。私が欲しいのは、コントローラーから受け取った日付のセルの背景色を次のように変更することです["2013-02-22", "2013-2-20"]
この日付を解析してから、jquery css関数を使用して背景色を変更しようとしましたが、機能しませんでした。
フルカレンダーで日付の背景色を変更する必要があります。私の場合はこの質問に似ています。フルカレンダーで日付の範囲の背景色を変更しますが、解決策はEVENTの背景色を変更することです。私が欲しいのは、コントローラーから受け取った日付のセルの背景色を次のように変更することです["2013-02-22", "2013-2-20"]
この日付を解析してから、jquery css関数を使用して背景色を変更しようとしましたが、機能しませんでした。
月ビューでは、次のように個々の日の背景色を設定できます (jQuery を使用):
$(".fc-day4").addClass("myBackgroundClass");
CSS ファイルには、次のようなものがあります。
.myBackgroundClass {
background-color: grey;
}
これにより、ビューの 4 日目 (必ずしも月の 4 日目とは限りません。月のビューの最初の日は実際には前月のものであることが多いため) は灰色の背景になります。
ビューではagendaWeek
、動作が異なります。
$(".fc-col0").addClass("myBackgroundClass");
これにより、一番左の曜日が灰色の背景で表示されます (fc-col1 .. fc-col6
他の 6 日間に使用します)。ビューではagendaDay
、単に使用しますfc-col0
。
難しいのは、どの日付がカレンダーのどの列 (そして、月ビューの場合は行) に対応するかを計算することです。これらの計算はコールバックで行うことができます。これはdocsviewDisplay
によると、「カレンダーが読み込まれ、異なる日付範囲が表示されるたびに」トリガーされます。
計算を開始するときに、すべての列と行からカスタム背景を削除する必要があります。これは、次のように行うことができます。
$(".myBackgroundClass").removeClass("myBackgroundClass");