How can I imagine a series of events like the Google calendar?

Question

I need to be able to display events on a vertical timeline, and I like how Google Calendar achieves this:

I am currently displaying information with a ListView component, but these are two practical flaws:

• It is far from clear when there is a gap.
• Or, conversely, when there is overlap

Both problems are related to the lack of representation of the length of the event. This is the main thing I would like to fix.

Is there a component available that will help me do this? Also, does anyone have any suggestions as to how I should do this from scratch?

I use C # and winforms.

Answer 1

Tom, if you are willing to pay for a commercial planning component, here is one, and in a similar way 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 it yourself, perhaps you can customize the DataGrid control, which is certainly a reliable way that I could think of. but creating a new window control will take quite a while, then we might expect.

Happy coding.

Answer 2

My first thoughts: A) try using Microsoft Charts for this or B) Create a custom control that selects the rectangles for each event, and place the rectangle in the appropriate time range.

Answer 3

The best component I know for this is the devexpress scheduler manager:

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

Answer 4

You may have to create a custom control that has only the functionality to resize the user. And one layout manager for handling resize events and organizing custom controls. You just need to make sure that the smaller control is always at the top of more control so that the user can resize it.

Answer 5

Ok, let me talk. I have several of these controls behind me, so maybe I can help solve these problems.

• determine what the smallest slot you want to display on the screen is - say, 15 minutes.
• divide the viewing area into slots of this duration - if you need to display 6 hours, create a list of 4x6 = 24 elements
• each item will be a list of schedule objects found there
• iterate your planning objects and assign them to a list.

• iterate list and draw. You should have enough information to display as shown above.

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

  class OneSlot {List <ScheduleItem> ItemsInSlot; }

  List <OneSlot> VisibleSlots;

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

8 hours - 28800 seconds; if you have set a time interval of 30 seconds, 960 time intervals will be available for display on the screen.

Hope this helps, please comment me if you need to continue discussing this issue.

Answer 6

I have a code that will output the result in the format of a day view calendar as you want it. Unfortunately, I can't just give it to you. but here's the gist:

• Create a div container, set it to the desired height, with the overflow set to scroll
• Create an inner div, relative positioning, set the height to 50 * 24 pixels
• Create 24 divs inside this one absolutely positioned, set height 50 and top 50 * i
• In each of the 24 divs, create a div for each tic mark at 25%, 50%, 75% and 100%
• To add an event:
  • Get the starting hour, min, sec and * at 50 for the top
  • (Get the final hour, min, sec - start hour, min, sec) * 50 for height

You can do all this based on%, but I ran into the problem of rounding in x-browser related stuff. As for events that are next to each other, it was a “fun” algorithm to determine.

Answer 7

Other commercial offer: http://www.telerik.com/products/winforms/scheduler.aspx