FullCalendar で色を変えるには

JavaScript

FullCalendar で、曜日やイベントの色を指定してみた。今回、FullCalendar 1.5.1 が前提。古いバージョンの場合、指定方法が異なる場合がある。

曜日の色を指定する

土曜日や日曜日などは色を変えたい。CSS を指定すればよい。

.fc-sun { color: red; }  /* 日曜日 */
.fc-sat { color: blue; } /* 土曜日 */

イベントの色を指定する (その１)

CSS でクラス名を指定して色を変更する。以下では、クラス名 fooEvent に対して、文字と背景の色を指定している。

fooEvent,
fooEvent .fc-event-skin {
  color: black;
  background-color: yellow;
  border-color: yellow;
}

イベントの色を指定する (その２)

FullCalendar 1.5 から、Event オブジェクトやEvent Source オブジェクトで色指定できるようになった。旧バージョンとは異なり、feed から色指定できるのがうれしい。

配列表現：

{
    events: [
        {
            title: 'Event1',
            start: '2011-04-04',
            color: 'green',     // an option!
            textColor: 'white'  // an option!
        },
        {
            title: 'Event2',
            start: '2011-05-05'
        }
        // etc...
    ],
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

JSON feed:

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

Google カレンダー feed:

{
    url: 'http://www.google.com/your_feed_url/',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}