ECサイトや実店舗のWebサイトにおいて、カレンダーを表示して店休やそのほか、日付を色付けしてなにかしら伝えたい時があるかと思います。
そんなとき、Jqueryを使ったカレンダープログラムを使って簡単に実装できる方法をご紹介します。
[jquery.calendar.js]の導入
今回はこちらの「jquery.calendar.js」をカスタマイズしていきます。
すごくシンプルな表示で、デフォルトはCSSすら定義されてないのでカスタマイズし放題です。
HTML
<body> <div id="calendar1"></div> </body>
javascript
$(function() { $('#calendar1').calendar({ day1 : [1,12,17,28], day2 : [4,18,19], day3 : [8,14,] }); });
表示例
day1、day2、day3にそれぞれ日付を入れると、その日に色がつくというものです。
そのほか、詳細な設定もできますので、下記をご参照ください。
ダウンロードはこちらから