我如何表示像谷歌日历这样的一系列事件?

发布于 2024-09-25 13:31:39 字数 363 浏览 2 评论 0原文

我需要能够在垂直时间轴上绘制事件,并且我喜欢 Google 日历实现此目的的方式:

Screenshot of a day in Google Calendar

目前,我使用 ListView 组件显示信息,但这

  1. 有两个实际缺点: 当有间隙时,很不清楚;
  2. 或者,相反,当有重叠时,

这两个问题都源于缺乏事件长度的表示。这是我想纠正的首要问题。

有可用的组件可以帮助我做到这一点吗?否则,有人对我应该如何从头开始制作有任何建议吗?

我正在使用 C# 和 winforms。

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

Screenshot of a day in Google Calendar

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

私野 2024-10-02 13:31:39

汤姆,如果您准备好支付商业调度组件的费用,那么这是一个,同样,市场上还有其他一些可用的组件。

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

但如果您打算自己开发一个,那么您可能可以自定义 DataGrid 控件,这是迄今为止我能想到的可靠方法。但是创作一个新的 Windows 窗体控件将花费相当多的时间,这是我们可以预料到的。

快乐编码。

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.

凡尘雨 2024-10-02 13:31:39

我的第一个想法是 A) 尝试使用 Microsoft Charts 来实现此目的,或者 B) 创建一个自定义控件,为每个事件绘制矩形,并将矩形放置在适当的时间范围内。

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.

打小就很酷 2024-10-02 13:31:39

我所知道的最好的组件是 devexpress 调度程序控件:

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

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

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

何必那么矫情 2024-10-02 13:31:39

您可能必须创建一个仅具有允许用户调整大小的功能的自定义控件。以及一个布局管理器来处理调整大小事件和排列自定义控件。您只需要确保较小的控件始终位于较大控件的顶部,以便用户有机会调整其大小。

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.

‖放下 2024-10-02 13:31:39

我有代码可以像您想要的那样以日视图日历格式生成输出。不幸的是我不能把它给你。但要点是:

  1. 创建一个容器div,将其设置为您想要的高度,将溢出设置为滚动
  2. 创建一个内部div,相对定位,设置为50 * 24像素高度
  3. 在其中创建24个div,绝对定位,设置a高度为 50,顶部为 50 * i
  4. 在 24 个 div 中的每一个中,为每个 tic 标记创建 25%、50%、75% 和 100% 的 div
  5. 要添加事件:
    • 获取开始时、分、秒,* 为顶部加 50
    • (获取结束时分秒 - 开始时分秒)* 50 高度

您可以根据 % 完成整个操作但我遇到了 x 浏览器相关内容的舍入问题。至于事件彼此相邻,这是一个需要弄清楚的“有趣”算法。

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.

诠释孤独 2024-10-02 13:31:39

好吧,我们来谈谈吧。我身后有几个这样的控件,所以也许我可以帮助解决所涉及的问题。

  1. 确定您想要在屏幕上显示的最小时段 - 比如说 15 分钟,
  2. 将您的查看区域划分为该持续时间的时段 - 如果您需要显示 6 小时,请创建一个 4x6=24 个项目的列表,
  3. 每个项目将是列表在那里找到的计划对象
  4. 迭代您的计划对象,并将它们分配到列表中。
  5. 迭代列表并绘制。您应该有足够的信息来显示如上所示的内容。

    类 ScheduleItem
    {
    日期时间开始;
    日期时间结束;
    字符串一些文本;
    }

    OneSlot 类
    {
    列表<日程项目>插槽中的物品;
    }

    列表<一个插槽> VisibleSlots;

如果您需要像素精度(这里实际上不需要第二精度,因为您在屏幕上没有及时移动),那么您可以将插槽设置​​得尽可能小。

8小时就是28800秒;如果您将时间段设置为 30 秒,则将有 960 个时间段可用于映射到屏幕。

希望对您有所帮助,如果您需要进一步讨论,请评论我。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文