Jqueryを使ったカレンダープログラム（3色色付け）を福岡一わかりやすく解説します。(自分なりに)

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,]
    });
});

表示例

jquery.calendar

day1、day2、day3にそれぞれ日付を入れると、その日に色がつくというものです。

そのほか、詳細な設定もできますので、下記をご参照ください。

カレンダー | jQuery逆引き | Webサイト制作支援 | ShanaBrian Website

ダウンロードはこちらから

ダウンロード

Related articles