Php 如何根据时间在td内定位div,使其看起来像谷歌日历
HTMLPhp 如何根据时间在td内定位div,使其看起来像谷歌日历,php,jquery,css,css-position,Php,Jquery,Css,Css Position,HTML 从10:00-10:15开始输入1 肠2 这是td在我的jquery/php日历中的外观示例 我的问题是 如何根据时间的开始和结束设置Css位置和跨距的高度,以及如何避免重叠 我是否应该在html中包含timeStart和end?我可以在php上动态设置样式,这将是一种更干净的方式 我想我没有说清楚 这是我到目前为止试过的wt html 演示病人 新病人 PHP用来生成这个 <td style='width:60px;'> <div style="posit
从10:00-10:15开始输入1
肠2
这是td在我的jquery/php日历中的外观示例
我的问题是
我想我没有说清楚 这是我到目前为止试过的wt html
演示病人
新病人
PHP用来生成这个
<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>
echo“{$data['name']}”;
现在我可以随心所欲地定位跨度,唯一的问题是,如果两个预订在同一时间重叠,我怎么能避免这种情况呢?为什么不直接进入谷歌的日历呢。下载html+样式表,并使用您最喜欢的代码编辑器来研究它们是如何实现的?尝试一下。它利用数据属性来确定要使用的块的大小。我还将跨距更改为div,如果需要它们,可以相应地更改css HTML
echo"<span style='position:absolute;top:".
date("i", strtotime($data['time_booked']))."px;' title='{$data['time_booked']}'>{$data['name']}</span>";
jQuery
.entry{
border-top:1px solid #000;
background:#bad;
}
将时间转换为单个单位,例如分钟,然后将这些分钟用于高度计算,例如上午10点至10点30分=600分钟-630分钟(午夜过后),高度=30分钟->2px/分钟=60px。此外,跨距也是内联的,需要设置为内联块或块以指定高度。您正在谈论
divs
,但使用span
…哦-如果要将自定义属性附加到元素,请使用数据属性:
<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>
.entry{
border-top:1px solid #000;
background:#bad;
}
$('.entry').each(function (i) {
var $this = $(this);
timestart = $this.data('time-start'),
timeend = $this.data('time-end');
$this.height(timeend - timestart);
});