如何根据时间将div放在td里面看起来像谷歌日历

时间:2013-01-08 14:52:49

标签: php jquery css css-position

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. 我应该或不应该包含timeStart并以html结尾?我可以在php上动态设置样式,这将是一种更干净的方式!

  3. 我想我并没有说清楚。

    这是迄今为止我尝试过的wt

    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 个答案:

答案 0 :(得分:0)

试一试。它利用数据属性来确定要使用的块的大小。我也将你的跨度改为div,如果你需要它们内联块你可以相应地改变css。 jsFiddle Example

<强> 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);
});

答案 1 :(得分:-1)

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