handi8clornAtowlbow
New Member
I'm working on a Javascript/jQuery calendar which includes a month view and a day view. Clicking the days will change the date, which will update the date variables in the day view.The day view is split up into half hour segments from midnight to 11:00 PM. Clicking on any half hour \[code\]<tr>\[/code\] (the day view is a table) will create an event between that time clicked and an hour in the future, as well as append a \[code\]div\[/code\] on top of the calendar, spanning the range of time and positioned at the correct starting point (each pixel is a minute...)There is a problem, however. If you create an "event" between a certain time span where there is already one in place, they overlap. This is the default behavior, obviously, but what I would like to happen is that if an event is created between a range of dates that is already occupied by an event, they align side by side so that they're not overlapping.This resembles the behavior seen in the iCal app for mac:
Now my first thought to achieve such a goal was to use collision detection, but all the jQuery plugins for this are bloated or require the elements to be draggable.Then I thought there might be a way in CSS to do this, where if two elements are overlapping, they split the width evenly.Then I thought that's ridiculously far fetched, so I'm wondering how I can achieve this as easily as possible.I'll post the full code in a jsFiddle, but for the most important function would be \[code\]insertEvent\[/code\] which looks like this:\[code\] function insertEvent(start, end){ var end_minutes = new Date(end).getMinutes(); var end_border = new Date(new Date(end).setMinutes(end_minutes + 2)); //$(".day_date").html(start + "<br />" + end); var diff = Math.abs(end_border - new Date(start)); var minutes = Math.floor((diff/1000)/60); var start_element = $("td").find("[data-date='" + start + "']"); var offset = start_element.offset().top - $(".second").offset().top; var this_element = $("<div class='event' style='height:" + minutes + "px;margin-top:" + offset + "px;'></div>"); $(".right").prepend(this_element); }\[/code\]This takes two parameters in the javascript \[code\]new Date()\[/code\] format, one for the start date and one for the end date.The fiddle: http://jsfiddle.net/charlescarver/HwdwL/