jQuery Calendar 时间选择建议答案

【问题标题】：jQuery Calendar time selection suggestionjQuery Calendar 时间选择建议
【发布时间】：2015-09-01 15:35:37
【问题描述】：

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

我需要创建日期和时间的布局。类似于任何日历程序中的每周视图，但如图所示略有不同。

我有一个来自服务器 API 调用的日期、存储开放时间和可用时隙的列表，我需要将此列表呈现给用户并允许他们选择一个时隙。

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

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

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

【问题讨论】：

这真的很具体，我一直在寻找类似的东西。我不确定是否有一个好的计划日历，你也必须自定义无论如何，所以最好的选择是最接近的功能，可以让你的生活更轻松。我更喜欢创建一个带有自定义时间线的表格，然后执行你在它上面使用的日期选择器。我会尝试为此编写一些代码。
嗨@Berker，我实际上正在研究一个组合的引导表/CSS覆盖解决方案。到目前为止，结果很好。为“不可用”、“可用”、“忙碌”、“光标选择”创建了一些类，允许我在构建页面时动态更新时间段（这是在 Ruby on Rails 应用程序中，所以我可以轻松地构建这个页面在发送到客户端之前先服务器。到目前为止一切顺利，我会在下周继续更新这篇文章。
嗨@KevinZych 我在jquery 中寻找与上面相同的日历，能否请您参考我的链接。谢谢
我的答案在下面，虽然这个解决方案已经很老了，我敢肯定还有其他东西可以使用。

标签： javascript jquery css jquery-plugins twitter-bootstrap

【解决方案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 数据标签来实现选择时隙，但该功能将会出现。这个问题主要是关于控件的设计。

这是我的大部分成品：

【讨论】：

请问js部分用什么？我对这种方法很感兴趣。现在我一直在使用茧并手动添加时间段，...不好。

【解决方案2】：

这里有一些我过去使用过的 jQuery 插件。我真的很喜欢#2（Highcharts）。

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

【讨论】：

链接坏了，所以答案也是。