PHP + JavaScript カレンダー

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

注: PHP5.1.0以降でタイムゾーンエラーが発生する場合、php.ini の設定が必要です。

管理画面

カレンダー管理のスクリプトは cal/admin.php です。設置前にスクリプトの冒頭でパスワードを設定しておきます。初期状態のパスワードは password になっています。実際に使用する際には必ず書き換えるようにして下さい。

年月の移動

管理画面の上部で年月を指定します。画面を開いた時点では 当年当月 を示します。変更の必要がなければこのまま次の操作を行います。

項目の設定

管理画面の下部で表示項目を設定します。項目は10種類まで設定可能です。先頭の項目がデフォルトの表示項目となります。 HTML タグも使用出来ますので、他ページへのリンクも出来ます。

カレンダーの編集

各セルで項目を選択して変更ボタンを押すと完了です。

カレンダー表示

カレンダーの呼び出し

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

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

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

年月を省略すると今年、今月となります。このようにすれば、設置したまま修正をしなくても、常に当月を表示させられます。

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

またそれぞれ next (来年、来月) と prev (昨年、昨月) の指定も出来ます。年と月のどちらかだけを省略するのも可です。

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

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

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

<table class="cal">
<caption>2008 年 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>

これにスタイルシートを適用すれば、どんな見た目にも変えられるというわけです。DOM で操作しても良いでしょう。

<style>
.cal thead { background:yellow; }
.cal caption { font-size:12pt; padding:5px; text-align:center; }
.cal td { font-size:9pt; text-align:center; vertical-align:middle; border:solid 1px #aaa; }
.weekday, .satday, .sunday { width:50px; height:50px; }
</style>

特殊な使い方

チェックボックス

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

チェックボックスは日付がキーの配列で、checkbox という名前を持ちます。フォームと組み合わせて活用することが出来ます (もちろんそのための知識は必要です)。宿泊やイベントの簡易予約に使えます。

<td class="weekday">20<br><input type="checkbox" name="checkbox[20081223]"></td>

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

クラス名

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

<style> .special { background-color:red; color:white; } </style>

カスタマイズ

スクリプト自体を触らなくても、ブログのカレンダーをカスタマイズ出来る人なら CSS だけで好きなように表現を変えられます。 詳しく解説されているウェブサイトも数多くありますので参考になるでしょう。

使用に関して

このスクリプトは個人でも会社でも自由に使用できます。ただし同業者の利用は認めません。転売・流用は禁止します。

無料使用はサポートの範囲外です。改造方法やカスタマイズ方法の相談メールが時々届くのですが、そういった質問にもお答えしかねます。

download

TSUJIMO