Диаграмма гостей с использованием стола ⇐ Html

[Anonymous]

Я пытаюсь сделать диаграммы доступности комнаты или календарь, ожидаемый результат следующим образом:
< /p>
Каждая дата имеет 2 столбца Am и PM в качестве заголовка. AM указывает на регистрацию, пока PM указывает на выезд. Я сделал это две столбцы, потому что будут случаи, когда в 1 комнате будет гостю, и продолжать с различным гостем регистрации. Полем В той же комнате Мила зарегистрируется на 6-декабре. Тогда он будет отображаться, как показано выше. < /P>
Это мой подход: < /p>
// Room data
$rooms = [
['room' => '1001', 'type' => 'King'],
['room' => '1002', 'type' => 'Hollywood'],
['room' => '1003', 'type' => 'Queen'],
['room' => '1004', 'type' => 'Queen'],
['room' => '1005', 'type' => 'Queen'],
];

// Generate all dates for December 2024
$dates = [];
$start = new DateTime('2024-12-01');
$end = new DateTime('2025-01-01'); // 1 day after the last day of December 2024

while ($start < $end) {
$dates[] = $start->format('Y-m-d'); // Add date in 'Y-m-d' format
$start->add(new DateInterval('P1D')); // Increment by 1 day
}
< /code>
И следующее - заполнить таблицу: < /p>



Room
Type






















Они заполнят ячейки, где дата и комната заняты:
< /p>
Теперь мне нужно привести в таблицу, чтобы увидеть период пребывания в гостях, охватывая ячейки на основе даты остановки и числа ночей. < /p>
















Stay Table

body {
font-family: Arial, sans-serif;
margin: 20px;
}

table {
width: 800px;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
width: 80px;
}

th {
background-color: #f2f2f2;
font-weight: bold;
}

.date-header {
background-color: #f2f2f2;
font-weight: bold;
}

.stay-cell-1 {
background-color: #e0f7fa;
}

.stay-cell-2 {
background-color: #ffebee;
}

.stay-cell-a,
.stay-cell-b {
border: none;
padding: 0;
}

.internal-table {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
}

.internal-table td {
background-color: #80deea;
height: 25px;
border: none;
text-align: center;
}








Room
Type















Подробнее здесь: https://stackoverflow.com/questions/794 ... sing-table