Блог

Я создаю приложение ежедневного расписания, которое показывает часы с 6:00 до 22:00 и поля, которые представляют временные интервалы (задачи, которые необходимо выполнить). Позиция блока представляет время выполнения задач — таким образом, поле с отметкой 14:00 (визуально) представляет задачу, которая начинается в 14:00. Продолжительность представлена длиной блоков (по высоте). Если вышеуказанное поле заканчивается в 15:00, продолжительность составляет 1 час.

Я создал div, который похож на столбец (см. Рисунок Ниже), и хочу заполнить его полями, каждое поле представляет задачу. допустим, у меня уже есть задача в базе данных на этот день, и я просто хочу ее загрузить (т. Е. Создать Вложенный div внутри столбца-div для представления этой задачи).

Вопрос в том, как мне разместить задачу в нужном месте внутри столбца-div, в зависимости от времени и продолжительности (которые я знаю). Это должно быть сделано относительно длины столбца-divs.

Я не хочу использовать абсолютную позицию, потому что я хочу, чтобы все изменялось динамически — если окно полноразмерное или меньше, положение высоты и длина должны меняться как для столбца- div, так и для вложенных divs.

У меня есть базовый шаблон, который создает столбец часов и визуальный div той же высоты. ссылка на демонстрационное изображение — https://imgur.com/a/1OgJjGR

ожидаемым результатом должен быть блок-подобный div внутри столбца div, начинающийся в нужное время (скажем, в 14:00, как в приведенном выше примере) и заканчивающийся на отметке 15:00.

Я просто хочу добавить, что я подумал о том, как рассчитать длину задачи-div (по высоте) в процентах от высоты всего coulmn-div. Это duration / 16 * 100 (из-за 16 часов в расписании с 6 до 22), что мне нужно знать, так это как расположить его вертикально внутри столбца-div.

Код: выполняется на django (python)

html (соответствующая часть):

     <div id="schedule-div">
            <div id="table-div">
                <table id='schedule-table'>
                    <th>Hour</th>
                    {% for n in hours %}
                        <tr>
                            <td>{{ n }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="tasks-div"></div>
        </div>
  

css (соответствующая часть):

 
#schedule-div {
    display: flex;
    width: 30%;
    margin: 40px auto 0 auto;
    border: 1px solid #ddd;
}

#tasks-div {
    background-color: #606060;
    border: 1px solid #ddd;
    flex: 1;
}

#schedule-table {
    font-family: "Trebuchet MS";
    border-collapse: collapse;
    flex: 1;
}