views:

200

answers:

1

I'm working on adding a day view option to an existing calendar solution. Like many people implementing their own calendars, I am trying to model Google Calendars. They have an excellent calendar solution and their day view provides a lot of flexibility. For most part, the implementation is going well; however, I'm having issues when it comes to conflicting events.

Essentially, I want the events to share the same space, side by side. Events that start at the same time should have the longest event first. In the example data set I'm working with, I have four events:

A: 10:30 - 11:30

B: 13:30 - 14:30

C: 10:30 - 11:00

D: 10:45 - 14:00

I can handle A, C, and D just fine, the problem comes with D. A should be left of C which should be left of D; each taking one third of the width (it's fixed width so I can do simple math to figure that out). The problem is that B should be under A and C, to the left of D. Ideally, B would take up the same amount of space as A and C (two thirds width), but I would even settle for it only taking up only one third width.

My array of events looks similar to the following:

$events = array(
  '1030' => array(
    'uniqueID1' => array(
      'start_time' => '1030',
      'end_time' => '1130',
    ),
    'uniqueID2' => array(
      'start_time' => '1030',
      'end_time' => '1100',
    ),
  ),
  '1045' => array(
    'uniqueID3' => array(
      'start_time' => '1045',
      'end_time' => '1400',
    ),
  ),
  '1330' => array(
    'uniqueID3' => array(
      'start_time' => '1330',
      'end_time' => '1430',
    ),
  ),
);

My plan is to add some indexes to each event that include how many events it conflicts with (so I can calculate the width) and which position in that series it should be (so I can calculate the left value). However, that doesn't help the B.

I'm thinking I might need an algorithm that uses some basic geometry and matrices, but I'm not sure where to begin.

Any help is greatly appreciated.

+1  A: 

This doesn't help with your own custom calendar development but as you're trying to achieve a google calendar like interface I can highly recommend the jQuery fullcalendar plugin.

It takes a feed for the calendar data, I'm currently hooking it up to an Outlook Exchange public calendar, and then display in month / week / day views. The day view may offer a good example of implementing your original request.

Brian Scott
This is excellent! I only wish this was around when the month and week views were implemented. I can use this plugin to handle all of the rendering, including the positioning I was having trouble with, and point it a file on my site that returns the events (JSON encoded of course). Thanks!
JamesArmes
No problem, hope it works out well for you. If you need any help implementing drop me a message. :-)
Brian Scott