web-dev-qa-db-ja.com

フルカレンダーセルの背景色の設定

フルカレンダーでセルの背景色を設定する方法についていくつかのトピックを見ましたが、どれもうまくいきませんでした。カレンダーは、日付を.fc-day5または.fc-day17として使用して日をリストするために使用されていたと思いますが、バージョン1.6.2ではもうありません。

レンダリングされているいくつかのイベントのリストがあり、それらのセルの色(イベントセルだけでなく、終日のセル)を特定の色に設定したいと思います。

'eventRender'を使用してクラスを設定しようとしています

eventRender: function (event, element, monthView) { 
                if (event.className == "holiday") {
                    $day = $date.getDate();
                    $("td.fc-day-number[value='" + $day + "']").addClass("holiday");
                }
            },

背景色の設定方法についてご不明な点がございましたら、お気軽にお問い合わせください。

9
vegas2033

まあ、あなたはこれを行うことができます。

{
  title: 'Some title',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor',
  borderColor: '#SomeColor'
},
{
  title: 'Some title2',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor2',
  borderColor: '#SomeColor2'
}

さらに、次のようにクラス名を設定できます。

{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["red"]
},
{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["green", "secondClass"]
}

次に、そのスタイルのクラスについて説明します

<style>

.red {
    background-color:red;
}

.green {
    background-color:green;
}
.green{
// do something
}
</style>
9

イベントの背景色を設定してみてください。このようなもの:

event.backgroundColor = 'cccccc#';

またはセルの背景の場合:

$('.fc-day[data-date="' + date + '"]').css('background', color);

dateは、php Y-m-d日付形式と同等の日付文字列である必要があります。カレンダーがレンダリングされたときにスタイルを変更する必要があります。

14
joni jones