PHPでカレンダーを作成【サンプルコード有】

2019年10月17日

PHPでカレンダー機能を作る方法をまとめました。

サイト上に定休日やイベント情報などを掲載させることが出来るので、使いこなせればお店のサイトなどで重宝します。

今回紹介するカレンダー機能は、日付に関わるPHPの関数を多用します。

参考 PHPの日付関数(date,strtotime)を徹底解説

まだ日付関数の知識があやふやな方は、一度目を通して頂くと、今回紹介するカレンダー機能も理解しやすいと思います。

シンプルなテーブルレイアウトのカレンダー機能

まずは、7列の曜日で表示させるシンプルなカレンダーを作ってみましょう。

PHP

//タイムゾーン設定
date_default_timezone_set('Asia/Tokyo');

//表示させる年月を設定　↓これは現在の月
$year = date('Y');
$month = date('m');

//月末日を取得
$end_month = date('t', strtotime($year.$month.'01'));
//1日の曜日を取得
$first_week = date('w', strtotime($year.$month.'01'));
//月末日の曜日を取得
$last_week = date('w', strtotime($year.$month.$end_month));

$aryCalendar = [];
$j = 0;

//1日開始曜日までの穴埋め
for($i = 0; $i < $first_week; $i++){
    $aryCalendar[$j][] = '';
}

//1日から月末日までループ
for ($i = 1; $i <= $end_month; $i++){
    //日曜日まで進んだら改行
    if(isset($aryCalendar[$j]) && count($aryCalendar[$j]) === 7){
        $j++;
    }
    $aryCalendar[$j][] = $i; 
}

//月末曜日の穴埋め
for($i = count($aryCalendar[$j]); $i < 7; $i++){
    $aryCalendar[$j][] = '';
}

$aryWeek = ['日', '月', '火', '水', '木', '金', '土'];

$aryCalendarに月の日付データをループで挿入していきます。

$aryCalendarは多次元配列で、$aryCalendar[行カウント][列カウント]となっており、実際のカレンダーと同じ配置となるよう配列を生成しています。

開始と最後のfor文は、例えば1日が水曜日だった場合、日、月、火を空白を入れるために制御しています。

CSS

実際のカレンダーと近いデザインとなるように、カレンダー用のテーブルのcssを設定しましょう。

table.calendar{
    width: 100%;
}

table.calendar th, table.calendar td{
    padding: 8px;
    background-color: #FFF;
    text-align: center;
    border: 1px solid #CCC;
}

/* 行の最初のtdは日曜日なため赤く */
table.calendar th:first-of-type, table.calendar td:first-of-type{
    background-color: #ffefef;
    color: #FF0000;
    font-weight: bold;
}

/* 行の最後のtdは土曜日なため青く */
table.calendar th:last-of-type, table.calendar td:last-of-type{
    background-color: #ededff;
    color: #0000FF;
    font-weight: bold;
}

/* 今日の日付 */
table.calendar td.today{
    background-color: #fbffa3;
    font-weight: bold;
}

行の最初は赤色、行の最後は青色に設定し、休日を視覚的に分かりやすくしておきましょう。

疑似要素の:first-of-type（最初のtd）、:last-of-type（最後のtd）を使うと便利です。

HTML

最後にHTMLの表示です。

先ほど生成した$aryCalendar変数をforeach文で繰り返し、tr、td要素を表示していきます。

参考 PHPのforeachを徹底解説【サンプルコード有】

<table class="calendar">
    <!-- 曜日の表示 -->
    <tr>
    <?php foreach($aryWeek as $week){ ?>
        <th><?php echo $week ?></th>
    <?php } ?>
    </tr>
    <!-- 日数の表示 -->
    <?php foreach($aryCalendar as $tr){ ?>
    <tr>
        <?php foreach($tr as $td){ ?>
            <?php if($td != date('j')){ ?>
                <td><?php echo $td ?></td>
            <?php }else{ ?>
                <!-- 今日の日付 -->
                <td class="today"><?php echo $td ?></td>
            <?php } ?>
        <?php } ?>
    </tr>
    <?php } ?>
</table>

デモはこちら

実際の上記のソースコードを適用したデモのカレンダーはこちらです。

正しく今月の2024年11月が表示されていることが分かります。

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

縦型レイアウトのカレンダー機能

曜日毎に7列で区切るカレンダーレイアウトは見やすい反面、領域が小さすぎて中に文字などが入れられにくいのが難点です。

パソコンはともかく、スマホでは文字を入れるスペースを確保するのがかなり厳しいですね。

そのため、予定を入れることを前提として縦型カレンダーを使いたい時に備えて用意しておきましょう。

PHP

縦型カレンダー用のPHPソースコードです。

7列で曜日を管理する必要がないため、よりシンプルな記述に抑えることが出来ます。

今回は横幅が広く表示できるため、日付毎にスケジュールを設定し表示する機能も追加していきます。

スケジュール内容の設定について、今回は直書きですが、実際はデータベースやファイルに書き込んで読み込む方法が更新しやすいです。

//タイムゾーン設定
date_default_timezone_set('Asia/Tokyo');

//表示させる年月を設定　↓これは現在の月
$year = date('Y');
$month = date('m');

//月末日を取得
$end_month = date('t', strtotime($year.$month.'01'));

//スケジュール設定 日付をキーに
$arySchedule = [];
$arySchedule[5] = '友達とショッピング';
$arySchedule[10] = '上司と打ち合わせ';
$arySchedule[15] = '大阪へ日帰り旅行';
$arySchedule[20] = '歯医者に行く';
$arySchedule[25] = '誕生日';

$aryCalendar = [];

//1日から月末日までループ
for ($i = 1; $i <= $end_month; $i++){
    $aryCalendar[$i]['day'] = $i;
    $aryCalendar[$i]['week'] = date('w', strtotime($year.$month.sprintf('%02d', $i)));
    if(isset($arySchedule[$i])){
        $aryCalendar[$i]['text'] = $arySchedule[$i];
    }else{
        $aryCalendar[$i]['text'] = '';
    }
}

$aryWeek = ['日', '月', '火', '水', '木', '金', '土'];

CSS

次に縦型テーブルのCSSを設定していきます。

左のセルを日付と曜日の設定エリアに、右側にスケジュールを設定するエリアとして割り当てていきます。

table.calender_column{
    width: 100%;
}

table.calender_column td{
    padding: 5px;
    border: 1px solid #CCC;
}

/* 日曜日 */
table.calender_column tr.week0{
    background-color: #ffefef;
    color: #FF0000;
}

/* 土曜日 */
table.calender_column tr.week6{
    background-color: #ededff;
    color: #0000FF;
}

/* 今日 */
table.calender_column tr.today{
    background-color: #fbffa3;
    font-weight: bold;
}

table.calender_column td:first-child{
    width: 20%;
    text-align: center;
}

table.calender_column td:last-child{
    width: 80%;
    color: #111111;
}

HTML

設定した配列を元に、foreachでテーブルを作成します。

縦型テーブルの場合は列の管理がないため、一度のループ処理で表示が可能です。

<table class="calender_column">
<?php foreach($aryCalendar as $value){ ?>
    <?php if($value['day'] != date('j')){ ?>
    <tr class="week<?php echo $value['week'] ?>">
    <?php }else{ ?>
    <tr class="today">
    <?php } ?>
        <td>
            <?php echo $value['day'] ?>(<?php echo $aryWeek[$value['week']] ?>)
        </td>
        <td>
            <?php echo $value['text'] ?>
        </td>
    </tr>
<?php } ?>
</table>

デモはこちら

上記のソースコードを適用した縦型カレンダーはこちらです。

日付とスケジュールがしっかり連動して表示されていることが分かりますね。

1(金)
2(土)
3(日)
4(月)
5(火)	友達とショッピング
6(水)
7(木)
8(金)
9(土)
10(日)	上司と打ち合わせ
11(月)
12(火)
13(水)
14(木)
15(金)	大阪へ日帰り旅行
16(土)
17(日)
18(月)
19(火)
20(水)	歯医者に行く
21(木)
22(金)
23(土)
24(日)
25(月)	誕生日
26(火)
27(水)
28(木)
29(金)
30(土)