PHPスケジュール表に背景色と過去時間のグレーアウト機能を実装する

週間スケジュール表を作成する際、見やすいデザインと実用的な機能が求められます。今回は、既存のPHPスケジュール表に対して、背景色の調整と過去の時間帯を自動的にグレーアウトする機能を追加しました。

そうすることで、予約できない時間帯がわかりやすくなるからです。

デザイン調整の実装

スケジュール表の視認性を高めるため、3つのデザイン変更を行いました。

背景色の適用範囲

ベージュ系の背景色を設定する際、どの部分に色を付けるかが重要です。今回は表のタイトル部分とヘッダー行に同じ色を適用することで、統一感を持たせました。

CSSでは.schedule-titleとth要素に#ECEDDAを指定します。この色は表全体を柔らかい印象にしながらも、白い背景のセルとのコントラストを保ちます。

.schedule-title {
    background: #ECEDDA;
    padding: 8px;
    border-radius: 2px;    
}

th {
    background: #ECEDDA;
    font-weight: 600;
    font-size: 14px;
    padding: 4px;
}
Code language: CSS (css)

列幅の均等化

スケジュール表では、月曜から金曜までの5つの列幅を揃える必要があります。CSSのtable-layout: fixedプロパティを使用すると、テーブルの幅を各列に均等に配分できます。

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed;
}
Code language: CSS (css)

このプロパティを指定すると、ブラウザはセル内のコンテンツの長さに関わらず、すべての列を同じ幅で表示します。

更新日時のボックス表示

ページ下部の更新日時表示を視覚的に目立たせるため、ボックス型のデザインにしました。flexboxレイアウトを使用して、左側に注意書き、右側に更新日時を配置します。

.footer {
    margin-top: 8px;    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.timestamp {
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
    font-size: 12px;
    background: #5a5a5a;
    color: white;
    padding: 2px;
}
Code language: CSS (css)

justify-content: space-betweenにより、左右の要素が自動的に離れて配置されます。

過去時間のグレーアウト機能

スケジュール表では、既に終了した時間帯を視覚的に区別できると便利です。現在時刻より前の時間帯を自動的にグレー表示にする機能を実装しました。

判定ロジックの設計

過去かどうかの判定には、各セルの日付と時刻を組み合わせた情報が必要です。時間帯の終了時刻を基準にすると、その時間帯が完全に終了してからグレーアウトされます。

例えば、現在が13:00の場合、①10:15（10:15-10:55）と②11:30（11:30-12:10）はグレーアウトされますが、③13:15（13:15-13:55）はまだグレーアウトされません。

マルチバイト文字の処理

時間帯のラベルには丸数字（①②③④）が含まれています。この先頭1文字を削除して時刻部分だけを取り出すには、mb_substr()関数を使用します。

$startTime = mb_substr($slot['label'], 1); // "①10:15" → "10:15"
Code language: PHP (php)

通常のsubstr()関数ではマルチバイト文字を正しく処理できませんが、mb_substr()を使用すると、日本語の文字も1文字として扱えます。

実装コード

index.phpのテーブルセル生成部分に、以下のロジックを追加します。

<td>
    <?php 
    // 現在時刻との比較
    $dayIndex = array_search($dayKey, $dayKeys);
    $cellDate = $dates[$dayIndex];
    $startTime = mb_substr($slot['label'], 1);
    $cellDateTime = new DateTime($cellDate->format('Y-m-d') . ' ' . $startTime);
    $now = new DateTime();
    $isPast = $cellDateTime < $now;
    
    if ($weekData['is_draft']) {
        $status = '-';
        $class = 'draft';
    } else {
        $value = $weekData['schedule'][$dayKey][$slotIndex] ?? 0;
        $status = $value === 0 ? '○' : '×';
        $class = $value === 0 ? 'available' : 'unavailable';
    }
    
    if ($isPast) {
        $class .= ' past';
    }
    ?>
    <span class="status <?= $class ?>">
        <?= htmlspecialchars($status) ?>
    </span>
</td>
Code language: HTML, XML (xml)

まずarray_search()で曜日キーから配列のインデックスを取得します。これにより、対応する日付オブジェクトを$dates配列から取り出せます。

次にDateTimeオブジェクトを作成して日付と時刻を組み合わせ、現在時刻と比較します。過去であれば、既存のクラス名にpastを追加します。

CSSでは、過去のセルの文字色を薄いグレーに変更します。

.past {
    color: #ccc !important;
}
Code language: CSS (css)

!importantを使用することで、既存の.availableや.unavailableクラスの色指定よりも優先されます。

まとめ

PHPとCSSを組み合わせることで、動的なスケジュール表を実装できます。背景色の設定ではtable-layout: fixedによる列幅の均等化が効果的です。過去時間のグレーアウトでは、DateTimeクラスによる時刻比較とmb_substr()によるマルチバイト文字処理が重要なポイントとなります。

---