web-dev-qa-db-ja.com

jqueryフルカレンダーと動的イベントの色

Jquery fullcalendarのjsonイベントソースを介してイベントの色を渡したいのですが、これをどのように実現しますか？

jqueryfullcalendar
23
Aneef

それより簡単なことはありません。 jQuery Fullcalendar Event Colors のドキュメントを確認すると、各イベントオブジェクトに指定できるパラメーターclassNameがあることがわかります。そのパラメーターの内容はクラスとしてイベントに追加されるため、一致する名前のCSSを指定するだけで済みます。

イベント（event1のclassNameパラメーターに注意してください）

[
  {
    title     : 'event1',
    start     : '2012-06-10',
    className : 'custom',
  },
  {
    title  : 'event2',
    start  : '2012-06-05',
    end    : '2012-06-07'
  },
  {
    title  : 'event3',
    start  : '2012-06-09 12:30:00',
    allDay : false
  }
]

作成するCSS event1 異なって見えます

.custom,
.custom div,
.custom span {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
}

クイックサンプルについては、ここ http://jsbin.com/ijasa3/96 を確認してください。 event1の背景色が緑、テキスト色が黄色になっていることに注意してください。

JQuery Fullcalendar Event Colors で説明されているオプションを使用した別の実行可能な方法は、次の行に沿って進むことができます。

別の色が必要なイベントには、異なるイベントソースを使用します。

$('#calendar').fullCalendar({
...
  eventSources: [
    //a full blown EventSource-Object with custom coloring
    {
      events: [  
        {
          title     : 'event1',
          start     : '2012-06-10'
        }
      ],
      backgroundColor: 'green',
      borderColor: 'green',
      textColor: 'yellow'
    },
    //a normal events-array with the default colors used
    [
      {
        title  : 'event2',
        start  : '2012-06-05',
        end    : '2012-06-07'
      },
      {
        title  : 'event3',
        start  : '2012-06-09 12:30:00',
        allDay : false
      }
    ]
  ],
  ...
});

http://jsbin.com/ijasa3/99

42
jitter

バージョン1.5では、各イベントでテキストの色、背景色、境界線の色を設定できます。

7
Joaquim Franco

バージョン1.5にアップグレードすると、これが機能しない場合があります。解決策は、スタイルをコメントアウトすることです

.fc-event-skin { }
6
Leo

より良いレンダリングを行うには、backgroundColorのEventObjectを使用することをお勧めします。

2
giuseppe