разработка динамического адаптивного календаря недели

<p>изучив проблемы и проконсультировавшись с несколькими опытными экспертами, я пришел к выводу, что хранить их в виде таблиц - лучший вариант, даже если его создание не является тривиальным.</p><p>в то время как это решение затрудняет динамическое изменение расписания без повторной генерации всей таблицы, преимущества элементов стиля, которые<em> должны </em>/ быть таблицей в качестве оплачиваемой таблицы - выравнивание, ширина, высота, границы и т.д. все легко контролировать и работать отлично кросс-браузер.</p><p>важным примечанием является то, что этот подход делает отзывчивость графика тривиальным качеством.</p>

<p>использование таблицы - это хороший подход.</p><p>хорошо, это решение, основанное на jquery, для решения проблемы «количество строк выталкивается вправо» источником проблемы является неправильное создание таблиц в серверной части.</p><p>например, если отображается td с rowspan = "3", то это влияет на значения td в той же позиции индекса столбца в следующих двух строках и сдвигается вправо. это нежелательно.</p><pre><code><table border="1"> <tr> <td>07:30</td> <td rowspan="3">event 07:30 to 09:00</td> </tr> <tr> <td>08:00</td> <td>should not be rendered.</td> </tr> <tr> <td>08:30</td> <td>should not be rendered.</td> </tr> <tr> <td>09:00</td> <td>c</td> </tr> </code></pre><p></p><p>правильное решение - правильная генерация таблицы в бэкэнде . рендеринг td's после прострела не должен произойти . если вы знаете, что рендеринг rowspan = "3", то действуйте соответствующим образом. :)</p><p>в любом случае, если невозможно изменить отображение таблицы, используйте jquery, чтобы исправить это:</p><p> <a href="http://jsfiddle.net/9tqvu/3/">http://jsfiddle.net/9tqvu/3/</a> </p>

<p>использование css и div вместо ячеек таблицы может быть более точным и, безусловно, будет проще вычислять на стороне клиента и сохранять отзывчивость. вот пример псевдо-css/js для первого события:</p><pre><code>.event:first-child { height: `(1.5/24)*100`%; /* 6.25%, based on duration */ position: absolute; top: `(10/24)*100`%; /* 41.7%, based on event start */ } </code></pre>

<p>это вполне приемлемый способ сделать это. </p><p>на вашем месте я бы, вероятно, использовал бы div, потому что они более управляемы, проще в использовании css и более стандартны.</p><p>кроме этого, я думаю, что вы подходите правильно, и вам, вероятно, следует сделать интерфейс так же, как и сервер, потому что вы знаете, что он работает.</p><p>что касается обработки событий, я просто сортировал бы div по типу, используя классы, а затем использовал обработчики событий с типами событий, которые вы хотите использовать (хотя я не знаю, что вы хотите, кроме click) в этих соответствующих классах. </p>

<p>что происходит, когда событие перекрывается только частично с другим, я имею в виду, что два перекрывающихся события занимают 50% времени, но если одно из них закончится раньше, а другое позже, то, которое продолжается, занимает всю ширину «следующий» ряд или продолжить на 50% ширины? что произойдет, если событие a проводится с 8:00 до 8:30, а событие b - с 8:00 до 18:00? должно быть хорошо, что событие b будет заполнять ширину до тех пор, пока не произойдет еще одно перекрывающееся событие ... но я думаю, это может быть немного сложнее ... просто мысль. удачного кодирования, это действительно хороший проект.</p>