3

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

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

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

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

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

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

时隙选择器

4

2 回答 2

4

正如我上面提到的，我最终使用良好的旧表格和 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 数据标签来实现选择时隙，但该功能将会出现。这个问题主要是关于控件的设计。

这是我的大部分成品： 自定义调度程序

于 2013-01-30T16:46:33.513 回答
1

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

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

于 2013-08-25T03:00:55.960 回答