超クールなカレンダーjavascript「Calendar」

これまで多くのデートピッカーと呼ばれるカレンダーを紹介してきました。
しかし、総じて地味な外見が多かったです。
今回紹介するCalendarは超クールなカレンダーを作成できるjavascriptです。

使用方法
Calendarからcalendar.jsをmootoolsからmootools.jsをダウンロードしてください。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/calendar.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
myCal = new Calendar({
date: 'd/m/Y'
});
});
</script>
上記を記述したら、inputにidとしてdateを付与すれば完成です。
<input id="date" type="text">
ただし、このままだと寂しいカレンダーが表示されます。
このスクリプトの特徴はCSSで簡単に装飾できるところです。
紹介元では、以下のサンプルを含め、3通りを公開しています。
自分で作るのが面倒くさい人はこちらをどうぞmooCalendar.zip
超クールなカレンダーjavascript「Calendar」サンプル

2008年01月09日

前の記事：MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」
次の記事：リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」

関連記事

• カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• [mootools]WysEditor
• [mootools]TimeSpinner
• [prototype]DateChooser

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」