jQuery日历时间选择建议

Question

这听起来像是另一个“我应该使用什么日历插件”。而且有点像，但我正在寻找一些相当具体的东西，我希望有人会对我可以从中开始的事情提出建议。

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

我有一个日期列表，存储营业时间和服务器API调用的可用时间段，我需要将此列表提供给用户并允许他们选择一个时间段。

如果有一个jQuery插件或控件可能是一个很好的起点，请告诉我。目前，我正在使用Bootstrap表并自定义它。

最终结果不必与此设计完全匹配，但显然越接近越好（如果我可以自定义或主题控件）。

一个类似的例子，尽管设计非常不同，是Genius Bar预约时间选择器，这很不错，但我找不到他们使用的控件。

Answer 1

正如我上面提到的，我最终使用好的旧表和CSS创建了自己的。

由于这是一个Rails应用程序，我根据可用的时间段自定义服务器上的HTML视图。我还使用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数据标签来实现选择时隙，但该功能将会出现。这个问题主要是关于控件的设计。

这是我最常成品：

Answer 2

以下是我过去使用的一些jQuery插件。我真的很喜欢＃2（Highcharts）。

http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/