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>

これは、jquery/php カレンダー内で td がどのように見えるかの例です。

私の質問は

  1. 開始時間と終了時間に応じて Css の位置を設定し、これらのスパンの高さを設定するにはどうすればよいですか? また、重複を避けるにはどうすればよいですか?
  2. timeStart と end を html に含める必要がありますか? 私はそれを行うためのよりクリーンな方法であるphpで動的にスタイルを設定できます!

私は自分自身を明確にしなかったと思います。

ここに私がこれまでに試した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 つの予約が同時に行われた場合に重複することです。どうすればこれを回避できますか?

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

Google のカレンダーにアクセスしてみませんか。html + スタイルシートをダウンロードし、お気に入りのコード エディターを使用して、彼らがどのようにそれを行っているかを調べますか?

于 2013-01-08T15:09:15.407 に答える