jQuery日历时间选择建议 [英] jQuery Calendar time selection suggestion

问题描述

这听起来像是另一个我应该使用什么日历插件。然而，我正在寻找一个相当具体的东西，我希望有人会有一个建议，我可以从一开始。

This sounds like yet another "what calendar plugin should I use". And it sort of is, however I'm looking for something fairly specific and I'm hoping someone will have a suggestion on something that I can start from.

我需要创建日期和时间的布局。类似于任何日历程序中的每周视图，但略有不同，您可以在图像中看到。

I need to create a layout of days and times. Similar to the Weekly view in any calendar program, but slightly different as you can see in the image.

我有一个日期，商店营业时间和可用时间

I have a list of dates, store open hours, and available time slots from a server API call and I need to present this list to the user and allow them to select a time slot.

如果有一个jQuery插件或控件，那么我们需要向用户提供此列表，并允许他们选择一个时间段。这可能是一个很好的起点，请让我知道。目前，我使用Bootstrap表并自定义它。

If there is a jQuery plugin or control out there that might be a good starting point, please let me know. Currently, I am using Bootstrap tables and customizing the heck out of it.

最终结果不必与这个设计相匹配，但显然越接近如果我可以自定义或主题的控件）。

The end result doesn't have to match this design EXACTLY, but obviously the closer the better (if I can customize or theme the control).

一个类似的例子，尽管非常不同的设计，是天才酒吧约会时间选择器，这将是很好，但我不能找到他们使用的控制。

A similar example, albeit very different design, is the Genius Bar appointment time picker, which would be nice, but I cannot find the control they use.

推荐答案

如上所述，我最终创建了自己的使用好的旧表和CSS。

As I mentioned above, I ended up creating my own using good old tables and CSS.

由于这是一个Rails应用程序，我根据可用的时间槽在服务器上自定义HTML视图。我也使用Ruby自动生成周日和日期。

Since this is a Rails app, I customize the HTML view on the server based on the available time slots. I also generate the week days and dates automatically using Ruby.

在HAML视图中：

%table
  %thead
    %tr
      %th
        .day-of-week= Time.now.strftime("%A")
        .date= Time.now.strftime("%b %e")
      %th
        .day-of-week= (Time.now + 1.day).strftime("%A")
        .date= (Time.now + 1.day).strftime("%b %e")
      ...
  %tbody
    %tr
      - (1..7).each do
        %td.closed 6:00 am
    %tr
      - (1..7).each do
        %td.available 7:00 am
    ...

在CSS中：

table {
  border-collapse: separate;
  border-spacing: 20px 10px;

  tbody tr td {
    &.closed {
      color: lightgray;
    }

    &.unavailable {
      color: #777;
      background-color: lightgray;
      border-radius: 15px;
    }

    &.available {
      cursor: pointer;

      &:hover {
        color: white;
        background-color: blue;
        border-radius: 15px;
      }
    }
  }
}

工作在头图像/ CSS渐变，但我使用的占位符给出了正确的想法。我还需要添加一个类，并使用jQuery数据标签来实现选择一个时间段，但该功能将来。这个问题主要是关于控件的设计。

Still working on the header image / css gradient, but the placeholder I used gives the right idea. I will also need to add a class and use the jQuery data tags to implement selecting a time slot, but that functionality will come. This question was mostly about the design of a control.

这是我最完整的产品：

Here's my mostly finished product:

这篇关于jQuery日历时间选择建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！