GCalendar Holidays バージョンアップ(0.4.0)jQuery UI Datepickerの土日に背景色を表示

GoogleカレンダーからJSONPで日本の祝日情報を取得するJavaScriptライブラリのGCalendar Holidaysをバージョンアップしました。バージョン番号は0.4.0です。

大きな変更点は、jQuery UI Datepickerを合わせて使った場合に、Datepikcerの土曜日・日曜日に背景色を塗るようにしたことです。

jQuery UI DatepickerはCSSで土日をまとめて指定するのは簡単(class属性にui-datepicker-week-endがあるので)ですが、土曜日と日曜日を別々のスタイルにしようと思うと少しだけ面倒です。(やり方さえ知ってれば難しくはないのですが。)
そこで、祝日に色を付けるついてに土日にもそれぞれ色を付けるようにしてみました。

GCalHolidays.datepickerStylesにスタイルを設定すれば、表示するスタイルを変更することもできます。
文字色を変更したい場合や、逆に背景色を変更したくない場合などはこれを使ってください。
これに合わせて、これまでコードに埋めていた祝日のスタイル設定もGCalHolidays.datepickerStyles.holidayにセットすることにより外部から変更できるようにしました。

土日祝日の背景色は、Yahho Calendarに比べて濃い目にしてあります。
YUI Calendarに比べてjQuery UI Datepickerは全体的に濃いのでそれに合わせたというのと、jQuery UIはテーマを選択できるのでどのテーマでも無難にするには濃い目の方が都合が良かったためです。
(濃い目だと、背景が薄い感じのテーマでも、背景が黒で文字が白抜きのテーマでもどちらでもある程度なじめるので。)

また、その他の変更点として、Googleカレンダーに登録してあるイベントが月末日でかつ時間が0時0分でない場合、そのイベントが取得できない問題を解消しました。
(id:navさん、ありがとうございます。)

3 Replies to “GCalendar Holidays バージョンアップ(0.4.0)jQuery UI Datepickerの土日に背景色を表示”

  1. ありがたく使わせてもらっています
    基礎的な質問ですみませんが、カレンダーを複数月表示している際に、最初の月の祝日しか色つきになりません。土日はすべての月で色がついているので、少しいじればできるだろうと思っていたのですが分かりませんでした
    もしよければ教えてください

  2. (↑補足)jQuery UI Datepickerとの組み合わせです。例えばnumberOfMonths:2などの場合に、常に左側の月でしか祝日が色つきになりません。土日は両月とも色がつきます

  3. 匿名さん、こんにちは。コメントありがとうございます。

    そのままだと numberOfMonths には対応できませんね。ちょっと改良して numberOfMonths にも対応できるようにしてみたのでダウンロードし直してみてください。(バージョン0.5.0です。)

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください