How could I represent a series of events like google calendar?

Question

I need to be able to plot events on a vertical timeline and I like the way Google Calendar achieves this:

Currently I'm displaying the information with a ListView component, but this two practical drawbacks:

1. It's far from clear when there's a gap
2. Or, conversely, when there's an overlap

Both problems stem from the lack of representation of event length. This is the primary thing I'd like to rectify.

Is there a component available that will help me to do this? Else, does anyone have any suggestions for how I should go about making it from scratch?

I'm using C# and winforms.

Answer 1

My first thoughts are to A) try using the Microsoft Charts to make this or B) Create a custom control that draws out rectangles for each event, and position the rectangle in the appropriate time range.

Answer 2

I have code that will produce output in a day view calendar format like you are wanting. unfortunately I can't just give it to you. but here is the gist:

1. Create a container div, set it to the height you want, with overflow set to scroll
2. Create an inner div, relative positioning, set to 50 * 24 pixels height
3. Create 24 divs inside that, absolutly positioned, set a height of 50 and a top of 50 * i
4. In each of the 24 divs, create divs for each tic mark at 25%, 50%, 75% and 100%
5. To add an event:
   • Get the start hour, min, sec and * by 50 for the top
   • (Get the end hour, min, sec - start hour, min, sec) * 50 for the height

You could do the whole thing based on % but i ran into rounding issue in x-browser related stuff. As for events being next to each other, that was a "fun" algorithm to figure out.

Answer 3

Tom, if you are ready to pay for commercial scheduling component, here is the one and similarly there are some others available in the market.

http://www.syncfusion.com/products/user-interface-edition/windows-forms/Schedule

but if you intend to develop one by yourself, then probably you could customize DataGrid control that's by far the reliable way which I could think of. but authoring a new windows forms control will take quite a bit of time, then we could expect.

Happy Coding.

Answer 4

You will probably have to create a custom control having only the functionality for letting the user resize. And one layout manager to handle the resize events and arranging the custom controls. You just need to make sure that the smaller control is always on the top of the bigger control so that user has a chance to resize it.

Answer 5

Well, let's talk. I have several such controls behind me, so maybe I can help the issues involved.

1. determine what is the smallest slot that you want to display on the screen - say 15 minutes
2. divide your viewing area into slots of that duration - if you need to display 6 hours, create an list of 4x6=24 items
3. each item will be the list of schedule objects found in there
4. iterate your scheduling objects, and assign them to the list.

5. iterate the list and draw. you should have enough information for a display like above.

   class ScheduleItem { DateTime start; DateTime end; string someText; }

   class OneSlot { list< ScheduleItem > ItemsInSlot; }

   list< OneSlot > VisibleSlots;

If you need pixel precision (you really don't need second precision here because you are on the screen not moving in time) you make slot as small as you have to here.

8 hours are 28800 seconds; if you have your time slot set to 30 seconds, you'll have 960 time slots available for mapping to the screen.

Hope it helps, comment me if your need to further discuss this.

Answer 6

The best component I know for that is the devexpress scheduler control:

http://www.devexpress.com/Products/NET/Controls/WinForms/Scheduler/

Answer 7

Another commercial offering: http://www.telerik.com/products/winforms/scheduler.aspx