0

HTML

<td time='10:00 AM'>
<span timeStart="00" timeEnd="10" class="entry deletable">Entery 1 from 10:00-10:15</span>
<span timeStart="15" timeEnd="30" class="entry deletable">Entery 2</span>
</td>

这是 td 如何在我的 jquery/php 日历中查看的示例。

我的问题是

  1. 我怎样才能根据时间开始和时间结束使这些跨度的Css位置和设置高度，以及如何避免重叠？
  2. 我应该还是不应该在 html 中包含 timeStart 和 end ？我可以在 php 上动态设置样式，这将是一种更清洁的方式！

我想我没有说清楚。

这是我到目前为止尝试过的重量

html

<td style='width:60px;'>
<div style="position:relative">
<span style="position:absolute;top:00px;" title="Time:10:00 AM">demo patient</span>
<span style="position:absolute;top:40px;" title="Time:10:20 AM">new patient</span>
</div>
</td>

PHP用来生成这个

echo"<span style='position:absolute;top:".
date("i", strtotime($data['time_booked']))."px;' title='{$data['time_booked']}'>{$data['name']}</span>";

现在我可以根据需要定位跨度，唯一的问题是如果 2 个预订同时进行，它们重叠，我该如何避免这种情况？

4

2 回答 2

0

试试这个。它利用数据属性来确定要使用多大的块。我还将您的跨度更改为 div，如果您需要它们内联块，您可以相应地更改 css。jsFiddle 示例

HTML

<table>
  <tr>
    <td time='10:00 AM'>
      <div data-time-start="00" data-time-end="15" class="entry deletable">Entry 1 from 10:00-10:15</div>
      <div data-time-start="15" data-time-end="45" class="entry deletable">Entry 2 from 10:15-10:45</div>
      <div data-time-start="45" data-time-end="60" class="entry deletable">Entry 3 from 10:45-11:00</div>
    </td>
  </tr>
</table>

CSS

.entry{
  border-top:1px solid #000;
  background:#bad;
}

jQuery

$('.entry').each(function (i) {
  var $this = $(this);
  timestart = $this.data('time-start'),
  timeend = $this.data('time-end');

  $this.height(timeend - timestart);
});
于 2013-01-08T15:24:36.460 回答
-1

为什么不直接去谷歌的日历。下载 html + 样式表，并使用您最喜欢的代码编辑器来研究他们是如何做到的？

于 2013-01-08T15:09:15.407 回答