ETXRA

PHP + JavaScript カレンダー

簡単操作のカレンダー表示スクリプトです。設置しておくと、ウェブサイト内のどこででも何度でもデータを呼び出して表示することが出来ます。このカレンダーは自由なカスタマイズを最優先に設計しています。

管理画面

カレンダー表示

カレンダーの呼び出し

どんなページにもまったく同じように JavaScript でカレンダーを呼び出して表示することが出来ます。同一ページに複数のカレンダーを置くことも問題ありません。

呼び出しでは年と月をパラメータとして渡します。


			<script src="cal/cal.php?year=2010&month=5" type="text/javascript"></script>

年と月は省略するとそれぞれ当年、当月が表示されます。また next (翌年、翌月) と prev (前年、前月) と指定することも出来ます。このように指定することで今月、来月、前月、今年、来年、前年を自動的に表示させるようになっています。


			<script src="cal/cal.php" type="text/javascript"></script>

			<script src="cal/cal.php?month=next" type="text/javascript"></script>

カレンダーの構造とスタイル

カレンダーの構造は以下のようになっています。


			<table class="cal">

			　<caption>2010 年 5 月</caption>

			　　<tbody>

			　　<tr>

			　　　<td class="sunday">11<br></td>

			　　　<td class="weekday">12<br></td>

			　　　<td class="weekday">13<br></td>

			　　　<td class="weekday">14<br>定休日</td>

			　　　<td class="weekday">15<br></td>

			　　　<td class="weekday">16<br></td>

			　　　<td class="satday">17<br></td>

			　　</tr>

			　</tbody>

			</table>

以下のカレンダーは実際に呼び出して表示させています。

以下はこれに適用しているスタイルシートです。


			.cal {

			　margin:auto;

			　font:12pt; line-height:1.4;

			}

			.cal caption { text-align:right; }

			.cal1 td {

			　padding:4px; text-align:center;

			　background-color:lightyellow;

			}

			.cal1 .weekday { background-color:white; }

			.cal1 .sunday, .cal1 .satday { font-weight:bold; }

			.cal1 .sunday { background-color:#ffd6dc; }

			.cal1 .satday { background-color:lightblue; }

応用

管理画面の下部から設定出来る項目は10種まで使えます。最初の項目がデフォルトです。ちょっとした改造でそれ以上の数を使うことが出来ますが、日記のように毎日違うことを書くならブログでも使ったほうが便利なはずです。

ここには定休日、セールなどの文字列を書き込むだけでなく、他の活用法もあります。

チェックボックス

項目名を [checkbox] とするとチェックボックスが表示されます。

このチェックボックスは日付を引数に持つ checkbox[] という名前の配列になっています。送信されたデータを処理するためにいくらかの技術は必要となりますが、うまく使えば予約の送信などに応用出来るでしょう。


			<input type="checkbox" name="checkbox[2010411]" value="checked">

クラス

[[classname]] と書くと、セルに任意のクラス名を付けることが出来ます。スタイルシートと組み合わせれば表現の幅が広がります。

たとえばこの例では [[holiday]] と記述することで holiday というクラスを適用させています。


			<td class="holiday">3</td>

			

			.holiday {

			　background-color:red;

			　color:white;

			　font-weight:bold;

			}

ダウンロードと使用条件

このスクリプトは販売している商品です。しかし自分自身で設定も使用も出来る、ウェブ業者以外の方に限って無料でお使いいただけます。転売・流用は禁止します。

DOWNLOAD