Formatting events according to start time

Question

Still working on my planner/calendar application. I'm nearly done, I got some of the harder parts working but I'm stuck at one more difficult part. I want to show my events in a grid according to their start time.

It doesn't show in this picture, but pretend there's a column with hours (8am - 11pm or so) at the left of the 25th. If an event starts at.. say, 1pm, I would like it to show somewhere in the middle of the page. If an event starts at 8:30 am, it should show between 8am and 9am.

I guess I could do this with tables, but I was wondering if there's another way. Is this doable with plain html/css, perhaps some Javascript? Any suggestions on what the best way would be to achieve this? If I use a table, I'm still not sure what would be the best way to do this. A cell for every thirty minutes? I have access to the start and end time of each event from my view. An event array (in this example, the 25th) looks like this:

Array

[1] => Array
    (
        [title] => Ethiek
        [description] => Ethiek: Opdracht 1
        [time_start] => 11:30:00
        [time_end] => 12:00:00
    )

[2] => Array
    (
        [title] => Project Management
        [description] => Test: Project Management
        [time_start] => 15:00:00
        [time_end] => 16:00:00
    )

[event_count] => 2

I appreciate any advice you can give me. Thanks a lot!

EDIT: Started a bounty on this because I'm still stuck and I would appreciate some feedback.

UPDATE:

I've been breaking my head over this and I honestly can't figure out the best way to do this. First of all, I think the reason I'm stuck is the way I read out my events from the db/array. This is the code I have to display the events as seen in my screenshot, don't mind my complex arrays:

        foreach($details[0] as $key => $detail)
    {
        echo "<div class='grid'>";
        $header = "<p class='detail_header'>";
        $header .= ucfirst($dates[0][$key]['name']) . ", " . $key . " " . $init['curr_month_name'];
        $header .= "<img src='" . base_url() . "assets/images/create_event.png' alt='Plan iets'></p>";

        echo $header;

        for($i = 1; $i <= $details[0][$key]['event_count']; $i++)
        {
            echo "<div class='event " . $details[0][$key][$i]['type'] . "'>";
                echo "<p class='event_title'>" . $details[0][$key][$i]['title'] . "</p>";
                echo $details[0][$key][$i]['description'];
            echo "</div>";
        }
        echo "</div>";  

    }

It's a bit of a mess, not to mention that I have the same code another time to fix some exceptions. But more importantly.. I feel like those loops don't allow me to make a lot of modifications to it. I tried adding two divs for AM and PM so I could split up the events in before-noon and afternoon blocks, and then just display the time on the event (to avoid having to work with a thousand blocks of 15 minutes). But yeah.. That didn't work out since it would put a couple of 'PM' divs if there is more than one event in the afternoon.

I'm tempted to just leave it like it is for now and just display the start/end time in the event divs.. until I figure out a better way to read them from the array and display them.

Any help/suggestions appreciated. Thanks.

Answer 1

I'm actually also doing this right now. My solution was to go with 960.gs-like divs.

First, I define a series of constants: Start time to display, end time to display, columns per hour, total columns. In my app's case, these variables are configurable by the user.

Second, I query an array of events that I need to deal with. These include a start time and end time, plus the details I want to display. I'll be using jQuery QTip to popup details that hover, so data to populate those is also included in this query.

Now, the 960.gs concept. The basis for a grid is knowing that you have X amount of space to display your content...with 960, it's 960 pixels. Mine is more custom, but this provides the concept. You can divide this by quite a few numbers, which becomes the basis for how to split the grid. Using this approach, I can easily define a column from grid_1 to grid_4, and it will take a width that is a commensurate percentage of the overall width (i.e. on a 16 column layout doing a 4 column div would cover 25%) It's cross-browser compatible, and doesn't require an overt amount of clear divs. You just need to make the numbers add up to match the amount of columns you want to work with.

Now, I begin by doing the math to figure out how much time each column represents. I assemble each day using a foreach loop: I start with the hour of the display start time and increment up. If the start_time of an event equals the incrementer, I start a div that's styled appropriately based on my coloring criteria. Likewise, if my end time <= the incrementer, I stop the div and define the column's width in the id. Obviously, at the end of the loop, I do an incrementer++. Repeat per day that you display.

My concept is doing this on an time basis for a weekly type calendar. But the overall idea could easily be modified for a month-style calendar or even for a day calendar.

Tables definitely make this easier (version 1 was tables) but it can be done either way if you have the patience.