目指せ非プログラマー

もう何でもごじゃれ言語

fullcalendar で、特定日付の背景色を変更する javascript

FullCalendarはGoogleライクなカレンダー(Google カレンダーみたいなカレンダー)です。

jQueryjQuery UI を使用してたように思います。

・・・jQuery UIどこで使ってんだ?w

 

詳しくはFullCalendarの公式を見てください。

 

それでは題にあることに取り掛かってみます。

こいつは、ちょっとGoogleさんに聞いてみてぱっと出てこなかったので、メモ程度にちょちょいっと。

 

まず、特定の日を指定したい!

FullCalendarでカレンダーを描画後、htmlを見てみると。

まぁ、表でカレンダーが作成されています。

そして、個々の日は

 <td class="fc-day fc-mon fc-widget-content fc-first" data-date="2013-09-02">

ってな感じで記述されていました。

 

data-date="日付"

 

ってことで特定の日を指定することは簡単でしたね。

ちなみに曜日はclassで指定されているので特定曜日の色も簡単に変更できそうです。

 

それではjavascriptで変更していきます。カレンダー描画後

 

$("td[data-date = '2013-09-02']").hoge("background", "#ff0000");

 

hogeをcssに変更してください

これで特定日の背景色が変更できました。