JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」

｜ ｜ ｜ ｜ ｜ ｜

JavaScriptでカレンダーを作る方法はいろいろありますが、なかなか満足のいくものは多くありません。
jCalはJavaScriptライブラリ「jquery」を使用し、お手軽かつクールなカレンダーを作成可能です。

使用方法 jCalからファイル群をダウンロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.animate.clip.js"></script>
<script type="text/javascript" src="http://yourdomain/jCal.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/jCal.css">
<script type="text/javascript">
$(document).ready(function () {
$('#id名').jCal();
</script>
あとは表示させたい場所に上記で記述したid名を記載すれば完成です。
<div id="id名">
カレンダーをローディング中です。
</div>
また日本語にするのも簡単で、以下のようにします。
$(document).ready(function () {
$('#id名').jCal({
dow: ['日', '月', '火', '水', '木', '金', '土'],
ml: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
});
});
JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」サンプル

2008年09月08日

前の記事：カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
次の記事：セクシーなLightBoxを実現するJavaScript「Sexy LightBox」

関連記事

• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• jQueryベースのカレンダー作成javascript「jCalendar」
• jQueryベースの日付選択javascript「jQueryDatePicker」
• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」