skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

超クールなカレンダー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」