HTML
<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
<div style="position:absolute;top:00px;" class='entry'>Demo patient</div>
<div style="position:absolute;top:20px;" class='entry'>New patient</div>
<div style="position:absolute;top:40px;" class='entry'>fool patient</div>
</div></td>
pic
PHP used to generate entries
echo"<div style='position:absolute;top:".date("i", strtotime($data['time_booked']))."px;'>{$data['name']}</div>";
i made a simple a jquery/php day scheduler(calendar), as show above.
as u can see i have parent div height:60px(1px each min) and position relative then i position child divs absolute according to its min (eg: demo patient is 10:00 so top:00px , fool patient is 10:40 so its top:40px). this is working fine except when there is overlapping time.. example if i have 2 entries same time then both will be positioned on top of each other.
Question how can i avoid this ? like google calendar if 2 booking exist the are moved side by side instead of on top of each other.
thanks
Problem solved:
using This plugin and following code
var n=$('div.entry').overlaps().length;var vol=(100/n);var round=0;
$('div.entry').overlaps().each(function(){
$(this).css('left',((vol-1)*round)+'%');
$(this).css('width',(vol-n)+'%')
round=round+1;
});
Now it works perfectly as google calendar :D.. thanks all