まったりゲーム記

やはりTAPは名作だと思うのだ

全体表示

[ リスト ]

巷ではYahoo! UI ライブラリが便利便利と騒がれてますが、英語版なんでどーにもとっつきにくいんですよね。

しかも、ソースがデカくて追うのが大変。

せっかく便利な機能が満載なのになぁ…


何でそんな話をしてるかって、ちょっとポップアップカレンダーが欲しくて、「Yahoo! UI ライブラリのカレンダーとかどうよ?」と薦められたのがきっかけです。

でまあ、それなりに頑張って調べたり弄ってみたりしたものの、微妙に扱いづらくて投げ出しました。




というわけで、もっと使いやすいカレンダーはないものかと探してみたところ、JKL.Calendarなるものを発見した次第です。

日本人作ということで、コメントやドキュメントが全て日本語、しかもソースが短くまとまっていて読みやすく、既存のソースに埋め込む量が少ないおかげで使いやすい。

三拍子そろっていて、とても素敵な軽量カレンダーです。

年月の表示が「××××年○○月」ってところも評価大。
(Yahoo! UI ライブラリだと、「月 年」の順で表示される)


で、そんなJKL.Calendarを色々といじって、以下の機能を付け足してみました。

・表示開始曜日をプロパティに追加
・今日日付の文字色をプロパティに追加
・日付を枠線で区切るように変更
・枠線の描画ON/OFFをプロパティに追加
・邪魔な<select>への応急処置(※)

※IEだとリストボックスが優先して上位レイヤに描画されてしまう(CSSのz-indexプロパティを変更してもダメ)
 これを回避するには、IFRAMEを上位レイヤに描画し、その上にオブジェクトを描画する必要がある
 何ともダメダメな仕様だが、そういう風に動くのだからどうしようもない






適当に弄って遊んでみてください。





__________________________________________
● 2006/11/27更新

邪魔なSELECT対応で、高さの取得ができてなかったんで、修正しました↓
(IE6だけ、応急処置のコードが働きます。IE5とかカンベンしてください)








__________________________________________
● 2006/11/30更新

・邪魔なSELECT対応は、IE5.5とIE6系のみ機能するように条件を変更
・z-indexの値をプロパティとして追加
・インデントのタブを半角スペース×4に変更
・選択可能な曜日を設定できるようにしてみた(プロパティに配列を追加)
・今日日付のセルの背景色をスタイルに追加
・選択不可能な曜日の背景色をスタイルに追加



※IE6.0.2とFireFox2.0で動作確認をしています(かなりやっつけ仕事ですが)



__________________________________________
● 2006/12/30更新

SSLで参照するとセキュリティ警告が出る件に対応?
 ※JSと同じフォルダに「dummy.html」という名前の空ファイルを配置してください


なお、今回修正したソースは、ksuzu_kleさんが機能を追加してくれたものをベースにしています。
ksuzu_kleさん、ありがとうございました!



__________________________________________
● 2007/02/04更新

アクアさんご指摘のバグを修正しました。

・setDateYMDのセット順を、日→月→年、に修正
・TDのスタイルに背景色を指定するよう修正


アクアさん、ありがとうございました。




__________________________________________
● 2007/05/24

何か、しばらくほったらかしにしていたら、各所でカスタマイズされたカレンダーが...

誰かソースをマージして、改めて公開してくれないかなー(←他力本願)

とりあえず、和暦変換は色々と需要がありそうなんで、久しぶりにソースをいじってみようかと考えてます。

あ、その前に、SSL関連の問題に対応したバージョンをUPしておきますね。
(些細な修正ですが、最新版がバグ有りのファイルってのは具合が悪いので...)

この記事に

閉じる コメント(32)

顔アイコン

これいいですね。使用したいのですがライセンスはどうなっていますか? 本家と同じく修正BSDライセンスなんかだと大変うれしいです。 削除

2007/1/19(金) 午前 3:49 [ やむやむ ] 返信する

顔アイコン

>やむやむさん ライセンスは本家と同じで修正BSDライセンスです。お好きなようにいじって使ってください。

2007/1/20(土) 午後 9:04 [ ti_*a*_tgm ] 返信する

顔アイコン

修正BSDライセンスですね。ありがとうございます。また迅速なご対応にも感謝です。 削除

2007/1/21(日) 午後 1:32 [ やむやむ ] 返信する

顔アイコン

ちょうど今日気付いたのですが、テキストボックスに最初から2007/02/28がセットされている状態でカレンダーの初回表示が3月で表示される現象がありました。調べてみたところ、setDateYMD内で年月日の順にセットしていく途中で初期状態の今日日付(2007/01/29)に対してsetMonthした時点で2007/02/29となり、存在しないため勝手に2007/03扱いになるのが原因のようです。日月年の順でセットするように修正すれば大丈夫なようでしたのでご報告いたします。 削除

2007/1/29(月) 午後 5:58 [ アクア ] 返信する

顔アイコン

それからもう1件なのですがスタイルシートの設定に関して、background属性を指定してあるtable内でこのカレンダーを使うとmonth_td_style/week_td_style/days_td_styleでそのbackground属性が継承されてしまうため、frame_color/day_bgcolor等と関係ない色で表示されてしまうようでした。明示的にbackground属性も指定するように修正して使っていますが、こちらも反映していただけるとうれしいです。 削除

2007/1/29(月) 午後 6:00 [ アクア ] 返信する

顔アイコン

>アクアさん ご指摘のバグについて、こちらの環境での再現を確認し、修正しました。ありがとうございました。

2007/2/4(日) 午後 11:29 [ ti_*a*_tgm ] 返信する

顔アイコン

私もYahooUIを使いたくないと思ってこちらにたどりつきました。ちょっと気が付いたのですが、日付選択した時にonChangeで自動的にsubmit()したいと思ったのですがonChangeは効かないし、functionをセットするメソッド足すしかないんですかね。。? day_onclick()の最後に if (__this.func) { __this.func(); } のようにして。もしよければこちらのソースにも取り入れていただければと思うのですが。では。 削除

2007/2/6(火) 午後 11:34 [ shin ] 返信する

顔アイコン

カレンダー系をググって、こちらにきました。すばらしいカレンダーですね。httpsの問題って解決しました?えーっと素人考えで申し訳ないのですが、ソース中のiframeを記述している箇所のsrc="dummy.html"を src=http://img.yahoo.co.jp/images/clear.gif IE6とFireFox2.0で確認しました。 報告まで。。(すでに対応されていた場合はゴメンなさい)。 削除

2007/2/7(水) 午前 11:04 [ COG ] 返信する

顔アイコン

上の投稿、おかしくなってしまった。ごめんなさい。 iframeのsrc指定の箇所をMicroSoftのページのままに記述すると OKでした(以下の記述)。 ”/?scid=dummy.htm”(全て半角にして下さい) 以上です。 削除

2007/2/7(水) 午前 11:11 [ COG ] 返信する

顔アイコン

COGさん、ご指摘の方法で解消されました。ありがとうございました。

2007/2/7(水) 午後 0:46 [ bar*o*o ] 返信する

顔アイコン

COGさん、ありがとうございました。httpsの問題、行き詰っていたんですが、まさかそんな単純なことだったとは…サーバの設定なのか、とか悩んでいたのはなんだったんだ…

2007/2/8(木) 午前 1:31 [ ti_*a*_tgm ] 返信する

顔アイコン

すいません。 返信カキコ、超遅れてました。申し訳けないです。 えーっと、お役にたててウレしいです。 ちょうど社内用で営業ツールに使う日付指定のテキストをどうしたものか といろいろ悩んで、VBライクな入力方法(初心者でもフォーマット チェックの心配がない方法)がいいかなぁ。。。と ググってこちらのページにたどり着いたのが、ご縁です。 おかげ様でちょっとイケてる営業ツールを作成することができました。 みなさんのおかげです。ありがとうございました。 &今後ともよろしくお願い致します。 削除

2007/2/22(木) 午後 5:24 [ COG ] 返信する

顔アイコン

こんにちは。 安達さんからJKL.Calendarに私のところで公開している祝日判定コードを利用する改良版の連絡を貰い、以下のカレンダーコントロール解説ページでJKL.Calendarの紹介を載せさせて頂きました。http://www.h3.dion.ne.jp/~sakatsu/Excel_Tips06.htm

2007/3/16(金) 午後 0:25 [ 角田 ] 返信する

顔アイコン

カレンダーの日付を選択後、テキストボックスには「平成19年05月16日」と表示されるようにカスタマイズしたのですが上手くできません。 なぜか「成19年05月16日」と表示されてしまいます。 最初の「平」の文字が出力できずに困っています。何かよい方法はないでしょうか? 削除

2007/5/16(水) 午前 10:53 [ コサ ] 返信する

顔アイコン

なかなか良いライブラリが無く、困っていたのですが、これはすばらしいです!!ぜひ使わせていただきます。 削除

2008/3/18(火) 午前 1:20 [ たー ] 返信する

顔アイコン

http://kubira.21mhz.net/carrier_sample.html
川崎さんのJKLカレンダーと郵便番号住所双方向変換を
ポップアップガジェットにしてみました。

2009/2/16(月) 午前 0:23 [ 陳風蘭 ] 返信する

顔アイコン

非常に助かりました!ありがとうございました! 削除

2010/11/5(金) 午後 6:16 [ fa ] 返信する

顔アイコン

いつも使わせていただいています。ありがとうございます。
日付を選択したときにこちらで独自の処理をさせたいのですが
こういう場合はどうすればいいでしょうか?
JavaScriptに疎くday_onclickの中を直接書き換えるくらいしか
方法がわかりませんでした。ライブラリのソースを変えずに
対応できたらよいのですが・・・ 削除

2011/10/7(金) 午後 11:18 [ otto ] 返信する

顔アイコン

前年、翌年への移動を追加して使わせていただきました。有難うございます。
前月・次月への移動関数が、移動月数を引数で渡す方式でしたので、-12,+12を渡して前年、翌年への移動を追加しました。 削除

2012/7/16(月) 午後 0:01 [ booskanium ] 返信する

顔アイコン

突然訪問します失礼しました。あなたのブログはとてもすばらしいです、本当に感心しました! 削除

2013/6/28(金) 午後 3:30 [ マルベリー 財布 ] 返信する

コメント投稿

顔アイコン

顔アイコン・表示画像の選択

名前パスワードブログ
絵文字
×
  • オリジナル
  • SoftBank1
  • SoftBank2
  • SoftBank3
  • SoftBank4
  • docomo1
  • docomo2
  • au1
  • au2
  • au3
  • au4
投稿

開く トラックバック(5)


.


みんなの更新記事