Webで手軽に表示できるシンプルなカレンダー

卓上カレンダーのようにシンプルで、かつWebブラウザさえあればいつでもどこでも誰でも手軽に見られるようなオンラインカレンダーが欲しかったので作りました。

Simplest Calendarです。

欲しかったのはこんなカレンダーです。

  • ログイン不要
  • すぐに表示できる
  • ファーストビューでカレンダーが全て表示できる
  • 土日と祝日がパッと見で分かる
  • 今日の日付も分かる
  • 簡単に次の月を表示できる
  • 余分なものがなるべく少ない

これまで日めくりカレンダー.comの月曜始まり版を使っていたのですが、(これはこれですごく便利なのですが、)どうもレスポンスが遅いことがあったのと、もっとシンプルなのが欲しかったので自分で作りました。Yahho Calendarで表示するだけのカレンダーのサンプルをちょっと改造しただけですが。

とりあえずしばらくこれを使ってみようと思います。

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さん、ありがとうございます。)

GCalendar Holidaysバージョンアップ(0.3.0) jQuery UIのDatepickerに対応

GoogleカレンダーからJSONPで日本の祝日一覧を取得 – GCalendar Holidays [ゼロと無限の間に]

フォームへの日付入力補助用カレンダーのjQuery UI Datepickerでも祝日を表示できるようにした。

使い方は、Daitepickerを使うページでGCalendar Holidaysを読み込むだけ。
GCalendar HolidaysでjQuery UI Datepickerに祝日を表示するのサンプルを参照。)

これでYUIとjQuery UIという2大(?)カレンダーに対応。

jQuery UIのDatepikcerってよくできてるよね。テキストボックスへの入力制限とか。親切にいろいろやってくれるのがおせっかいになる時もあるけど...

昔は英語のカレンダーだけだったけど、いつの間にか日本語にも対応してた。Yahho Calendar作る前にこれがあれったら、Yahho Calendarは作らなかったと思う。

Yahho Calendar バージョンアップ(0.4.4)

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

主な変更点

  • 複数のカレンダー(Googleカレンダーで公開されているスケジュール)を同時に表示できるようになった
  • 日付の値をセットする要素とは別に、カレンダーを表示する場所を指定できるようになった
  • ポップアップでない表示もできるようになった
  • YUIロード後にCallback関数を指定できるようになった
  • カレンダー内のStyle設定のclass指定を少し変更

今回の変更は0.4.4ではなく0.5.0にしようかと思った。それぐらいの内容だが、普通に使う分には使わない機能ばかりなので0.4.4にした。

0.4.3は欠番で。

YahhoCalendarバージョンアップ(0.4.2)

—–

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

—–

主な変更点

  • テキストボックス1つに日付を貼り付ける場合で日付のフォーマットを変更していた場合に、入力済み日付をカレンダーに反映できない問題を解消
  • 日付フォーマットでゼロ埋めする設定のプロパティ名(padZero)を修正

scmkさんからのフィードバックを取り込みました。(scmkさんありがとうございました。)

Yahho Calendarバージョンアップ(0.4.1)日付のフォーマットを設定可能にした

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

主な変更点

(0.4.1 beta 1から変更無し)

Yahho Carendar バージョンアップ(0.4.0)日付範囲の限定が簡単に

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

主な変更点

  • カレンダーで選択可能な最初の日と最後の日をそれぞれ指定できるようにした
  • カレンダーを表示中にカレンダー以外の場所をクリックされた場合、カレンダーを閉じるようにした
  • CSSの指定を少し簡略化
  • YUIのバージョンアップにともないロードするYUIのバージョンを2.6.0から2.7.0に上げた

本当はフォーカスが外れたらカレンダーを閉じるというのも盛り込みたかったけど、色んなケースに対応するのが大変そうなので断念。残念。

Yahho Calendarで選択できる日を限定する場合の設定方法

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

メールで質問を頂いたので、Yahho Calendarで選択可能な期間を限定する場合のサンプルを作った。

改めてみると、多国語対応したせいで、YUI Calendarのconfigをいじる方法が少し分かりづらくなっていたことに気付いた。 🙁

Yahho Calendaer バージョンアップ(0.3.2)6ヶ国語に対応

YUIのJavaScriptカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar [ゼロと無限の間に]

主な変更点

  • 従来の日本語・英語・中国語に加えて、韓国語・スペイン語・ポルトガル語に対応した
  • YUIのファイルのホスティング元を米Yahoo!からGoogleに変更
  • そこで、httpsのWebページの場合、YUIのファイルもhttpsでロードする。(上記ホスティング元の変更に伴い、httpsでYUIのファイルをロードすることが可能になった。)