Кто может помочь создать скрипт для организации и компоновки блоков в расписании уроков? 

Здравствуйте. Я разработал верстку для расписания, которая включает следующий код: <br/> <pre><code class="php">$body .= '
			&lt;div class="lessons-per-group" id="mask-per-day"&gt;
				&lt;div class="lessons-per-grid-day"&gt;
					&lt;div class="lessons-per-time"&gt;&lt;/div&gt;
					&lt;div class="lessons-per-content"&gt;';
		
		$z = 2;

		foreach($lessons as $lesson){

			if(($lesson['time'] &gt;= $time1) AND ($lesson['time'] &lt;= $time2)){

				$top = ($lesson['time'] - $time1) / 1800 * 22;

				$height = $lesson['duration'] / 30 * 22;

				$time_end = $lesson['time'] + $lesson['duration'] * 60;

				$body .= '
					&lt;div class="body-table-block-lesson" style="height:'.$height.'px; inset: '.$top.'px  0px 0px 0%;border-color:'.$_LTYPES[$lesson['type']]['color'].';z-index:'.$z.';width:'.$w.'%;" data-admin="'.$lesson['admin'].'" data-user="'.$lesson['user'].'" data-type="'.$lesson['type'].'" data-status="'.$lesson['status'].'" data-lessonid="'.$lesson['id'].'"&gt;
						&lt;b&gt;'.$_LTYPES[$lesson['type']]['title'].'&lt;/b&gt; ('.date('H:i',$lesson['time']).' - '.date('H:i',$time_end).')
		            	'.$lsinfo.'
		            &lt;/div&gt;';
			}
		}

		$body .= '&lt;/div&gt;
				&lt;/div&gt;';</code></pre> <br/> и такие CSS-стили: <br/> <pre><code class="css">.lessons-per-group{
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 1;
}
.lessons-per-grid-day{
	display: grid;
	grid-template-columns: 85px auto;
	padding-top: 35.5px;
	height: calc(100% - 35.5px);
}.body-table-block-lesson{
	position: absolute;
	border-width: 1px;
	padding: 1px;
	overflow: hidden;
	right: 0;
	border-bottom-width: 6px;
	box-sizing: border-box;
	border-style: solid;
	background-color: white;
	border-bo
  • 17 сентября 2024 г. 6:03
Ответы на вопрос 2 
Здравствуйте! Изучив ваш код, я вижу, что у вас уже есть основа для создания расписания уроков на PHP и CSS. Давайте добавим необходимую логику для компоновки блоков в расписании на основе заданного времени и длительности уроков.

### PHP Код для создания расписания

Ваш текущий код уже представляет структуру, но чтобы добавить функциональность и организовать уроки в расписании, вы можете воспользоваться следующим улучшением:

```php
$body .= '
    <div class="lessons-per-group" id="mask-per-day">
        <div class="lessons-per-grid-day">
            <div class="lessons-per-time"></div>
            <div class="lessons-per-content">';

$z = 2; // z-index для раскладки блоков
$w = 100; // ширина блока урока (можно менять)

foreach ($lessons as $lesson) {
    // Проверка на соответствие времени
    if (($lesson['time'] >= $time1) && ($lesson['time'] <= $time2)) {
        // Расчет позиций и высоты
        $top = ($lesson['time'] - $time1) / 1800 * 22; // Преобразование времени в пиксели
        $height = $lesson['duration'] / 30 * 22; // Преобразование длительности в пиксели
        $time_end = $lesson['time'] + $lesson['duration'] * 60; // Время конца урока

        // Добавление блока урока в расписание
        $body .= '
            <div class="body-table-block-lesson" style="height:' . $height . 'px; inset: ' . $top . 'px 0 0 0; border-color:' . $_LTYPES[$lesson['type']]['color'] . '; z-index:' . $z . '; width:' . $w . '%;" data-admin="' . $lesson['admin'] . '" data-user="' . $lesson['user'] . '" data-type="' . $lesson['type'] . '" data-status="' . $lesson['status'] . '" data-lessonid="' . $lesson['id'] . '">
                <b>' . $_LTYPES[$lesson['type']]['title'] . '</b> (' . date('H:i', $lesson['time']) . ' - ' . date('H:i', $time_end) . ')
                ' . $lsinfo . '
            </div>';
    }
}

$body .= '
            </div>
        </div>
    </div>';
```

### CSS стили для визуализации

Ваши стили уже выглядят хорошо, но убедитесь, что они правильно применены ко всем элементам. Добавьте следующие стили для оформления блоков уроков:

```css
.body-table-block-lesson {
    position: absolute;
    border: 1px solid; /* Убираем border-width, вместо этого теперь используется border */
    padding: 5px; /* Добавлено немного внутреннего отступа */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон */
    border-radius: 4px; /* Скругленный угол */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень для блоков*/
    transition: background-color 0.2s; /* Плавный переход фона */
}

.body-table-block-lesson:hover {
    background-color: rgba(255, 255, 200, 0.5); /* Эффект при наведении */
}
```

### Примечания
1. **Перекрытие блоков**: Возможно, вам нужно будет реализовать логику для обработки перекрывающихся уроков (например, изменением z-index или объединением блоков).
   
2. **Адаптивность**: Если вы планируете использовать расписание на разных устройствах, рекомендуется также рассмотреть возможность использования медиа-запросов для адаптивной верстки.

3. **Динамическая загрузка**: Если уроки загружаются динамически, вы можете рассмотреть AJAX для обновления расписания без перезагрузки страницы.

Если у вас есть конкретные требования или сложности, пожалуйста, дайте знать, и я помогу вам более подробно!
не понимаю зачем такие сложности, если теоретически можно заставить grid делать всё самостоятельно 
 
 понятно, этот пример ещё нужно доработать напильником, но основная мысль, думаю, ясна
Похожие вопросы
    Показать ещё