fullcalendarで任意の日付に色をつけたい

Question

プログラミング全くの初心者です。cssとhtmlが少しわかる程度です。
hp制作でワードプレスを使ってプラグインのwp-fullcalendarとevent-managerを連携させています。

http://equivalent.sakura.ne.jp/wp/calendar/

カレンダーを月ごとに、任意の日付だけセルの色を変え、休日をわかりやすく表示したいのですが、cssで変えられるものなのか、javascriptなどで変更しなければならないのかもわかりません。

このようなサイトも参考にしましたが、
http://micronwave.hatenablog.jp/entry/20130902/1378086594
javascriptについて知識がないため、どこにどのようにコードを入れればいいのかわかりませんでした。

どなたかわかる人がいらっしゃいましたら、ご教授お願いします。
よろしくおねがいします。

Answer 1

このカレンダーのプラグインいいですね！ 自分も使おう・・・

さておき、サイトを拝見しましたところ、以下の２通りを思いつきました。

###クラスでCSS

.fg-mon{
    background-color:black; !important
}

曜日に応じてクラスが振られてるみたいなので、そこにCSSを適用させると休日とかは楽に表現できるのではないでしょうか。
上は月曜日の例です。

###data属性でCSS

.fg-day[data-date="2016-01-23"]{
    background-color:black; !important
}

各日の日付がデータ属性として格納されているので、そこにCSSを適用する手もあります。
これで祝日とかイレギュラーなイベントに対応できるかなと。
上は今年の1/23の例です

ブラウザの技術者ツールを使うといろいろ使えそうなものが発見できます。
ぜひご自身でも探してみると良いと思います。

Comments

[pankuzu]

wozniak385 様

丁寧でわかりやすい回答をどうもありがちうございました。
おかげで、色を変えることができました！

cssのデータ属性というものを知りませんでした・・・！
ブラウザの技術者ツールも使って色々試してみたいと思います。

感謝です。