JQueryMobileでも使えるスマートフォン向けカレンダー


ここ最近、お仕事でJQueryMobileでiPhone, Android他向けのサイトを作ったりしてます。JQueryMobile、いいっすよね。まだ結構バグが残ってて悩む事もありますが、そこはそれ、まだAlpha版なので。

で、サイトを作っている際にカレンダーを使うことがありまして。いろいろ調べてはみたものの、iPhone向けのカレンダーってのは殆ど見当たらない。iCalがあるからあまり必要とされないのかもしれないですね。

とはいえ、必要ですので仕方なしに、PC向けに作られているものにちょっと手を入れて、iPhone, Androidで使えるようにしてみました。

ベースはiCal-like calendars with jQueryを使わせて頂いております。

一回タップでツールチップ（ていうのかな？）が表示されます。で現在はコメントアウトしてますが、もう一度タップすると別ページに遷移できるようになっています。

PCの場合はマウスオーバーでツールチップ表示、クリックで別ページに遷移、って感じです。

ソースコード及び一式は以下。

2011/01/10版

改善点
今回は動作変更です。2011/01/10版とは大幅に動きが変わっていますので、上記のデモをみていただいてお好きな方をどうぞ。

  • ツールチップを自動的に隠す動作から、テーブル内の別箇所タップで消去に変更
  • ツールチップが表示されている場合は、ツールチップクリックでリンク先に遷移するよう変更

2011/01/10版

改善点

2011/01/07版

いろいろいじくってみてはいますが、正直JQueryとかあまりよくわかりせん。ここおかしいよ、ってのはがあれば指摘いただけますと嬉しいです。