Formatting events according to start time

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 so开发者_运维知识库me 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.

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.

Your idea about tables sounds like the best option. Assuming that the table borders are all hidden, you can go down to whatever time slot size your application dictates without making it look too messy.

I'd just start with a row representing 15 minutes if they just need to line up roughly at the correct times. Your :hover effect on each block could show the exact times, and the table is then just there to allow you to rowspan your events through rough 15 minute timeslots to make it line up enough that it's visually representative.

You could go with a css approach and absolute positioning of your calendar entries. You would then need a css class for each timeslot. Just to give some orientation:

.timeslot_0 {
 position: absolute;
 top: 0px;
}
.timeslot_1 {
 position: absolute;
 top: 50px;
}
.timeslot_2 {
 position: absolute;
 top: 100px;
}

<div id="calendar">
   <div class="day">
     <div class="entry timeslot_0>Schedule Enty</div>
     <div class="entry timeslot_2>Schedule Enty</div>
   </day>
   <div class="day">
     <div class="entry timeslot_1>Schedule Enty</div>
   </day>
   <div class="day"></day>
   <div class="day"></day>
   <div class="day"></day>
</div>

It's the same idea as it is bedind 960grid

As an alternative you could maybe use a percentage for the position from the top so 8am would be 8% and 6pm 100%. It's a bit tricky depending on the available size and stuff but could work out. Haven't tried it yet. Just stuck my mind as another possibility.

I would advise not to use tables, but instead Javascript and CSS.

1. Use Javascript to get the width of the calendar background: eg: 800 pixels.
2. Split this width to accommodate 30 minute slots for 24 hours; 800 / (24 * 2) = 16 pixels
   • 24 * 2 (48) is how many 30 minute slots there are in 24 hours.
   • 16 pixels is how much space you have per 30 minutes.
3. For each event you have, take it's start time in blocks of 30 minutes and multiply it by 16 pixels to get it's position from the left hand side.
   • For an event that starts at 2:30 (5x 30 minute blocks), 5 * 16 = 80 pixels from the left
   • For an event that starts at 12:00 (24x 30 minute blocks), 24 * 16 = 384 pixels from the left
   • For an event that starts at 14:30 (29x 30 minute blocks), 29 * 16 = 464 pixels from the left

I suggest the easiest way to implement this is by using the power of jQuery;

var usableWidth = $('div.calendar').width();

eventsCollection.each(function(singleEvent) {
    $(singleEvent).width = (getStartTimeInMinutes(singleEvent) / 30) * (24 * 2); 

});

In order to do this, you would need to represent your events in JSON (Javascript Object Notation). Using php, this is easy with json_encode().

This method can be a little complicated to understand at first, but it keeps your markup (HTML) very clean and works really well with any size screen. Most importantly, as your events will be represented as Javascript Objects, it gives you a really great starting point to making a really rich Ajax application.

glad to hear you're making progress. Tables still appear to me the best solution for this. Think about this: - you can style width, height, etc, to set them in a grid like way, which is what you want. - you know exactly the structure, so running through the table is simple loop code

And the clincher for me: - tables provide accessibility. Because screenreaders have ways to interpret tables in meaningful ways for sight-impaired viewers, the tables a particularly helpful when the contents is made meaningful by the rows and columns, which is exactly what you've got.

By the way, put in the URL of a running version for us when you're done.

Yo. I have been looking at a similar problem for a calendar module of a website I have to build. I am putting it together in c# so the code would not really suite your answer full but the way that i've looked at data may help.

Now tables are pretty hard so forgive the crudness of this :P

-------------------------------------------------------------------------------------------
                 hrs | mins |total mins|        
day start time | 10  |  0   |600       |running time in mins        
day end time   | 23  | 30   |1410      |810     
item start time| 13  |  0   |780       |running time | distance to cover | starting point
item end time  | 16  | 40   |1000      |220          | 27.16%            | 180
-------------------------------------------------------------------------------------------

If you will look at the above. I have a day with start time or end time. This can be converted to what ever time format you need week month whatever. The point is that you can look at all your items and find the earliest start date and latest end time calculating 100% of your event distance(for me 810 mins).

From here you can calculate % points that an individual even needs to cover (single event run time/total event runtime * 100). This would be the distance to draw that individual item.

And give that item a starting point(this should be a percentange as well) but starting point for event one is 180 mins(total event start time - item event start time )

Thanks. KJ